Gelecekteki gezinmeleri hızlandırmak için kaynakları önceden yükleme

rel=prefetch kaynak ipucu ve nasıl kullanılacağı hakkında bilgi edinin.

Demián Renzulli
Demián Renzulli
X GitHub Arıza
Jeremy Wagner

Araştırmalar, daha hızlı yükleme sürelerinin daha yüksek dönüşüm oranlarına ve daha iyi kullanıcı deneyimlerine yol açtığını gösteriyor. Kullanıcıların web sitenizde nasıl gezindiği ve muhtemelen hangi sayfaları ziyaret edeceği hakkında bilginiz varsa bu sayfaların kaynaklarını önceden indirerek gelecekteki gezinme işlemlerinin yükleme sürelerini iyileştirebilirsiniz.

Bu kılavuzda, ön getirmeyi kolay ve verimli bir şekilde uygulamanızı sağlayan bir kaynak ipucu olan <link rel=prefetch> ile bunu nasıl yapacağınız açıklanmaktadır.

rel=prefetch ile gezinmeyi iyileştirin

Bir web sayfasına <link rel=prefetch> eklendiğinde tarayıcı, sayfaların tamamını veya kullanıcının gelecekte ihtiyaç duyabileceği kaynakların (ör. komut dosyaları veya CSS dosyaları) bir kısmını indirir:

<link rel="prefetch" href="/articles/" as="document">

Bağlantı ön getirmenin işleyiş şeklini gösteren bir şema.

prefetch ipucu, anında 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 alın. Kullanıcıların bağlantısı yavaşsa ön getirme işlemini yapmamayı düşünebilirsiniz. Bunu Network Information API ile algılayabilirsiniz.

Hangi bağlantıların önceden belleneceğini belirlemenin farklı yolları vardır. En basit yöntem, mevcut sayfadaki ilk bağlantıyı veya ilk birkaç bağlantıyı önceden almaktır. Daha karmaşık yaklaşımlar kullanan kütüphaneler de vardır. Bu kütüphaneler hakkında daha fazla bilgiyi bu makalenin ilerleyen bölümlerinde bulabilirsiniz.

Kullanım alanları

Sonraki sayfaları önceden getirme

Sonraki sayfalar tahmin edilebilir olduğunda HTML dokümanlarını önceden getirme. Böylece, 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 alabilirsiniz. Bazı durumlarda, bir sonraki gezinme işleminin tahmin edilmesi daha da kolaydır. Örneğin, bir alışveriş sepeti sayfasında kullanıcının ödeme sayfasını ziyaret etme olasılığı genellikle yüksektir. Bu da sayfayı ön beslemeye uygun bir aday yapar.

Kaynakları önceden getirme işlemi ek bant genişliği kullansa da çoğu performans metriğini iyileştirebilir. Belge isteği bir önbelleğe isabetle sonuçlandığından ilk bayta geçiş süresi (TTFB) genellikle çok daha düşük olur. TTFB daha düşük olacağından, Largest Contentful Paint (LCP) ve First Contentful Paint (FCP) dahil olmak üzere zamana dayalı sonraki metrikler de genellikle daha düşük olur.

Statik öğeleri önceden getirme

Kullanıcının ziyaret edebileceği sonraki bölümler tahmin edilebildiğinde komut dosyaları veya stil sayfaları gibi statik öğeleri önceden getirme. Bu, özellikle bu öğeler birçok sayfada paylaşıldığında kullanışlıdır.

Örneğin Netflix, kullanıcıların oturum açmamış sayfalarda geçirdiği zamandan yararlanarak kullanıcılar giriş yaptıktan sonra kullanılacak React'i önceden yükler. Bu sayede gelecekteki gezinmelerde etkileşime hazır olma süresini% 30 azalttılar.

Statik öğelerin önceden getirilmesi işleminin performans metrikleri üzerindeki etkisi, önceden getirilen kaynağa bağlıdır:

  • Resimleri önceden getirme, LCP resim öğeleri için LCP sürelerini önemli ölçüde düşürebilir.
  • Stil sayfalarını önceden getirme, stil sayfasını indirmek için gereken ağ süresinin ortadan kaldırılması nedeniyle hem FCP hem de LCP'yi iyileştirebilir. Stil sayfaları oluşturmayı engellediğinden, önceden getirildiklerinde LCP'yi azaltabilirler. Sonraki sayfanın LCP öğesinin background-image mülkü aracılığıyla istenen bir CSS arka plan resmi olduğu durumlarda, resim önceden getirilen stil sayfasının bağımlı kaynağı olarak da önceden getirilir.
  • JavaScript'i önceden getirme, önceden getirilen komut dosyasının işlenmesinin, gezinme sırasında ağ tarafından önce getirilmesi gerekmesine kıyasla çok daha erken gerçekleşmesini sağlar. Bu durum, sayfanın Interaction to Next Paint (INP) metriğini etkileyebilir. İşaretçinin istemcide JavaScript aracılığıyla oluşturulduğu durumlarda, kaynak yükleme gecikmeleri azaltılarak LCP iyileştirilebilir ve sayfanın LCP öğesini içeren işaretçinin istemci tarafında oluşturulması daha erken gerçekleşebilir.
  • Mevcut sayfa tarafından kullanılmayan web yazı tiplerini önceden getirme, düzen kaymalarını ortadan kaldırabilir. font-display: swap;'un kullanıldığı durumlarda, yazı tipi için takas süresi ortadan kaldırılır. Bu sayede metin daha hızlı oluşturulur ve düzen kaymaları ortadan kaldırılır. Gelecekteki bir sayfa önceden getirilen yazı tipini kullanıyorsa ve sayfanın LCP öğesi bir web yazı tipi 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 paketlerinizi kod bölme, uygulamanın başlangıçta yalnızca bir kısmını yüklemenize ve geri kalanını ise yavaş yüklemenize olanak tanır. Bu tekniği kullanıyorsanız hemen gerekli olmayan ancak yakında istenme olasılığı yüksek olan rotalara veya bileşenlere ön getirme işlemi uygulayabilirsiniz.

Örneğin, emoji seçici içeren bir iletişim kutusunu açan bir düğme içeren bir sayfanız varsa bu sayfayı ana sayfa, iletişim kutusu ve seçici olmak üzere üç JavaScript parçasına ayırabilirsiniz. Ana sayfa ve iletişim kutusu başlangıçta yüklenirken seçici isteğe bağlı olarak yüklenebilir. Webpack gibi araçlar, tarayıcıya bu isteğe bağlı parçaları önceden yüklemesini talimat vermenize olanak tanır.

rel=prefetch nasıl uygulanır?

prefetch'ü uygulamanın en basit yolu, dokümanın <head> bölümüne bir <link> etiketi eklemektir:

<head>
  ...
  <link rel="prefetch" href="/articles/" as="document">
  ...
</head>

as özelliği, tarayıcının doğru üstbilgileri ayarlamasına ve kaynağın ö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.

Ön beslemeyi Link HTTP üst bilgisi aracılığıyla da başlatabilirsiniz:

Link: </css/style.css>; rel=prefetch

HTTP üstbilgisinde önceden getirme ipucu belirtmenin bir avantajı, tarayıcının kaynak ipucunu bulmak için dokümanı ayrıştırmak zorunda kalmamasıdır. Bu da bazı durumlarda küçük iyileştirmeler sağlayabilir.

Webpack sihirli yorumlarıyla JavaScript modüllerini önceden getirme

webpack, kullanıcıların yakında ziyaret edeceğinden veya kullanacağından emin olduğunuz rotalar ya da işlevler için komut dosyalarını önceden getirmenize olanak tanır.

Aşağıdaki kod snippet'i, bir form tarafından gönderilecek bir sayı grubunu sıralamak için lodash kitaplığından bir sıralama işlevini yavaşça yükler:

form.addEventListener("submit", e => {
  e.preventDefault()
  import('lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

Bu işlevin yüklenmesi için "gönder" etkinliğinin gerçekleşmesini beklemek yerine, kullanıcı formu gönderene kadar ön prefetch yaparak bu kaynağın önbellekte bulunma olasılığını artırabilirsiniz. webpack, import() içinde sihirli yorumlar kullanarak bunu yapmanıza olanak tanır:

form.addEventListener("submit", e => {
   e.preventDefault()
   import(/* webpackPrefetch: true */ 'lodash.sortby')
         .then(module => module.default)
         .then(sortInput())
         .catch(err => { alert(err) });
});

Bu, webpack'e <link rel="prefetch"> etiketini HTML dokümanına yerleştirmesini söyler:

<link rel="prefetch" as="script" href="1.bundle.js">

İsteğe bağlı parçaları önceden getirmenin performans avantajları biraz ayrıntılıdır ancak genel olarak, bu isteğe bağlı parçalar hemen kullanılabileceğinden, bu parçalara bağlı etkileşimlere daha hızlı yanıtlar alabilirsiniz. Etkileşimin türüne bağlı olarak bu, sayfanın INP'sine fayda sağlayabilir.

Ön getirme genel olarak genel kaynak önceliklendirmesinde de dikkate alınır. Bir kaynak ön getirilirken mümkün olan en düşük öncelik kullanılır. Bu nedenle, önceden getirilen kaynaklar mevcut sayfanın ihtiyaç duyduğu kaynaklar için bant genişliği için rekabet etmez.

Ayrıca, prefetch kullanan kitaplıklarda daha akıllı ön getirme de uygulayabilirsiniz:

  • quicklink, bağlantıların görüntü alanına ne zaman geldiğini algılamak için Intersection Observer API'yi kullanır ve boş zaman sırasında bağlı kaynakları önceden getirir. Bonus: Hızlı bağlantı 1 KB'tan daha az yer kaplar.
  • Guess.js, yalnızca kullanıcının ihtiyaç duyması muhtemel öğeleri akıllıca önceden almak için kullanılan bir tahmin modeli oluşturmak amacıyla analiz raporlarını kullanır.

Hem hızlı bağlantı hem de Guess.js, kullanıcının yavaş bir ağda olması veya Save-Data'ın etkin olması durumunda ön getirme işlemini önlemek için Ağ Bilgileri API'sini kullanır.

Ön getirmenin işleyiş şekli

Kaynak ipuçları zorunlu talimatlar değildir ve bunların çalışıp çalışmayacağı ve ne zaman çalıştırılacağı tarayıcıya bağlıdır.

Önceden getirmeyi aynı sayfada birden çok kez kullanabilirsiniz. Tarayıcı, tüm ipuçlarını sıraya ekler ve boş olduğunda her kaynağı ister. Chrome'da, bir ön yükleme tamamlanmamışsa ve kullanıcı, hedef ön yükleme kaynağına giderse tarayıcı, gezinme olarak uçuştaki yüklemeyi alır (diğer tarayıcı tedarikçileri bunu farklı şekilde uygulayabilir).

Önceden getirme işlemi "En düşük" öncelikte gerçekleşir. Bu nedenle, önceden getirilen kaynaklar mevcut sayfada gereken kaynaklarla bant genişliği için rekabet etmez.

Önceden getirilen dosyalar, tarayıcılara göre değişen bir süre boyunca HTTP önbelleği veya bellek önbelleği'nde depolanır (kaynağın önbelleğe alınabilir olup olmadığına bağlı olarak). Örneğin, Chrome'da kaynaklar beş dakika boyunca tutulur. Bu sürenin ardından kaynak için normal Cache-Control kuralları geçerli olur.

Sonuç

prefetch kullanmak, gelecekteki gezinmelerin yüklenme sürelerini büyük ölçüde iyileştirebilir ve hatta sayfaların anında yükleniyormuş gibi görünmesini sağlayabilir. prefetch, modern tarayıcılarda yaygın olarak desteklenir. Bu da birçok kullanıcının gezinme deneyimini iyileştirmek için cazip bir teknik haline getirir. Bu teknik, kullanılmayabilecek ek baytların yüklenmesini gerektirir. Bu nedenle, bu tekniği kullanırken dikkatli olun. Yalnızca gerektiğinde ve ideal olarak yalnızca hızlı ağlarda kullanın.