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 oluştur'u 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 Düşük hız 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.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:
- 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 Düşük hız açılır listesinde 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 tutulacağı 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, 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.
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'yihref
özelliğinde iletir ve kaynağın HTMLdocument
olduğunuas
ö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:
- 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.
- Düşük hız açılır listesinde 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
üst bilgisiyle önceden getirme
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.js
dosyası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, 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.
- 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ınır ve yüklemesi yalnızca 12 ms sürer.