Pobieranie zasobów z wyprzedzeniem skraca czas wczytywania strony i poprawia wskaźniki biznesowe.
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.