Önceden getirmenin iki yolu: <link> etiketleri ve HTTP üstbilgileri

Demián Renzulli
Demián Renzulli

Bu codelab'de ön getirmeyi iki şekilde uygulayacaksınız: <link rel="prefetch"> ile ve HTTP Link üst bilgisiyle.

Örnek uygulama, mağazanın en çok satan tişörtü için özel indirim içeren tanıtım amaçlı bir açılış sayfasına sahip bir web sitesidir. Açılış sayfası tek bir ürüne bağlantı verdiğinden, kullanıcıların büyük bir kısmının ürün ayrıntıları sayfasına gideceğini varsayabilirsiniz. Bu, ürün sayfasını açılış sayfasında ön besleme için mükemmel bir aday haline getirir.

Performansı ölçün

Öncelikle referans performansı belirleyin:

  1. Projeyi düzenlenebilir hale getirmek için Düzenlemek için remiks oluştur'u tıklayın.
  2. Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a tam ekran basın.
  3. Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.
  4. sekmesini tıklayın.

  5. Yavaş bir bağlantı türünü simüle etmek için Düşük hız açılır listesinde Hızlı 3G'yi seçin.

  6. Ürün sayfasını yüklemek için örnek uygulamada Şimdi satın al'ı tıklayın.

product-details.html sayfasının yüklenmesi yaklaşık 600 ms sürüyor:

product-details.html dosyasının yükleme sürelerini gösteren ağ paneli

Gezinmeyi iyileştirmek için product-details.html sayfasını önceden almak üzere açılış sayfasına bir prefetch etiketi ekleyin:

  • views/index.html dosyasının başına aşağıdaki <link> öğesini ekleyin:
<!doctype html>
  <html>
    <head>
       <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">

      <link rel="prefetch" href="/product-details.html" as="document">
      ...
</head>

as özelliği isteğe bağlıdır ancak önerilir. Bu özellik, tarayıcıya doğru üstbilgileri ayarlama ve kaynağın önbellekte olup olmadığını belirleme konusunda yardımcı olur. Bu özellik için örnek değerler şunlardır: document, script, style, font, image ve diğer.

Ön getirmenin çalıştığını doğrulamak için:

  1. Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a tam ekran basın.
  2. Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.
  3. sekmesini tıklayın.

  4. Yavaş bir bağlantı türünü simüle etmek için Düşük hız açılır listesinde Hızlı 3G'yi seçin.

  5. Önbelleği devre dışı bırak onay kutusunun işaretini kaldırın.

  6. Uygulamayı yeniden yükleyin.

Açılış sayfası yüklendiğinde product-details.html sayfası da yüklenir ancak en düşük önceliğe sahiptir:

product-details.html dosyasının önceden getirildiğini gösteren ağ paneli.

Sayfa beş dakika boyunca HTTP önbelleği'nde tutulur. Bu sürenin ardından belge için normal Cache-Control kuralları geçerli olur. Bu durumda product-details.html, public, max-age=0 değerine sahip bir cache-control başlığına sahiptir. Bu, sayfanın toplam beş dakika boyunca tutulacağı anlamına gelir.

Performansı yeniden değerlendirme

  1. Uygulamayı yeniden yükleyin.
  2. Ürün sayfasını yüklemek için örnek uygulamada Şimdi satın al'ı tıklayın.

paneline göz atın. İlk ağ izlemeye kıyasla iki fark vardır:

  • Boyut sütununda "önceden getirme önbelleği" gösterilir. Bu, kaynağın ağ yerine tarayıcının önbelleğinden alındığı anlamına gelir.
  • Süre sütununda, belgenin yüklenmesinin yaklaşık 10 ms sürdüğü görülüyor.

Bu, yaklaşık 600 ms süren önceki sürüme kıyasla yaklaşık% 98'lik bir azalmadır.

Önceden getirme önbelleğinden alınan product-details.html dosyasını gösteren ağ paneli.

Ek kredi: prefetch'ü aşamalı geliştirme olarak kullanma

Önokuma, hızlı bağlantılarda gezinen kullanıcılar için aşamalı bir geliştirme olarak en iyi şekilde uygulanır. Ağ koşullarını kontrol etmek ve buna göre dinamik olarak ön getirme etiketleri eklemek için Network Information API'yi kullanabilirsiniz. Böylece, veri tüketimini en aza indirebilir ve yavaş veya pahalı veri planlarına sahip kullanıcılar için maliyetleri düşürebilirsiniz.

Uyarlanabilir ön getirmeyi uygulamak için önce <link rel="prefetch"> etiketini views/index.html'ten kaldırın:

<!doctype html>
  <html>
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
       <link rel="prefetch" href="/product-details.html" as="document">
       ...
    </head>

Ardından, kullanıcı hızlı bir bağlantı kullanıyorsa prefetch etiketini dinamik olarak ekleyen bir işlev tanımlamak için public/script.js öğesine aşağıdaki kodu ekleyin:

function injectLinkPrefetchIn4g(url) {
    if (window.navigator.connection.effectiveType === '4g') {
        //generate link prefetch tag
        const linkTag = document.createElement('link');
        linkTag.rel = 'prefetch';
        linkTag.href = url;
        linkTag.as = 'document';

        //inject tag in the head of the document
        document.head.appendChild(linkTag);
    }
}

İşlev şu şekilde çalışır:

  • Kullanıcının 4G (veya daha hızlı) bağlantı kullanıp kullanmadığını belirlemek için Network Information API'nin effectiveType mülkünü kontrol eder.
  • Bu koşul karşılanırsa ipucu türü olarak prefetch içeren bir <link> etiketi oluşturur, önceden getirilecek URL'yi href özelliğinde iletir ve kaynağın HTML document olduğunu as özelliğinde belirtir.
  • Son olarak, komut dosyasını sayfanın head bölümüne dinamik olarak ekler.

Ardından, kapatıcı </body> etiketinden hemen önce script.js öğesini views/index.html öğesine ekleyin:

<body>
      ...
      <script src="/script.js"></script>
</body>

Sayfanın sonunda script.js isteğinde bulunmak, sayfa ayrıştırılıp yüklendikten sonra script.js'ün yüklenip yürütülmesini sağlar.

Ön beslemenin mevcut sayfanın kritik kaynaklarını etkilemediğinden emin olmak için window.load etkinliğinde injectLinkPrefetchIn4g()'ü çağırmak üzere aşağıdaki kod snippet'ini ekleyin:

<body>
      ...
      <script src="/script.js"></script>
      <script>
           window.addEventListener('load', () => {
                injectLinkPrefetchIn4g('/product-details.html');
           });
      </script>
</body>

Açılış sayfası artık product-details.html'yi yalnızca hızlı bağlantılarda önceden hazırlıyor. Şunları doğrulamak için:

  1. Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a tam ekran basın.
  2. Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.
  3. sekmesini tıklayın.
  4. Düşük hız açılır listesinde Online'ı seçin.
  5. Uygulamayı yeniden yükleyin.

Ağ panelinde product-details.html simgesini görürsünüz:

product-details.html dosyasının önceden getirildiğini gösteren ağ paneli.

Ürün sayfasının yavaş bağlantılarda önceden getirilmediğini doğrulamak için:

  1. Yavaşlatma açılır listesinde Yavaş 3G'yi seçin.
  2. Uygulamayı yeniden yükleyin.

panelinde, yalnızca açılış sayfasının product-details.html içermeyen kaynakları yer almalıdır:

product-details.html dosyasının önceden getirilmediğini gösteren ağ paneli.

HTTP Link üst bilgisi, link etiketiyle aynı türde kaynakları önceden almak için kullanılabilir. Performanstaki fark önemsiz olduğundan, hangisini ne zaman kullanacağınıza karar vermek çoğunlukla tercihinize bağlıdır. Bu durumda, ürün sayfasının ana CSS'sini önceden almak ve oluşturma işlemini daha da iyileştirmek için bu özelliği kullanırsınız.

Açılış sayfasının sunucu yanıtına style-product.css için bir HTTP Link üstbilgisi ekleyin:

  1. server.js dosyasını açın ve kök URL'nin (/) get() işleyicisini bulun.
  2. İşleyicinin başına aşağıdaki satırı ekleyin:
app.get('/', function(request, response) {
    response.set('Link', '</style-product.css>; rel=prefetch');
    response.sendFile(__dirname + '/views/index.html');
});
  1. Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a tam ekran basın.
  2. Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.
  3. sekmesini tıklayın.
  4. Uygulamayı yeniden yükleyin.

style-product.css, açılış sayfası yüklendikten sonra artık en düşük öncelikte önceden getirilir:

style-product.css dosyasının önceden getirildiğini gösteren ağ paneli.

Ürün sayfasına gitmek için Şimdi satın al'ı tıklayın. paneline göz atın:

Önceden getirme önbelleğinden alınan style-product.css dosyasını gösteren ağ paneli.

style-product.css dosyası "ön alma önbelleği"nden alınır ve yüklemesi yalnızca 12 ms sürer.