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:
- Projeyi düzenlenebilir hale getirmek için Düzenlemek için Remiks'i tıklayın.
- Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a
basın. - Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.
Ağ sekmesini tıklayın.
Yavaş bir bağlantı türünü simüle etmek için Veri Sınırlaması açılır listesinde Hızlı 3G'yi seçin.
Ü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:
<link rel="prefetch"> ile ürün sayfasını önceden getirme
Gezinmeyi iyileştirmek için product-details.html sayfasını önceden almak üzere açılış sayfasına bir prefetch etiketi ekleyin:
views/index.htmldosyası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.
Önceden getirmenin çalıştığını doğrulamak için:
- Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a basın.
- Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.
Ağ sekmesini tıklayın.
Yavaş bağlantı türünü simüle etmek için Throttling açılır listesinden Hızlı 3G'yi seçin.
Önbelleği devre dışı bırak onay kutusunun işaretini kaldırın.
Uygulamayı yeniden yükleyin.
Açılış sayfası yüklendiğinde product-details.html sayfası da yüklenir ancak en düşük önceliğe sahiptir:
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 tutulduğu anlamına gelir.
Performansı yeniden değerlendirme
- Uygulamayı yeniden yükleyin.
- Ü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ğ 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, dokümanın yüklenme süresi yaklaşık 10 ms olarak gösterilir.
Bu, yaklaşık 600 ms süren önceki sürüme kıyasla yaklaşık% 98 azalmaya karşılık geliyor.
Ek kredi: prefetch'ü aşamalı geliştirme olarak kullanma
Önceden getirme özelliğinin, hızlı bağlantılara göz atan kullanıcılar için progresif bir geliştirme olarak uygulanması en iyi uygulamadır. Önceden getirme etiketlerini dinamik olarak yerleştirilen ağ koşullarını kontrol etmek için Network Information API'yi kullanabilirsiniz. Bu şekilde, veri tüketimini en aza indirebilir ve yavaş ya da pahalı veri planlarını kullanan kullanıcılarınız için maliyetlerden tasarruf edebilirsiniz.
Uyarlanabilir önceden getirme özelliğini uygulamak için önce <link rel="prefetch"> etiketini views/index.html cihazından 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
prefetchiçeren bir<link>etiketi oluşturur, önceden getirilecek URL'yihrefözelliğinde iletir ve kaynağın HTMLdocumentolduğunuasözelliğinde belirtir. - Son olarak, komut dosyasını sayfanın
headbö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 öğesini yalnızca hızlı bağlantılarda önceden getiriyor. Şunları doğrulamak için:
- Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a basın.
- Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.
- Ağ sekmesini tıklayın.
- Throttling açılır listesinden Online'ı seçin.
- Uygulamayı yeniden yükleyin.
Ağ panelinde product-details.html simgesini görürsünüz:
Ürün sayfasının yavaş bağlantılarda önceden getirilmediğini doğrulamak için:
- Yavaşlatma açılır listesinde Yavaş 3G'yi seçin.
- Uygulamayı yeniden yükleyin.
Ağ panelinde, yalnızca açılış sayfasının product-details.html içermeyen kaynakları yer almalıdır:
Ürün sayfasının stil sayfasını HTTP Link başlığıyla önceden getirin
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:
server.jsdosyasını açın ve kök URL'nin (/)get()işleyicisini bulun.- İş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');
});
- Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran
düğmesine basın.
- Geliştirici Araçları'nı açmak için "Control+Üst Karakter+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
- Ağ sekmesini tıklayın.
- Uygulamayı yeniden yükleyin.
style-product.css, açılış sayfası yüklendikten sonra artık en düşük öncelikte önceden getirilir:
Ürün sayfasına gitmek için Şimdi satın al'ı tıklayın. Ağ paneline göz atın:
style-product.css dosyası "ön alma önbelleği"nden alındı ve dosyanın yüklenmesi yalnızca 12 ms sürdü.