rel=prefetch kaynak ipucu ve bu ipucunun nasıl kullanılacağı hakkında daha fazla bilgi edinin.
Araştırmalar, daha kısa yükleme sürelerinin daha yüksek dönüşüm oranları ve daha iyi kullanıcı deneyimi sağladığını gösteriyor. Kullanıcıların web sitenizde nasıl hareket ettiği ve daha sonra hangi sayfaları ziyaret edebilecekleriyle ilgili bilginiz varsa, bu sayfaların kaynaklarını önceden indirerek gelecekteki gezinmelerin yükleme sürelerini iyileştirebilirsiniz.
Bu kılavuzda, önceden getirme işlevini kolay ve etkili bir şekilde uygulamanızı sağlayan bir kaynak ipucu olan <link rel=prefetch> ile bunu nasıl gerçekleştirebileceğiniz açıklanmaktadır.
rel=prefetch ile gezinme deneyimini iyileştirin
Bir web sayfasına <link rel=prefetch> eklemek, tarayıcıya kullanıcının gelecekte ihtiyaç duyabileceği sayfaların tamamını veya bazı kaynakları (komut dosyaları veya CSS dosyaları gibi) indirmesini bildirir:
<link rel="prefetch" href="/articles/" as="document">
prefetch ipucu, hemen ihtiyaç duyulmayan kaynaklar için fazladan bayt tüketir. Bu nedenle, bu tekniğin dikkatli bir şekilde uygulanması gerekir. Kaynakları yalnızca kullanıcıların ihtiyaç duyacağından emin olduğunuzda önceden getirin. Kullanıcılar yavaş bağlantılara sahip olduğunda önceden getirme yapmayın. Bunu Network Information API ile tespit edebilirsiniz.
Hangi bağlantıların önceden getirileceğini belirlemenin farklı yolları vardır. En basit yöntem, geçerli sayfadaki ilk bağlantıyı veya ilk birkaç bağlantıyı önceden getirmektir. Bu gönderinin ilerleyen bölümlerinde açıklanacak olan, daha karmaşık yaklaşımlar kullanan kitaplıklar da vardır.
Kullanım alanları
Sonraki sayfaları önceden yükleme
Sonraki sayfalar tahmin edilebilir olduğunda HTML dokümanlarını önceden getirerek, bir bağlantı tıklandığında sayfa anında yüklenir.
Örneğin, bir ürün listeleme sayfasında, listedeki en popüler ürünün sayfasını önceden getirebilirsiniz. Bazı durumlarda, bir sonraki gezinmeyi tahmin etmek daha da kolaydır. Bir alışveriş sepeti sayfasında, bir kullanıcının ödeme sayfasını ziyaret etme olasılığı genellikle yüksektir, bu da onu önceden getirme için iyi bir aday haline getirir.
Kaynakların önceden yüklenmesi ek bant genişliği kullansa da çoğu performans metriğini iyileştirebilir. İlk Bayt Süresi (TTFB), belge isteği bir önbellek isabetiyle sonuçlandığından genellikle çok daha düşük olur. TTFB daha düşük olacağından, Largest Contentful Paint (LCP) ve First Contentful Paint (FCP) gibi sonraki zamana dayalı metrikler de genellikle daha düşük olur.
Statik öğeleri önceden yükleme
Kullanıcının ziyaret edebileceği sonraki bölümler tahmin edilebildiğinde komut dosyaları veya stil sayfaları gibi statik öğeleri önceden getirin. Bu, özellikle bu öğeler birçok sayfada paylaşıldığında yararlıdır.
Örneğin Netflix, kullanıcıların giriş yapmadıkları sayfalarda geçirdiği zamandan yararlanarak React'ın önceden getirilmesi ve giriş yapıldıktan sonra kullanılacak olan React'ın ön getirmesinden yararlanır. Bu sayede, gelecekteki navigasyon işlemlerinde Etkileşime Hazır Olma Süresini% 30 azalttılar.
Statik öğelerin önceden getirilmesinin performans metrikleri üzerindeki etkisi, önceden getirilen kaynağa bağlıdır:
- Resimlerin önceden yüklenmesi, LCP resim öğeleri için LCP sürelerini önemli ölçüde azaltabilir.
- Stil sayfasının önceden yüklenmesi, stil sayfasının indirileceği ağ süresi ortadan kaldırılacağından hem FCP hem de LCP'yi iyileştirebilir. Stil sayfaları oluşturma engelleyici olduğundan önceden getirildiğinde LCP'yi azaltabilir. Sonraki sayfanın LCP öğesinin
background-imageözelliği aracılığıyla istenen bir CSS arka plan resmi olduğu durumlarda, resim de önceden getirilen stil sayfasının bağımlı kaynağı olarak önceden getirilir. - JavaScript'in önceden yüklenmesi, önceden getirilen komut dosyasının, gezinme sırasında ağ tarafından ilk getirilmesi gerekene göre çok daha erken işlenmesini sağlar. Bu durum, İlk Giriş Gecikmesi (FID) ve Sonraki Boyamayla Etkileşim (INP) gibi duyarlılık metriklerini etkileyebilir. İşaretlemenin istemcide JavaScript aracılığıyla oluşturulduğu durumlarda, daha az kaynak yükü nedeniyle LCP iyileştirilebilir ve bir sayfanın LCP öğesini içeren işaretlemenin istemci tarafında oluşturulması daha kısa sürede yapılabilir.
- Geçerli sayfa tarafından halihazırda kullanılmayan web yazı tiplerinin önceden yüklenmesi düzen kaymalarını ortadan kaldırabilir.
font-display: swap;kullanıldığında, yazı tipi için değiştirme süresi ortadan kalkar. Böylece metin daha hızlı oluşturulur ve düzen kaymaları önlenir. Gelecekteki bir sayfada önceden getirilen yazı tipi kullanılıyorsa ve sayfanın LCP öğesi, web yazı tipini kullanan bir metin bloğuysa bu öğenin LCP'si de daha hızlı olur.
İsteğe bağlı JavaScript parçalarını önceden getirme
JavaScript paketleriniz için kod bölme, başlangıçta bir uygulamanın yalnızca bazı bölümlerini, geri kalanını ise geç yüklemenize olanak tanır. Bu tekniği kullanıyorsanız hemen gerekli olmayan ancak yakında istenecek olan rotalara veya bileşenlere önceden getirme uygulayabilirsiniz.
Örneğin, emoji seçici içeren bir iletişim kutusu açan düğme içeren bir sayfanız varsa bunu üç JavaScript parçasına bölebilirsiniz: ana sayfa, iletişim kutusu ve seçici. Ana sayfa ve iletişim kutusu ilk başta yüklenebilirken seçici isteğe bağlı olarak yüklenebilir. Webpack gibi araçlar, tarayıcıya bu isteğe bağlı parçaları önceden getirmesi için talimat vermenizi sağlar.
rel=prefetch nasıl uygulanır?
prefetch öğesini uygulamanın en basit yolu, dokümanın <head> öğesine bir <link> etiketi eklemektir:
<head>
...
<link rel="prefetch" href="/articles/" as="document">
...
</head>
as özelliği, 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 getirme işlemini Link HTTP üst bilgisi aracılığıyla da başlatabilirsiniz:
Link: </css/style.css>; rel=prefetch
HTTP Başlığında önceden getirme ipucu belirtmenin faydası, tarayıcının kaynak ipucunu bulmak için dokümanı ayrıştırmasının gerekmemesidir. Bu, bazı durumlarda küçük iyileştirmeler sağlayabilir.
Webpack sihirli yorumlarıyla JavaScript modüllerini önceden yükleme
webpack, kullanıcıların ziyaret edeceği veya kullanacağı, olası başka rotalar veya işlevler için komut dosyalarını önceden getirmenize olanak sağlar.
Aşağıdaki kod snippet'i, form tarafından gönderilecek bir sayı grubunu sıralamak için lodash kitaplığından bir sıralama işlevini geç yükler:
form.addEventListener("submit", e => {
e.preventDefault()
import('lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
Bu işlevi yüklemek için "submit" (gönderme) etkinliğinin gerçekleşmesini beklemek yerine, kullanıcı formu gönderirken kaynağın önbellekte bulunma olasılığını artırmak için bu kaynağı önceden getirebilirsiniz. webpack, import() içindeki sihirli yorumların kullanılmasını sağlar:
form.addEventListener("submit", e => {
e.preventDefault()
import(/* webpackPrefetch: true */ 'lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
Bu işlem, webpack'e <link rel="prefetch"> etiketini HTML dokümanına yerleştirmesini bildirir:
<link rel="prefetch" as="script" href="1.bundle.js">
İsteğe bağlı parçaları önceden getirmenin performans avantajları biraz farklıdır ancak genel anlamda, bu isteğe bağlı parçalara bağlı olan etkileşimlere daha hızlı yanıt almayı bekleyebilirsiniz. Çünkü bunlar anında kullanılabilir olacaktır. Etkileşimin yapısına bağlı olarak bu, sayfanın INP'sine bir avantaj sağlayabilir.
Genel olarak önceden getirme işlemi, genel kaynak önceliklendirmeyi de etkiler. Bir kaynak önceden getirildiğinde bu işlem mümkün olan en düşük öncelikte yapılır. Dolayısıyla, önceden getirilen kaynaklar, geçerli sayfanın ihtiyaç duyduğu kaynaklar için bant genişliğine uygun değildir.
Hızlı bağlantı ve Guess.js ile akıllı önceden getirme
Gelişmiş prefetch kullanan kitaplıklarla daha akıllı önceden getirme işlemi de uygulayabilirsiniz:
- quicklink, bağlantıların görüntü alanına girdiğini algılamak için Intersection Observer API'yi kullanır ve boşta kalma süresi sırasında bağlı kaynakları önceden getirir. Bonus: Hızlı bağlantının ağırlığı 1 KB'tan azdır!
- Guess.js, yalnızca kullanıcının ihtiyaç duyabileceği akıllı önceden getirme için kullanılan tahmine dayalı bir model oluşturmak için analiz raporlarını kullanır.
Hem hızlı bağlantı hem de Guess.js, kullanıcı yavaş bir ağdaysa veya Save-Data hizmetini etkinleştirirse önceden getirme işlemini önlemek için Network Information API'yi kullanır.
Gelişmiş önceden getirme
Kaynak ipuçları zorunlu talimatlar değildir ve bunların yürütülüp yürütülmeyeceğine ve ne zaman yürütüleceğine karar vermek tarayıcıya bağlıdır.
Önceden getirme özelliğini aynı sayfada birden çok kez kullanabilirsiniz. Tarayıcı tüm ipuçlarını sıraya alır ve boşta kaldığında her kaynağı ister. Chrome'da, bir önceden getirme işleminin yüklenmesi bitmediyse ve kullanıcı, hedeflenen önceden getirme kaynağına giderse, hazırlık aşamasındaki yük tarayıcı tarafından gezinme olarak alınır (diğer tarayıcı satıcıları bunu farklı bir şekilde uygulayabilir).
Önceden getirme "En düşük" öncelikte gerçekleştiğinden, önceden getirilen kaynaklar, geçerli sayfada gerekli olan kaynaklarla bant genişliği için rekabet etmez.
Önceden getirilen dosyalar, (kaynağın önbelleğe alınabilir olup olmamasına bağlı olarak) tarayıcıya göre değişen bir süre boyunca HTTP Önbelleğinde veya bellek önbelleğinde depolanır. Örneğin, Chrome'da kaynaklar beş dakika tutulur. Bu sürenin sonunda kaynağın normal Cache-Control kuralları uygulanır.
Sonuç
prefetch kullanmak, gelecekteki gezinmelerin yüklenme sürelerini önemli ölçüde kısaltabilir ve hatta sayfaların anında yükleniyormuş gibi görünmesini sağlayabilir. prefetch, modern tarayıcılarda yaygın olarak desteklenir ve bu nedenle birçok kullanıcının gezinme deneyimini iyileştirmek için cazip bir teknik sunar. Bu teknik, kullanılmayabilecek fazladan baytların yüklenmesini gerektirir. Bu nedenle, bu tekniği kullanırken dikkatli olun. Bu işlemi yalnızca gerekli olduğunda ve ideal olarak da yalnızca hızlı ağlarda yapın.