Wstępne pobieranie zasobów przyspiesza wczytywanie stron i poprawia wyniki biznesowe.
Wstępne pobieranie to technika służąca 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 aplikacji Terra artykuły są pobierane w poprzednim etapie, jeśli są spełnione te warunki:
- Widoczność linków do wstępnie pobranych artykułów: firma Terra użyła interfejsu Intersection Observer API do wykrywania widoczności sekcji zawierającej artykuły, które chciała wstępnie pobrać.
- Korzystne warunki dla zwiększonego wykorzystania danych: jak już wspomnieliśmy, wstępna pamięć podręczna to spekulacyjne zwiększenie wydajności, które zużywa dodatkowe dane. W niektórych sytuacjach może to nie być pożądane. 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
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
Jeśli korzystasz z niego ostrożnie, może on znacznie skrócić czas wczytywania przyszłych żądań nawigacyjnych, co zmniejszy trudności w przebieganiu przez użytkowników i zwiększy ich zaangażowanie. Przewidywanie skutkuje wczytywaniem dodatkowych bajtów, które mogą nie zostać wykorzystane, 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, Leonarda Belliniego i Luccy Paradedy z zespołu inżynierów firmy Terra za ich wkład w realizację tego projektu.