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 kısa yükleme sürelerinin daha yüksek dönüşüm oranları ve daha iyi kullanıcı deneyimleri sağladığını göstermektedir. 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 ileride 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, 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 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 getirir, 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. İlk Bayt Süresi (TTFB), belge isteği ö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) 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 sayfasını indirmek için ağ süresi ortadan kalkacağından, stil sayfalarının önceden getirilmesi hem FCP hem de LCP'yi iyileştirebilir. Stil sayfaları oluşturmayı engellediğinden, önceden getirildiğinde LCP'yi azaltabilir. Bir 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'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, sayfanın Sonraki Boyamayla Etkileşim (INP) üzerinde etkili olabilir. İşaretlemenin istemcide JavaScript aracılığıyla oluşturulduğu durumlarda, kaynak yükü gecikmelerinin azaltılmasıyla LCP iyileştirilebilir ve bir sayfanın LCP öğesini içeren işaretlemenin 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 sayfada önceden getirilen yazı tipi kullanılıyorsa ve sayfanın LCP öğesi, web yazı tipi kullanan bir metin blokuysa bu öğenin LCP'si de daha hızlı olacaktır.

İsteğe bağlı JavaScript parçalarını önceden getirme

JavaScript paketlerinizi kodu bölmek, başlangıçta bir uygulamanın yalnızca bazı bölümlerini, geri kalanını da geç yüklemenizi sağlar. 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 kutusu 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 getirme 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 üst bilgileri 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.

Önceden getirme işlemini Link HTTP üst bilgisi aracılığıyla da başlatabilirsiniz:

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

HTTP Başlığında bir önceden getirme ipucu belirtmenin bir faydası, tarayıcının kaynak ipucunu bulmak için dokümanı ayrıştırmasına gerek olmaması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ği veya kullanacağı rotalar ya da işlevler için komut dosyalarını önceden getirmenizi 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" etkinliğinin gerçekleşmesini beklemek yerine, kullanıcı formu gönderene kadar önbellekte kullanılabilir olma olasılığını artırmak için kaynağı önceden getirebilirsiniz. Web paketi, import() içindeki sihirli yorumları kullanmanı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 önceden getirildiyse bu işlem mümkün olan en düşük öncelikte gerçekleştirilir. Bu nedenle, önceden getirilen kaynaklar mevcut sayfanın ihtiyaç duyduğu kaynaklar için bant genişliği için rekabet etmez.

Ayrıca, arka planda prefetch kullanan kitaplıklarla daha akıllı önceden getirme işlemi 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.

Gelişmiş seçenekten önceden getirme

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 yaklaşık beş dakika boyunca tutulur ve bu sürenin ardından kaynağa ait normal Cache-Control kuralları uygulanır.

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 ekstra 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 yapın.