Kaynakların önceden yüklenmesi, sayfa yüklenme sürelerini kısaltır ve işletme metriklerini iyileştirir.
Önceden getirme, yakın gelecekte gerekli olması muhtemel kaynakları (hatta sayfaların tamamını) indirerek sayfa yüklemeyi hızlandırmak için kullanılan bir tekniktir. Araştırmalar, daha kısa yükleme sürelerinin daha yüksek dönüşüm oranları ve daha iyi kullanıcı deneyimi sağladığını göstermiştir.
Brezilya'nın en büyük içerik portallarından biri olan Terra, ayda 63 milyondan fazla tekil ziyaretçiyle eğlence, haber ve spor etkinlikleri sunuyor. Web sitelerinin belirli bölümlerinde önceden getirme tekniklerini kullanarak makalelerin yüklenme süresini iyileştirmek için Terra'nın mühendislik ekibiyle işbirliği yaptık.
Bu örnek olayda, Terra'nın yolculuğu anlatılmıştır. Bu uygulama, mobil cihazlarda% 11 reklam tıklama oranı (TO) artışı, masaüstünde% 30 reklam TO'su ve Largest Contentful Paint (LCP) zamanlarında% 50 azalma sağlar.
Önceden getirme stratejisi
Önceden getirme bir süredir kullanılıyor ancak hemen gerekli olmayan kaynaklar için fazladan bant genişliği tükettiğinden dikkatli şekilde kullanılması önemlidir. Gereksiz veri kullanımından kaçınmak için bu teknik dikkatli bir şekilde uygulanmalıdır. Terra söz konusu olduğunda, aşağıdaki koşullar karşılanırsa makaleler önceden getirilir:
- Önceden getirilen makalelere yönelik bağlantıların görünürlüğü: Terra, önceden getirmek istediği makaleleri içeren bölümün görüntülenebilirliğini algılamak için Intersection Observer API'sini kullandı.
- Veri kullanımının artması için elverişli koşullar: Daha önce belirtildiği gibi, önceden getirme, fazladan veri tüketen spekülatif bir performans iyileştirmesidir ve her durumda istenen bir sonuç olmayabilir. Terra, bant genişliğini boşa harcama olasılığını azaltmak amacıyla bir sonraki makalenin getirilip getirilmeyeceğini belirlemek için Device Memory API ile birlikte Network Information API'yi kullanıyor. Terra yalnızca aşağıdaki durumlarda sonraki makaleyi getirir:
- Bağlantı hızı en az 3G olmalı ve cihazın belleği en az 4 GB olmalıdır.
- veya cihaz iOS çalıştırıyorsa.
- CPU boşta: Son olarak Terra,
requestIdleCallbackkullanarak CPU'nun boşta olup olmadığını ve ek bir işlem yapıp yapamayacağını kontrol eder.requestIdleCallbackana iş parçacığı boşta olduğunda geri çağırma işlemini gerçekleştirir veya belirli (isteğe bağlı) bir son tarihe (hangisi önce gelirse) geçer.
Bu koşullara uymak Terra'nın yalnızca gerektiğinde veri getirmesini sağlayarak bant genişliği ve pil ömründen tasarruf etmesinin yanı sıra, kullanılmayan önceden yüklemelerin etkisini de en aza indiriyor.
Bu koşullar karşılandığında Terra, aşağıda mavi renkle vurgulanmış "İlgili İçerik" ve "Sizin için önerilenler" bölümlerinde bulunan makaleleri önceden getirir.
İşletme Etkisi
Terra, bu tekniğin etkisini ölçmek için ilk olarak makale sayfasının "İlgili içerik" bölümünde bu özelliği kullanıma sundu. UTM kodu, karşılaştırma amacıyla önceden getirilen ve önceden getirilmemiş makaleler arasında ayrım yapmalarına yardımcı oldu. İki haftalık başarılı A/B testinin ardından Terra, önceden getirme işlevini "Sizin için önerilenler" bölümüne eklemeye karar verdi.
Makalelerin önceden getirilmesinin sonucunda, reklam metriklerinde genel bir artış ve LCP ile İlk Bayt Süresi (TTFB) sürelerinde düşüş gözlemlenmiştir:
Önceden getirme (dikkatli bir şekilde kullanıldığında) sayfa yüklenme süresini büyük ölçüde iyileştirir, reklam metriklerini artırır ve LCP süresini kısaltır.
Teknik ayrıntılar
Önceden getirme, rel=prefetch veya rel=preload gibi kaynak ipuçlarının, quicklink veya Guess.js gibi kitaplıklar aracılığıyla ya da yeni Speculation Rules API'nin kullanılmasıyla gerçekleştirilebilir. Terra, bu yöntemin bir Intersection Observer örneğiyle birlikte düşük öncelikli fetch API'yi kullanarak uygulanmasını tercih etti. Terra, rel=prefetch veya Speculation Rules API gibi diğer önceden getirme yöntemlerini henüz desteklemeyen Safari'yi desteklemesine olanak tanıdığı ve Terra'nın ihtiyaçları için tam özellikli bir JavaScript kitaplığına ihtiyaç duymadığı için bu seçimi yaptı.
Aşağıdaki JavaScript, Terra tarafından kullanılan koda yaklaşık olarak eşdeğerdir:
function prefetch(nodeLists) {
// Exclude slow ECTs < 3g
if (navigator.connection &&
(navigator.connection.effectiveType === 'slow-2g'
|| navigator.connection.effectiveType === '2g')
) {
return;
}
// Exclude low end device which is device with memory <= 2GB
if (navigator.deviceMemory && navigator.deviceMemory <= 2) {
return;
}
const fetchLinkList = {};
const observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
if (!fetchLinkList[entry.target.href]) {
fetchLinkList[entry.target.href] = true;
fetch(entry.target, {
priority: 'low'
});
}
observer.unobserve(entry = entry.target);
}
});
});
}
const idleCallback = window.requestIdleCallback || function (cb) {
let start = Date.now();
return setTimeout(function () {
cb({
didTimeout: false,
timeRemaining: function () {
return Math.max(0, 50 - (Date.now() - start));
}
});
}, 1);
}
idleCallback(function () {
prefetch(nodeLists)
})
prefetchişlevi, önceden getirme işlemini başlatmadan önce minimum bağlantı kalitesi ve cihaz belleğini kontrol eder.- Ardından, öğelerin görüntü alanında ne zaman görünür olduğunu izlemek için bir
IntersectionObserverkullanır ve ardından, önceden getirme için URL'leri bir listeye ekler. - Önceden getirme süreci
requestIdleCallbackile planlanmıştır. Burada ana iş parçacığı boştaykenprefetchişlevi yürütülecektir.
Sonuç
Dikkatli kullanıldığında önceden getirme, gelecekteki gezinme istekleri için yükleme sürelerini önemli ölçüde kısaltarak kullanıcı yolculuğundaki sorunları azaltabilir ve etkileşimi artırabilir. Önceden yükleme, kullanılmayan baytların yüklenmesine neden olur. Bu yüzden Terra, yalnızca iyi ağ koşullarında ve bu bilginin mevcut olduğu uygun cihazlarda ön getirme için ek adımlar attı.
Bu çalışmaya yaptıkları katkılar için Terra'nın Mühendislik ekibinden Gilberto Cocchi, Harry Theodoulou, Miguel Carlos Martínez Díaz, Barry Pollard, Jeremy Wagner ve Leonardo Bellini ile Lucca Paradeda'ya teşekkür ederiz.