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

Pobieranie zasobów z wyprzedzeniem skraca czas wczytywania strony i poprawia wskaźniki biznesowe.

Guilherme Moser de Souza

Thierno Thiam

Pobieranie z wyprzedzeniem to technika używana do przyspieszenia wczytywania strony przez pobranie zasobów (a nawet całych stron), które prawdopodobnie będą potrzebne w najbliższej przyszłości. Badania wykazały, że krótszy czas wczytywania oznacza wyższy współczynnik konwersji i większą wygodę użytkowników.

Terra to jeden z największych brazylijskich portali treści, oferujący rozrywkę, wiadomości i sport. Miesięcznie odwiedza go ponad 63 miliony unikalnych użytkowników. We współpracy z programistami firmy Terra wykorzystaliśmy techniki pobierania z wyprzedzeniem w niektórych sekcjach witryny, aby skrócić czas wczytywania artykułów.

To studium przypadku opisuje, jak firma Terra przeprowadziła wdrożenie, co doprowadziło do wzrostu współczynnika klikalności reklam (CTR) o 11% na urządzeniach mobilnych, o 30% na komputerach i o 50% w przypadku największego wyrenderowania treści (LCP).

Strategia pobierania z wyprzedzeniem

Pobieranie z wyprzedzeniem jest znane już od jakiegoś czasu, ale należy go używać z rozwagą, ponieważ zużywa dodatkową przepustowość na zasoby, które nie są od razu niezbędne. Tę metodę należy stosować z rozwagą, aby uniknąć niepotrzebnego wykorzystania danych. W przypadku aplikacji Terra artykuły są pobierane z wyprzedzeniem, jeśli zostaną spełnione te warunki:

• Widoczność linków do wstępnie pobranych artykułów: aplikacja Terra użyła interfejsu Intersection Observer API do wykrywania widoczności sekcji zawierającej artykuły, które miały pobrać z wyprzedzeniem.
• Korzystne warunki związane ze zwiększonym wykorzystaniem danych: jak już wspomnieliśmy, pobieranie z wyprzedzeniem to spekulacyjny wzrost wydajności, który wymaga zużywania dodatkowych danych i może nie być pożądanym wynikiem w każdej sytuacji. Aby zmniejszyć prawdopodobieństwo wykorzystania przepustowości, Terra używa interfejsu Network Information API oraz Device Memory API do określenia, czy pobrać następny 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 bezczynny: Terra sprawdza, czy procesor jest nieaktywny i może wykonywać dodatkową pracę, korzystając z requestIdleCallback, który wykonuje wywołanie zwrotne, gdy wątek główny jest nieaktywny, lub pod kątem określonego (opcjonalnego) terminu – w zależności od tego, co nastąpi wcześniej.

Dzięki przestrzeganiu tych warunków Terra pobiera dane tylko wtedy, gdy jest to konieczne, co oszczędza przepustowość i żywotność baterii oraz minimalizuje wpływ pobierania z wyprzedzeniem, który ostatecznie nie jest używany.

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

Wpływ na firmę

Aby zmierzyć skuteczność tej techniki, firma Terra najpierw udostępniła tę funkcję w sekcji „Powiązane treści” na stronie z artykułem. Kod UTM pomógł im w odróżnieniu na potrzeby porównania artykułów pobranych z wyprzedzeniem i niepobranych z wyprzedzeniem. Po 2 tygodniach udanych testów A/B firma Terra postanowiła dodać funkcję pobierania z wyprzedzeniem do sekcji „Polecane dla Ciebie”.

W wyniku pobierania artykułów z wyprzedzeniem zaobserwowano ogólny wzrost danych dotyczących reklam i spadek czasu do pierwszego bajtu (TTFB):

Pobieranie z wyprzedzeniem – jeśli jest używane z rozwagą – znacznie skraca czas wczytywania strony, poprawia wskaźniki reklam i skraca czas LCP.

Informacje techniczne

Wstępne wczytywanie można osiągnąć za pomocą wskazówek dotyczących zasobów, takich jak rel=prefetch czy rel=preload, za pomocą bibliotek takich jak quicklink czy Guess.js, lub nowszego interfejsu Speculation Rules API. Firma Terra postanowiła wdrożyć tę funkcję za pomocą interfejsu fetch API o niskim priorytecie w połączeniu z instancją Intersection Observer. Firma Terra zdecydowała się na obsługę przeglądarki Safari, która nie obsługuje jeszcze innych metod pobierania z wyprzedzeniem, takich jak rel=prefetch czy interfejs Speculation Rules API, a w pełni funkcjonalna biblioteka JavaScript nie była potrzebna do spełnienia potrzeb aplikacji Terra.

Poniższy skrypt JavaScript jest w przybliżeniu odpowiednikiem 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)
})

• Przed rozpoczęciem pobierania z wyprzedzeniem funkcja prefetch sprawdza najpierw minimalną jakość połączenia i pamięć urządzenia.
• Następnie używa polecenia IntersectionObserver do monitorowania, kiedy elementy stają się widoczne w widocznym obszarze, a następnie dodaje adresy URL do listy w celu pobrania z wyprzedzeniem.
• Proces pobierania z wyprzedzeniem jest zaplanowany z elementem requestIdleCallback, by uruchomić funkcję prefetch, gdy wątek główny jest nieaktywny.

Podsumowanie

Rozsądnie używane pobieranie z wyprzedzeniem może znacznie skrócić czas wczytywania przyszłych żądań nawigacyjnych, zmniejszając w ten sposób problemy na ścieżce użytkownika i zwiększając zaangażowanie. Pobieranie z wyprzedzeniem powoduje wczytywanie dodatkowych bajtów, które mogą nie być używane, dlatego aplikacja Terra podjęła dodatkowe działania, aby pobrać z wyprzedzeniem tylko w dobrych warunkach sieciowych i na odpowiednich urządzeniach, gdzie takie informacje są dostępne.

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