Jak pobieranie z wyprzedzeniem pomogło Terra zwiększyć współczynnik klikalności reklam o 30% i przyspieszyć największe wyrenderowanie treści

Wstępne pobieranie zasobów przyspiesza wczytywanie stron i poprawia wyniki biznesowe.

Guilherme Moser de Souza

Thierno Thiam

Wstępne pobieranie to technika stosowana do przyspieszania wczytywania stron przez pobieranie zasobów lub nawet całych stron, które mogą być potrzebne w najbliższej przyszłości. Badania pokazują, że krótszy czas wczytywania prowadzi do wyższych współczynników konwersji i większej wygody użytkowników.

Terra to jeden z największych portali z treściami w Brazylii. Oferuje on treści rozrywkowe, wiadomości i sport. Co miesiąc odwiedza go ponad 63 miliony unikalnych użytkowników. We współpracy z zespołem inżynierów Terra udało nam się skrócić czas wczytywania artykułów dzięki zastosowaniu techniki wstępnego pobierania w niektórych sekcjach witryny.

Ten przypadek analizy opisuje wdrożenie przez firmę Terra, które zaowocowało wzrostem współczynnika klikalności reklam (CTR) o 11% na urządzeniach mobilnych, CTR reklam o 30% na komputerach oraz skróceniem o 50% czasu największego wyrenderowania treści (LCP).

Strategia pobierania w tle

Pobieranie z wyprzedzeniem istnieje już od jakiegoś czasu, ale należy z niego korzystać ostrożnie, ponieważ zużywa dodatkową przepustowość na zasoby, które nie są niezbędne w danym momencie. Należy stosować tę technikę z troską o niepotrzebne wykorzystanie danych. W przypadku Terra artykuły są wstępnie pobierane, jeśli są spełnione te warunki:

• Widoczność linków do pobranych z wyprzedzeniem artykułów: Terra użyła Intersection Observer API, aby wykryć widoczność sekcji zawierającej artykuły, które chciała pobrać z wyprzedzeniem.
• Korzystne warunki dla zwiększonego wykorzystania danych: jak już wspomnieliśmy, wstępna obróbka to spekulacyjne zwiększenie wydajności, które zużywa dodatkowe dane. Nie zawsze jest to pożądany efekt. Aby zmniejszyć prawdopodobieństwo marnowania przepustowości, Terra używa interfejsu Network Information API oraz interfejsu Device Memory API, aby określić, czy pobrać kolejny artykuł. Terra pobiera następny artykuł tylko wtedy, gdy:
  • Prędkość połączenia wynosi co najmniej 3G, a urządzenie ma co najmniej 4 GB pamięci.
  • lub jeśli urządzenie ma system iOS.
• Procesor niewykorzystany: na koniec Terra sprawdza, czy procesor jest niewykorzystany i czy może wykonać dodatkowe zadanie za pomocą funkcji requestIdleCallback, która wywołuje funkcję zwrotną do przetworzenia, gdy wątek główny jest niewykorzystany lub do określonego (opcjonalnego) terminu – w zależności od tego, co nastąpi wcześniej.

Dzięki temu, że przestrzegasz tych warunków, Terra pobiera dane tylko wtedy, gdy jest to konieczne, co pozwala oszczędzać przepustowość i czas pracy na baterii oraz minimalizuje wpływ wstępnie pobieranych danych, które ostatecznie nie są używane.

Gdy te warunki są spełnione, Terra pobiera wstępnie artykuły w sekcjach „Powiązane treści” i „Polecane dla Ciebie” wyróżnionych na niebiesko poniżej.

Wpływ na firmę

Aby zmierzyć wpływ tej techniki, firma Terra wprowadziła tę funkcję w sekcji „Powiązane treści” na stronie artykułu. Kod UTM pomógł im odróżnić artykuły z wstępnym pobieraniem od tych bez wstępnego pobierania na potrzeby porównania. Po 2 tygodniach udanego testowania A/B Terra zdecydowała się dodać funkcję wstępnego pobierania do sekcji „Polecane dla Ciebie”.

W wyniku wstępnego pobierania artykułów zaobserwowaliśmy ogólny wzrost wskaźników reklam oraz skrócenie czasu LCP i czasu do pierwszego bajta (TTFB):

Wstępne wczytywanie, jeśli jest używane z uwagą, znacznie skraca czas wczytywania strony, zwiększa skuteczność reklam i skraca czas LCP.

Szczegóły techniczne

Wstępne pobieranie można osiągnąć za pomocą wskazówek dotyczących zasobów, takich jak rel=prefetch lub rel=preload, za pomocą bibliotek takich jak quicklink czy Guess.js lub za pomocą nowszego interfejsu Speculation Rules API. Firma Terra zdecydowała się zaimplementować to rozwiązanie, używając interfejsu fetch API o niskim priorytecie w połączeniu z obiektem Intersection Observer. Terra wybrała tę opcję, ponieważ pozwala na obsługę przeglądarki Safari, która nie obsługuje jeszcze innych metod wstępnego pobierania, takich jak rel=prefetch czy interfejs API Speculation Rules, a pełnofunkcyjna biblioteka JavaScript nie była potrzebna do potrzeb Terra.

Poniższy kod JavaScript jest zbliżony do kodu używanego przez Terra:

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)
})

• Funkcja prefetch najpierw sprawdza minimalną jakość połączenia i pamięć urządzenia, zanim rozpocznie pobieranie wstępne.
• Następnie używa ona IntersectionObserver do monitorowania, kiedy elementy stają się widoczne w obszarze widoku, a następnie dodaje adresy URL do listy w celu ich pobierania w tle.
• Proces wstępnego pobierania jest zaplanowany za pomocą funkcji requestIdleCallback, aby wykonać funkcję prefetch, gdy wątek główny jest bezczynny.

Podsumowanie

Gdy używasz go ostrożnie, pobieranie z wyprzedzeniem może znacznie skrócić czas wczytywania przyszłych żądań nawigacji, zmniejszając w ten sposób użytkownika na drodze do zakupu i zwiększając jego zaangażowanie. Pobieranie z wyprzedzeniem powoduje wczytywanie dodatkowych bajtów, które nie mogą być używane, dlatego aplikacja Terra podjęła dodatkowe działania, aby pobierać z wyprzedzeniem dane tylko w dobrych warunkach sieciowych i na odpowiednich urządzeniach, jeśli takie informacje są dostępne.

Specjalne podziękowania dla Gilberto Cocchi, Harry'ego Theodoulou, Miguela Carlosa Martíneza Díaza, Barry'ego Pollarda, Jeremy'ego Wagnera oraz Leonarda Belliniego i Luccy Paradedy z zespołu inżynierów Terra za wkład w tę pracę.