Kaynakları önceden getirme, sayfa yükleme sürelerini hızlandırır ve işletme metriklerini iyileştirir.
Ön getirme, yakın gelecekte ihtiyaç duyulması muhtemel kaynakları (hatta sayfaların tamamını) indirerek sayfa yükleme hızını artırmak için kullanılan bir tekniktir. 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.
Brezilya'nın en büyük içerik portallarından biri olan Terra, eğlence, haber ve spor içerikleri sunar ve aylık 63 milyondan fazla tekil ziyaretçiye sahiptir. Terra'nın web sitesinin belirli bölümlerinde ön getirme teknikleri kullanarak makalelerin yükleme süresini iyileştirmek için Terra'nın mühendislik ekibiyle birlikte çalıştık.
Bu örnek olayda, Terra'nın yolculuğu uygulama süreci açıklanmaktadır. Bu süreç, mobil cihazlarda% 11 reklam tıklama oranı (TO) artışı, masaüstünde% 30 reklam TO'su ve Largest Contentful Paint (LCP) sürelerinde% 50 azalma sağlamıştır.
Ön getirme stratejisi
Önceden getirme özelliği bir süredir kullanılıyor olsa da acil olarak gerekli olmayan kaynaklar için fazladan bant genişliği kullandığından dikkatli kullanılması önemlidir. Gereksiz veri kullanımını önlemek için bu teknik dikkatli bir şekilde uygulanmalıdır. Terra'da, aşağıdaki koşullar karşılanırsa makaleler önceden getirilir:
- Önceden getirilmek istenen makalelerin bağlantılarının görünürlüğü: Terra, önceden getirmek istediği makaleleri içeren bölümün görüntülenebilirliğini tespit etmek için Intersection Observer API'yi kullandı.
- Veri kullanımının artması için uygun koşullar: Daha önce de belirtildiği gibi ön getirme, ek veri tüketen spekülatif bir performans iyileştirmesidir ve her durumda istenilen bir sonuç olmayabilir. Terra, bant genişliği israfını azaltmak için bir sonraki makalenin getirilip getirilmeyeceğini belirlemek üzere Cihaz Belleği API ile birlikte Ağ Bilgileri API'yi kullanır. Terra, yalnızca aşağıdaki durumlarda sonraki makaleyi getirir:
- Bağlantı hızı en az 3G olmalıdır ve cihazda en az 4 GB bellek bulunmalıdır.
- veya cihazda iOS yüklüyse
- CPU boşta: Son olarak Terra,
requestIdleCallback
kullanarak CPU'nun boşta olup olmadığını ve ek iş yapıp yapamayacağını kontrol eder. Bu işlev, ana iş parçacığı boştayken veya belirli bir (isteğe bağlı) son tarihte (hangisi önce gelirse) işlenecek bir geri çağırma alır.
Bu koşullara uymak, Terra'nın yalnızca gerektiğinde veri getirmesini sağlar. Bu da bant genişliği ve pil ömründen tasarruf sağlar ve kullanılmayan ön getirme işlemlerinin etkisini en aza indirir.
Bu koşullar karşılandığında Terra, aşağıdaki mavi renkle vurgulanan "İlgili İçerik" ve "Sizin için önerilenler" bölümlerindeki makaleleri önceden getirir.
İşletme Etkisi
Terra, bu tekniğin etkisini ölçmek için bu özelliği ilk olarak makale sayfasının "İlgili içerik" bölümünde kullanıma sundu. UTM kodu, karşılaştırma amacıyla önceden getirilen ve önceden getirilmeyen makaleleri ayırt etmelerine yardımcı oldu. İki haftalık başarılı bir A/B testinden sonra Terra, ön getirme işlevini "Sizin için önerilenler" bölümüne eklemeye karar verdi.
Makalelerin önceden getirilmesi sonucunda, reklam metriklerinde genel bir artış ve LCP ile ilk bayta geçiş süresinde (TTFB) azalma gözlemlendi:
Dikkatli bir şekilde kullanıldığında ön getirme, sayfa yükleme süresini büyük ölçüde iyileştirir, reklam metriklerini artırır ve LCP süresini azaltır.
Teknik ayrıntılar
Ön getirme işlemi, rel=prefetch
veya rel=preload
gibi kaynak ipuçları, quicklink veya Guess.js gibi kitaplıklar ya da daha yeni Speculation Rules API kullanılarak yapılabilir. Terra, Intersection Observer örneğiyle birlikte düşük öncelikli fetch API'yi kullanarak bunu uygulamayı tercih etti. Terra, henüz rel=prefetch
veya Speculation Rules API gibi diğer ön besleme yöntemlerini desteklemeyen Safari'yi desteklemesine olanak tanıdığı ve Terra'nın ihtiyaçları için tam özellikli bir JavaScript kitaplığının gerekli olmadığı 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)
})
prefetch
işlevi, ön getirme işlemini başlatmadan önce minimum bağlantı kalitesini ve cihaz belleğini kontrol eder.- Ardından, öğelerin görüntüleme alanında ne zaman göründüğünü izlemek için bir
IntersectionObserver
kullanır ve ardından ön besleme için URL'leri bir listeye ekler. - Ön getirme işlemi, ana iş parçacığı boştayken
prefetch
işlevinin yürütülmesini hedeflemek içinrequestIdleCallback
ile planlanır.
Sonuç
Dikkatli bir şekilde kullanıldığında ön getirme, gelecekteki gezinme isteklerinin yükleme sürelerini önemli ölçüde azaltarak kullanıcı yolculuğundaki sürtünmeyi azaltır ve etkileşimi artırır. Ön getirme, kullanılamayacak ekstra baytların yüklenmesine neden olur. Bu nedenle Terra, yalnızca iyi ağ koşullarında ve bu bilgilerin kullanılabildiği uygun cihazlarda ön getirme yapmak için ek adımlar attı.
Bu çalışmaya katkıda bulunan Gilberto Cocchi, Harry Theodoulou, Miguel Carlos Martínez Díaz, Barry Pollard, Jeremy Wagner ve Terra'nın Mühendislik Ekibi'nden Leonardo Bellini ile Lucca Paradeda'ya özel teşekkürler.