Prefetch (Ön Getirme) Nedir?
Kısa tanım
Prefetch, rel="prefetch" değerli bir link etiketiyle tarayıcıya kullanıcının büyük olasılıkla bir sonraki gezinmede ihtiyaç duyacağı bir kaynağı düşük öncelikle indirip HTTP önbelleğinde tutmasını öneren kaynak ipucudur. Mevcut sayfayı değil sonraki sayfayı hızlandırmayı amaçlar. Zorunlu bir istek değildir; tarayıcı ağ ve cihaz koşullarına göre ipucunu uygulamayabilir.
Diğer adları: rel=prefetch, link prefetch, ön getirme, kaynak ön getirme
Şimdiki sayfa için değil, sonraki adım için
Preload mevcut sayfanın acil ihtiyacını karşılar; prefetch ise geleceğe yatırımdır. Kullanıcının bir sonraki adımı tahmin edilebiliyorsa, o adımda gerekecek dosyalar tarayıcı boştayken indirilir ve kullanıcı geçiş yaptığında önbellekten gelir. Tipik örnek, sepet sayfasındaki kullanıcının büyük olasılıkla ödeme adımına geçecek olmasıdır:
<!-- Sepet sayfasında: ödeme adımının JavaScript paketi -->
<link rel="prefetch" href="/assets/odeme-adimi.js">Prefetch istekleri, fetch() ile yapılan düşük öncelikli isteklerden de geride sıralanır; mevcut sayfanın kaynaklarıyla yarışmaması amaçlanır. Yanıt diskteki HTTP önbelleğine yazılır. Bu yüzden Cache-Control başlığı no-store olan bir kaynak prefetch edilse bile işe yaramaz. Tarayıcı bu isteklere Sec-Purpose: prefetch başlığını ekler; sunucu tarafında gerçek ziyaretleri önceden getirme isteklerinden ayırmak için bu başlık kullanılabilir.
Bilinmesi gereken sınırlar
- Önbellek bölümlemesi: Modern tarayıcılar HTTP önbelleğini üst düzey siteye göre ayırır. Başka bir sitede kullanılacak bir dosyayı ya da farklı bir siteye gidecek belgeyi prefetch etmek bu yüzden çoğu durumda fayda sağlamaz. Prefetch'in doğal kullanım alanı aynı site içindeki gezinmelerdir.
- Tarayıcı desteği: MDN,
rel="prefetch"özelliğini sınırlı destekli olarak işaretler; Safari'de çalışmaz. Desteklemeyen tarayıcılar ipucunu sessizce yok sayar, sayfa bozulmaz. - DNS ön getirme farklıdır:
rel="dns-prefetch"yalnızca alan adını çözer, dosya indirmez. Bağlantıyı tam olarak hazırlamak için preconnect kullanılır.
Sayfalar için daha güçlü seçenek: Speculation Rules
Bütün bir HTML belgesini önceden getirmek için MDN, desteklendiği yerde Speculation Rules API'nin kullanılmasını önerir. Kurallar JSON olarak yazılır ve hangi bağlantıların ne zaman önceden getirileceğini tanımlar:
<script type="speculationrules">
{
"prefetch": [{
"where": { "href_matches": "/urunler/*" },
"eagerness": "moderate"
}]
}
</script>moderate ayarında masaüstünde imleç bir bağlantının üzerinde kısa bir süre durduğunda istek başlar. Aynı API, sayfayı görünmez bir sekmede tamamen hazırlayan prerender seçeneğini de sunar. Speculation Rules şu an Chrome ve Edge gibi Chromium tabanlı tarayıcılarda çalışır; diğerleri bu bloğu yok sayar.
Kazanç yerine yük olduğu durumlar
Her prefetch, kullanıcının kullanmayabileceği bir indirme demektir. Mobil veri tarifesindeki bir ziyaretçi için onlarca sayfayı önceden çekmek israftır ve sunucuya gereksiz yük bindirir. Kişiye özel ya da oturuma bağlı sayfaları önceden getirmek, istenmeyen yan etkiler de doğurabilir: örneğin sunucu tarafında sayılan sayfa görüntülemeleri ya da sepet durumunu değiştiren GET istekleri. Log dosyası analizi yapıyorsanız önceden getirme isteklerini ayrı değerlendirmek, ziyaret sayılarının şişmesini önler. En iyi sonuç, gerçekten yüksek olasılıklı birkaç geçişle sınırlı tutulan prefetch'ten gelir. Tekrar ziyaretlerde ise kalıcı hız için asıl iş tarayıcı önbelleğinin doğru ayarlanmasıdır.