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

Yayınlanma tarihi: 12 Eylül 2019, Son güncelleme tarihi: 8 Şubat 2025

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 verimli bir şekilde uygulamanıza olanak tanıyan <link rel=prefetch> ile bunu nasıl başaracağınız açıklanmaktadır.

rel=prefetch ile site performansını artırma

Bir web sayfasına <link rel=prefetch> eklemek, tarayıcının kullanıcının ileride ihtiyaç duyabileceği bazı kaynakları (ör. komut dosyaları veya CSS dosyaları) indirmesini söyler:

<link rel="prefetch" href="/css/styles.css">

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.

Kullanım alanları

Ön getirme, kaynakları önceden indirerek web sayfalarını hızlandırmak için birçok kullanım alanına sahiptir.

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.

Dikkat: Spekülasyon Kuralları API'si, bu API'yi destekleyen tarayıcılarda gezinme ön getirme işlemi için ön getirmeye kıyasla çeşitli avantajlar sunar. Bu avantajlar arasında önbelleğe alınamayan gezinmelerin işlenmesi ve tutarlı kaynakta çapraz ön getirme işlenmesi yer alır.

Ö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 besleme için iyi bir aday yapar.

Not: eBay, gelecekteki sayfa yüklemelerini hızlandırmak için bir arama sayfasındaki ilk beş sonuç için önceden getirme özelliğini uyguladı ve dönüşüm oranlarında olumlu bir etki gördü.

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çtıktan sonra kullanacağı React'i önceden almak için kullanıcıların oturum kapalıyken geçirdiği zamandan yararlanır. Bu sayede gelecekteki gezinmelerde etkileşime hazır olma süresini% 30 azalttılar.

Bu makalenin yazıldığı sırada, önceden getirilmiş kaynakları farklı kaynaklardan sunulan sayfalar arasında paylaşmak mümkün. Çift anahtarlı HTTP önbelleği kullanıma sunulduğunda bu özellik yalnızca üst düzey gezinmeler ve aynı kaynaktaki alt kaynaklar için çalışır ancak önceden getirilen alt kaynakları farklı kaynaklar arasında yeniden kullanmak mümkün olmaz. Bu, a.com kaynağı b.com/library.js önceden alırsa kaynağın c.com önbelleği kullanılamayacağı anlamına gelir. WebKit tabanlı tarayıcılar gibi bazı tarayıcılar, tüm üçüncü taraf alanları için önbellekleri ve HTML5 depolama alanını bölümlendirir.

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'yi hem de LCP'yi iyileştirebilir. Stil sayfaları oluşturma işlemini engellediğinden, önceden getirildiğinde LCP'yi azaltabilir. Sonraki sayfanın LCP öğesinin background-image mülkü kullanılarak 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 önceden 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 JavaScript kullanılarak istemcide 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="//css/styles.css">
  ...
</head>

Ön getirme işlemini Link HTTP üst bilgisi ile de 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.

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

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'a <link rel="prefetch"> etiketini HTML dokümanına yerleştirmesini söyler:

<link rel="prefetch" 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 isteğe bağlı 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. Böylece, önceden getirilen kaynaklar mevcut sayfanın ihtiyaç duyduğu kaynaklar için bant genişliği için rekabet etmez.

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

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 küçüktür.
• 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 getirme işleminin 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.

Ön getirilen dosyalar, kaynak önbelleğe alınabilir durumdaysa HTTP önbelleği içinde depolanır. Aksi takdirde, dosyalar atılır ve kullanılmaz.

Sonuç

prefetch kullanmak, gelecekte ihtiyaç duyulacak kaynakları önceden indirerek sitenin web performansını büyük ölçüde artırabilir. prefetch, çoğu modern tarayıcıda desteklenir. 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.