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

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 ilerledikleri ve daha sonra hangi sayfaları ziyaret edecekleri konusunda fikir sahibiyseniz, bu sayfalar için kaynakları önceden indirerek gelecekteki gezinmelerin yüklenme sürelerini iyileştirebilirsiniz.

Bu kılavuzda, önceden getirme işlemini kolay ve etkili bir şekilde uygulamanıza olanak tanıyan bir kaynak ipucu olan <link rel=prefetch> ile bunu nasıl başarabileceğiniz açıklanmaktadır.

rel=prefetch ile navigasyonu iyileştirin

Bir web sayfasına <link rel=prefetch> eklenmesi, tarayıcıya kullanıcının gelecekte ihtiyaç duyabileceği tüm sayfaları veya kaynakların bazılarını (komut dosyaları ya da CSS dosyaları gibi) indirmesini söyler:

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

prefetch ipucu hemen ihtiyaç duyulmayan kaynaklar için ekstra bayt tükettiğinden bu tekniğin dikkatlice uygulanması gerekir. yalnızca kullanıcıların ihtiyaç duyacağından eminseniz kaynakları önceden getirin. Kullanıcılar yavaş bağlantılara sahip olduğunda önceden getirme yapmamanız önerilir. Bu durumu 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. Ayrıca, bu gönderinin ilerleyen bölümlerinde açıklanmış, daha karmaşık yaklaşımların kullanıldığı kütüphaneler de var.

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 getirebilirsiniz. Bazı durumlarda, 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 durum, sayfayı önceden getirme için iyi bir aday haline gelir.

Not: eBay, gelecekteki sayfaların yüklenmesini hızlandırmak amacıyla bir arama sayfasındaki ilk beş sonuç için önceden getirme özelliğini uyguladı ve dönüşüm oranlarında olumlu bir etki elde etti.

Kaynakların önceden getirilmesi ek bant genişliği kullansa da çoğu performans metriğini iyileştirebilir. İlk Bayt'a Kadar Geçen Süre (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 sonraki zamana dayalı metrikler de genellikle daha düşük olacaktır.

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 getirin. Bu, özellikle söz konusu öğeler birden fazla sayfada paylaşıldığında faydalıdır.

Örneğin Netflix, kullanıcılar giriş yaptıktan sonra kullanılacak olan React'i önceden getirmek için kullanıcıların oturum kapalı olduğu sayfalarda geçirdiği süreden yararlanır. Bu sayede ilerideki gezinmeler için Etkileşime Hazır Olma Süresini% 30 azalttılar.

Bu yazının hazırlandığı sırada, önceden getirilen kaynakların farklı kaynaklardan sunulan sayfalar arasında paylaşılması mümkündür. Çift anahtarlı HTTP önbelleği gönderildiğinde, bu yalnızca üst düzey gezinmeler ve aynı kaynaklı alt kaynaklar için çalışır, ancak önceden getirilen alt kaynakların farklı kaynaklar arasında yeniden kullanılması mümkün olmaz. Bu durumda, a.com, b.com/library.js kaynağını önceden getirirse bu kaynak c.com önbelleğinde kullanılamaz. WebKit tabanlı olanlar gibi bazı tarayıcılar, tüm üçüncü taraf alanları için zaten bölümlendirme önbellekleri ve HTML5 depolama alanıdır.

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ı 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'in önceden getirilmesi, önceden getirilen komut dosyasının, gezinme sırasında ilk olarak ağ tarafından getirilmesine kıyasla çok daha erken işlenmesini 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.
• Geçerli sayfada kullanılmayan web yazı tiplerinin önceden getirilmesi, 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, metnin daha hızlı oluşturulması ve düzen kaymalarının ortadan kaldırılması sağlanı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 istenebilecek rotalara veya bileşenlere önceden getirme uygulayabilirsiniz.

Örneğin, emoji seçici içeren bir iletişim kutusu açan düğmenin yer aldığı bir sayfanız varsa bu sayfayı üç JavaScript parçasına (ana sayfa, iletişim kutusu ve seçici) bölebilirsiniz. Ana sayfa ve iletişim kutusu başlangıçta yüklenebilir, seçici ise 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 üst bilgileri ayarlamasına ve kaynağın zaten önbellekte olup olmadığını belirlemesine yardımcı olur. Bu özelliğe yönelik örnek değerler arasında şunlar yer alır: document, script, style, font, image ve diğerleri.

Ö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.

Not: prefetch, Safari dışındaki tüm modern tarayıcılarda desteklenir. Safari için XHR istekleri veya Getirme API'si ile bir yedek tekniği uygulayabilirsiniz.

Web paketi 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) });
});

"Gönderme"yi beklemek yerine etkinliği gerçekleştirmeniz gerekiyorsa bu kaynağı önceden getirerek kullanıcı formu gönderene kadar önbellekte bulunma olasılığını artırabilirsiniz. webpack, import() içindeki sihirli yorumların kullanılmasına 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 işlem, web paketine <link rel="prefetch"> etiketini HTML belgesine 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, anında sunulacağı için daha hızlı yanıt almayı bekleyebilirsiniz. Etkileşimin yapısına bağlı olarak bu, sayfanın INP'sine fayda sağlayabilir.

Genel olarak önceden getirme işlemi, genel kaynak önceliklendirmesini de hesaba katar. Bir kaynak önceden getirildiyse bu işlem mümkün olan en düşük öncelikte gerçekleştirilir. Dolayısıyla, önceden getirilen kaynaklar, mevcut sayfanın ihtiyaç duyduğu kaynakların bant genişliğiyle mücadele etmez.

Hızlı bağlantı ve Guess.js ile akıllı önceden getirme

Ayrıca, arka planda prefetch kullanan kitaplıklarla daha akıllı önceden getirme özelliğini de uygulayabilirsiniz:

• quicklink, Intersection Observer API'yi kullanarak bağlantıların görüntü alanına ne zaman geldiğini algılar ve boşta kalma süresinde bağlantılı kaynakları önceden getirir. Bonus: Quicklink'in ağırlığı 1 KB'tan az!
• Guess.js yalnızca kullanıcının ihtiyaç duyabileceği öğeleri akıllıca önceden getirmek için kullanılan tahmine dayalı bir model oluşturmak için analiz raporlarından yararlanır.

Bir kullanıcı yavaş bir ağdaysa veya Save-Data açıksa önceden getirmeyi önlemek için hem hızlı bağlantı hem de Guess.js Network Information API'yi kullanır.

Gelişmiş seçenekten önceden getirme

Kaynak ipuçları zorunlu talimatlar değildir ve 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 olan her kaynağı ister. Chrome'da, önceden getirme işlemi tamamlanmamışsa ve kullanıcı hedeflenen önceden getirme kaynağına giderse yayındaki yük, tarayıcı tarafından yapılan gezinme sırasında alınır (diğer tarayıcı tedarikçileri bunu farklı şekilde uygulayabilir).

Önceden getirme "En düşük" öncelik olarak adlandırılır. Böylece, önceden getirilen kaynaklar, geçerli 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ğinde veya bellek önbelleğinde (kaynağın önbelleğe alınabilir olup olmamasına bağlı olarak) depolanır. Ö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 kısaltabilir ve hatta sayfaların anında yüklenecek gibi görünmesini sağlayabilir. prefetch modern tarayıcılarda yaygın olarak desteklendiğinden, birçok kullanıcının gezinme deneyimini iyileştirmek için cazip bir tekniktir. Bu teknik, kullanılmayabilecek ekstra baytların yüklenmesini gerektirir. Bu nedenle bu tekniği kullanırken dikkatli olun. bunu yalnızca gerekli olduğunda ve ideal olarak da yalnızca hızlı ağlarda yapar.