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

Demián Renzulli
Demián Renzulli
X GitHub

Bu codelab'de, önceden getirme işlemini 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 bir promosyon 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 bölümünün ürün ayrıntıları sayfasına gideceğini varsayabiliriz. Bu durum, ürün sayfasını açılış sayfasında önceden getirme için uygun bir aday haline getirir.

Performansı ölçün

Öncelikle temel performansı belirleyin:

  1. Geliştirici Araçları'nı açmak için `Control+Shift+J` (veya Mac'te `Command+Option+J`) tuşlarına basın.

  2. Ağ sekmesini tıklayın.

  3. Yavaş bağlantı türünü simüle etmek için Sınırlama açılır listesinde Hızlı 3G'yi seçin.

  4. Ü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 için yükleme sürelerini gösteren ağ paneli

<link rel="prefetch"> ile ürün sayfasını önceden getirme

Gezinmeyi iyileştirmek için açılış sayfasına prefetch etiketi ekleyerek product-details.html sayfasını önceden getirin:

  • 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. Tarayıcının doğru başlıkları ayarlamasına ve kaynağın önbellekte olup olmadığını belirlemesine yardımcı olur. Bu özelliğin örnek değerleri arasında document, script, style, font, image ve diğerleri yer alır.

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

  1. Geliştirici Araçları'nı açmak için `Control+Shift+J` (veya Mac'te `Command+Option+J`) tuşlarına basın.

  2. Ağ sekmesini tıklayın.

  3. Yavaş bağlantı türünü simüle etmek için Sınırlama açılır listesinde Hızlı 3G'yi seçin.

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

  5. Uygulamayı yeniden yükleyin.

Artık açılış sayfası yüklendiğinde product-details.html sayfası da en düşük öncelikte yüklenir:

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

Sayfa, beş dakika boyunca HTTP önbelleğinde tutulur. Bu sürenin ardından doküman 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 da sayfanın toplam beş dakika boyunca saklandığı 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.

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

  • Boyut sütununda "önceden getirme önbelleği" gösteriliyor. Bu, kaynağın ağdan değil, tarayıcının önbelleğinden alındığı anlamına gelir.
  • Süre sütununda, belgenin yüklenmesinin artık yaklaşık 10 ms sürdüğü gösteriliyor.

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

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

Ek kredi: prefetch öğesini progresif geliştirme olarak kullanma

Önceden getirme, hızlı bağlantılarda göz atan kullanıcılar için kademeli bir iyileştirme olarak en iyi şekilde uygulanır. Ağ koşullarını kontrol etmek ve buna göre önceden getirme etiketlerini dinamik olarak eklemek için Network Information API'yi kullanabilirsiniz. Bu sayede, yavaş veya pahalı veri planları kullanan kullanıcılar için veri tüketimini en aza indirebilir ve maliyetleri düşürebilirsiniz.

Uyarlanabilir önceden getirmeyi uygulamak için önce <link rel="prefetch"> etiketini views/index.html öğesinden 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ıdayken prefetch etiketini dinamik olarak yerleştiren bir işlev bildirmek 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);
    }
}

Bu işlev şu şekilde çalışır:

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

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

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

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

Önceden getirmenin geçerli sayfanın kritik kaynaklarını etkilemediğinden emin olmak için injectLinkPrefetchIn4g() işlevini window.load etkinliğinde ç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 yalnızca hızlı bağlantılarda product-details.html önceden getiriyor. Şunları doğrulayın:

  1. Geliştirici Araçları'nı açmak için `Control+Shift+J` (veya Mac'te `Command+Option+J`) tuşlarına basın.
  2. Ağ sekmesini tıklayın.
  3. Sınırlama açılır listesinde Online'ı seçin.
  4. Uygulamayı yeniden yükleyin.

Ağ panelinde product-details.html simgesini görmelisiniz:

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. Sınırlama açılır listesinde Slow 3G'yi (Yavaş 3G) seçin.
  2. Uygulamayı yeniden yükleyin.

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

Ağ panelinde, product-details.html dosyasının önceden getirilmediği gösteriliyor.

HTTP Link üstbilgisiyle ürün sayfasının stil sayfasını önceden getirin.

HTTP Link üst bilgisi, link etiketiyle aynı türdeki kaynakları önceden getirmek için kullanılabilir. Performans açısından fark önemsiz olduğundan, hangisini kullanacağınıza karar verirken tercihinizi göz önünde bulundurabilirsiniz. Bu durumda, ürün sayfasının ana CSS'sini önceden getirmek için kullanırsınız. Böylece, oluşturma işlemi daha da iyileştirilir.

Açılış sayfası için 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 için 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. Geliştirici Araçları'nı açmak için `Control+Shift+J` (veya Mac'te `Command+Option+J`) tuşlarına basın.
  2. Ağ sekmesini tıklayın.
  3. Uygulamayı yeniden yükleyin.

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

Network panel showing style-product.css prefetched.

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

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

style-product.css dosyası "önceden getirme önbelleğinden" alındı ve yüklenmesi yalnızca 12 ms sürdü.