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

Dömián Renzulli
Demián Renzulli
X GitHub Nostaljik

Bu codelab'de önceden getirme işlemini <link rel="prefetch"> ve HTTP Link üst bilgisi ile uygulayacaksınız.

Örnek uygulama, mağazanın en çok satan tişörtü için özel bir indirimin sunulduğu tanıtım amaçlı 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 yüzdesinin ürün ayrıntıları sayfasına gideceğini varsayabilirsiniz. Bu, ürün sayfasını açılış sayfasında önceden getirme için mükemmel bir aday yapar.

Performansı ölçün

İlk olarak temel performansı belirleyin:

  1. Projeyi düzenlenebilir hale getirmek için Düzenlenecek remiks'i tıklayın.
  2. Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a tam ekran basın.
  3. Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.

  4. Ağ sekmesini tıklayın.

  5. Yavaş bağlantı türü simüle etmek için, Hızlandırma açılır listesinden Hızlı 3G'yi seçin.

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

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

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

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

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

  • Aşağıdaki <link> öğesini views/index.html dosyasının başına 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 zaten önbellekte olup olmadığını belirlemesine yardımcı olur. Bu özellik için örnek değerler şunlardır: document, script, style, font, image ve diğer değerler.

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

  1. Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a tam ekran basın.
  2. Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.

  3. Ağ sekmesini tıklayın.

  4. Yavaş bağlantı türü simüle etmek için, Hızlandırma açılır listesinden 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.

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

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

Sayfa beş dakika HTTP önbelleğinde tutulur, ardından dokümana normal Cache-Control kuralları uygulanır. Bu örnekte, product-details.html URL'sinin public, max-age=0 değerine sahip bir cache-control üstbilgisi vardır. Bu, sayfanın toplam beş dakika tutulacağı anlamına gelir.

Performansı yeniden değerlendirin

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

Ağ paneline göz atın. İlk ağ izlemesiyle karşılaştırıldığında iki fark vardır:

  • Boyut sütununda "ön 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, dokümanın yüklenmesi için geçen sürenin artık yaklaşık 10 ms olduğu gösterilmektedir.

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

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

Ekstra kredi: prefetch uygulamasını aşamalı geliştirme olarak kullanın

Önceden getirmenin, hızlı bağlantılara göz atan kullanıcılar için progresif bir geliştirme olarak uygulanması önerilir. Ağ koşullarını kontrol etmek ve önceden getirme etiketlerini dinamik olarak eklemek için Network Information API'yi kullanabilirsiniz. Bu sayede veri tüketimini en aza indirebilir ve yavaş ya da pahalı veri planlarına sahip kullanıcıların maliyetlerinden tasarruf edebilirsiniz.

Uyarlanabilir önceden getirme işlemini 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 bir şekilde 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ı) bir bağlantı kullanıp kullanmadığını belirlemek için Network Information API'nin effectiveType özelliğini kontrol eder.
  • Bu koşul karşılanırsa ipucu türü prefetch olan bir <link> etiketi oluşturur, href özelliğinde önceden getirilen URL'yi iletir ve as özelliğinde kaynağın bir HTML document olduğunu belirtir.
  • Son olarak, komut dosyasını dinamik bir şekilde sayfanın head bölümüne ekler.

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

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

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

Önceden getirmenin geçerli sayfaya ilişkin kritik kaynakları engellemediğinden emin olmak için window.load etkinliğinde injectLinkPrefetchIn4g() yöntemini ç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 öğesini yalnızca hızlı bağlantılarda önceden getirmektedir. Şunları doğrulamak için:

  1. Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a tam ekran basın.
  2. Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
  3. Ağ sekmesini tıklayın.
  4. Kısıtlama açılır listesinden Çevrimiçi'yi seçin.
  5. Uygulamayı yeniden yükleyin.

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

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

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

  1. Kısıtlama açılır listesinden Yavaş 3G'yi seçin.
  2. Uygulamayı yeniden yükleyin.

Ağ paneli, yalnızca product-details.html içermeyen açılış sayfasına ait kaynakları içermelidir:

product-details.html öğesinin önceden getirilmediğini gösteren ağ paneli.

HTTP Link başlığı içeren ürün sayfasının stil sayfasını önceden getirin

HTTP Link üst bilgisi, link etiketiyle aynı tür kaynakları önceden getirmek için kullanılabilir. Performanstaki fark önemsiz olduğundan, birini veya diğerini ne zaman kullanacağınıza karar vermek çoğunlukla tercihinize bağlıdır. Bu durumda, oluşturulmasını daha da iyileştirmek amacıyla ürün sayfasının ana CSS'sini önceden getirmek için bunu kullanırsınız.

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

  1. server.js dosyasını açın ve kök URL için get() işleyicisini bulun: /.
  2. Aşağıdaki satırı işleyicinin başına 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öster'e, ardından Tam Ekran'a tam ekran basın.
  2. Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
  3. Ağ sekmesini tıklayın.
  4. Uygulamayı yeniden yükleyin.

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

style-product.css&#39;nin önceden getirilmesini gösteren ağ paneli.

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

Önceden getirme önbelleğinden alınan style-product.css&#39;yi gösteren ağ paneli.

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