Ö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

Thierno Thiam

Ö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 mühendislik ekibiyle, web sitelerinin belirli bölümlerinde önceden getirme tekniklerini kullanarak makalelerin yüklenme süresini iyileştirmek için ortak çalışma yaptık.

Bu örnek olay incelemesinde, Terra'nın mobil cihazlarda reklam tıklama oranında (TO) %11, masaüstünde reklam TO'su% 30 ve Largest Contentful Paint (LCP) sürelerinde% 50 azalmayla sonuçlanan yolculuğu açıklanmaktadı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 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 tespit etmek için Intersection Observer API'sini 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.

Terra, bu koşullar karşılandığında 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 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 getirilmesinin sonucunda, reklam metriklerinde genel bir artış, LCP ve İlk Bayt'a Kadar Geçen Süre (TTFB) sürelerinde genel bir düşüş gözlemlenmiştir:

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.
• Daha sonra, öğelerin görüntü alanında ne zaman görünür hale geldiğini izlemek için bir IntersectionObserver kullanır ve ardından önceden getirme 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, ön getirme işlemini yalnızca iyi ağ koşullarında ve bu bilgilerin kullanılabildiği uygun cihazlarda 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.