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
Guilherme Moser de Souza

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 usługi Terra artykuły są pobierane w ramach wstępnego pobierania, jeśli są spełnione te warunki:

  • Widoczność linków do artykułów pobranych z wyprzedzeniem: firma Terra użyła interfejsu 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 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ę zwracającą wartość zdefiniowaną przez użytkownika, gdy wątek główny jest niewykorzystany, lub do określonego (opcjonalnie) 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”, które są wyróżnione na niebiesko.

Zrzut ekranu przedstawiający 2 sekcje na stronie Terra, w których zostały pobrane wstępnie linki. Po lewej stronie wyróżniono sekcję „Powiązane treści”, a po prawej – sekcję „Polecane dla Ciebie”.

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

Dane Urządzenia mobilne Komputer
CTR reklam +11% +30%
Widoczność reklam +10,5% +6%
LCP -51% -73%
TTFB -83% -84%

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 APIniskim 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 widoku, a następnie dodaje adresy URL do listy do wstępnego pobierania.
  • Proces wstępnego pobierania jest zaplanowany za pomocą funkcji requestIdleCallback, aby wykonać funkcję prefetch, gdy wątek główny jest bezczynny.

Podsumowanie

Przy odpowiednim stosowaniu, wyprzedzający pobieranie może znacznie skrócić czas wczytywania przyszłych żądań nawigacyjnych, co zmniejszy trudności w przebieganiu ścieżki użytkownika i zwiększy zaangażowanie. Przewidywanie skutkuje wczytywaniem dodatkowych bajtów, które mogą nie zostać użyte, dlatego firma Terra podjęła dodatkowe działania, aby stosować przewidywanie tylko w dobrych warunkach sieciowych i na odpowiednich urządzeniach, na których są dostępne te informacje.

Specjalne podziękowania dla Gilberto Cocchiego, Harry'ego Theodoulou, Miguela Carlosa Martíneza Díaza, Barry'ego Pollarda, Jeremy'ego Wagnera, Leonardo Belliniego i Luccy Paradedy z zespołu inżynierów firmy Terra za ich wkład w realizację tego projektu.