Önceden getirme özelliğinin, Terra'nın reklam tıklama oranını% 30 artırmasına ve Largest Contentful Paint'i hızlandırmasına nasıl yardımcı olduğunu öğrenin.

Kaynakları önceden getirme, sayfa yükleme sürelerini hızlandırır ve işletme metriklerini iyileştirir.

Guilherme Moser de Souza
Guilherme Moser de Souza

Ö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ç, mobilde% 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 bu özelliği dikkatli bir şekilde kullanmanız ö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 ve her durumda istenmeyen bir sonuç olabilecek spekülatif bir performans iyileştirmesidir. 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.

Terra web sitesindeki bağlantıların önceden getirildiği iki bölümün ekran görüntüsü. Sol tarafta "İlgili içerik" bölümü, sağ tarafta ise "Sizin için önerilenler" bölümü vurgulanmıştır.

İş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) düşüş gözlemlendi:

Metrik Mobil Masaüstü
Reklam TO'su +%11 +%30
Reklam görüntülenebilirliği +%10,5 %6+
LCP -%51 -%73
TTFB -%83 -%84

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çin requestIdleCallback 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.