Pobieraj zasoby z wyprzedzeniem, aby przyspieszyć przyszłą nawigację

Więcej informacji na temat podpowiedzi dotyczącej zasobów rel=prefetch i sposobów jej używania.

Demián Renzulli

Jeremy Wagner

Badania pokazują, że krótszy czas wczytywania oznacza wyższy współczynnik konwersji i większą wygodę użytkowników. Jeśli wiesz, jak użytkownicy poruszają się po Twojej witrynie i które strony prawdopodobnie odwiedzą w następnej kolejności, możesz przyspieszyć wczytywanie przyszłych elementów nawigacyjnych, pobierając z wyprzedzeniem zasoby dotyczące tych stron.

Z tego przewodnika dowiesz się, jak to zrobić za pomocą <link rel=prefetch> – wskazówek dotyczących zasobów, które pomogą Ci łatwo i wydajnie wdrożyć pobieranie z wyprzedzeniem.

Ulepsz nawigację dzięki rel=prefetch

Dodanie tagu <link rel=prefetch> do strony internetowej informuje przeglądarkę, że ma pobierać całe strony lub niektóre zasoby (takie jak skrypty czy pliki CSS), których użytkownik może potrzebować w przyszłości:

<link rel="prefetch" href="/articles/" as="document">

Wskazówka prefetch zużywa dodatkowe bajty na potrzeby zasobów, które nie są potrzebne od razu, więc tę metodę należy stosować rozważnie. Pobieraj zasoby z wyprzedzeniem tylko wtedy, gdy masz pewność, że użytkownicy będą ich potrzebować. Rozważ niepobieranie z wyprzedzeniem, jeśli użytkownicy mają wolne połączenia. Możesz to sprawdzić za pomocą interfejsu Network Information API.

Linki pobierać z wyprzedzeniem można określić na różne sposoby. Najprostszy to pobranie z wyprzedzeniem pierwszego linku lub kilku pierwszych linków na bieżącej stronie. Istnieją również biblioteki używające bardziej zaawansowanych metod, które zostały opisane w dalszej części tego posta.

Przykłady zastosowań

Pobieranie kolejnych stron z wyprzedzeniem

Pobieraj z wyprzedzeniem dokumenty HTML, gdy kolejne strony są przewidywalne. Dzięki temu po kliknięciu linku strona jest natychmiast wczytywana.

Na przykład na stronie z informacjami o produkcie możesz pobrać z wyprzedzeniem stronę, która zawiera najpopularniejszy produkt z listy. W niektórych przypadkach kolejna nawigacja jest jeszcze łatwiejsza do przewidzenia – na stronie koszyka prawdopodobieństwo, że użytkownik odwiedzi stronę płatności, jest zwykle wysokie, więc może się to sprawdzić z wyprzedzeniem.

Uwaga: zespół eBay wdrożył pobieranie z wyprzedzeniem w przypadku pierwszych 5 wyników na stronie wyszukiwania, aby przyspieszyć wczytywanie kolejnych stron w przyszłości, co pozwoliło zauważyć pozytywny wpływ na współczynniki konwersji.

Pobieranie zasobów z wyprzedzeniem wymaga dodatkowej przepustowości, ale może poprawić większość wskaźników wydajności. Czas do pierwszego bajtu (TTFB) jest często znacznie krótszy, ponieważ żądanie dokumentu skutkuje trafieniem w pamięci podręcznej. Ponieważ TTFB będzie mieć mniej danych, kolejne wskaźniki czasowe też będą niższe. Dotyczy to największego wyrenderowania treści (LCP) i pierwszego wyrenderowania treści (FCP).

Pobieranie z wyprzedzeniem zasobów statycznych

Pobieraj z wyprzedzeniem zasoby statyczne, takie jak skrypty lub arkusze stylów, jeśli można przewidzieć kolejne sekcje, które może odwiedzić użytkownik. Jest to szczególnie przydatne, gdy zasoby te są udostępniane na wielu stronach.

Na przykład Netflix wykorzystuje czas spędzony przez użytkowników na stronach po wylogowaniu się, aby pobrać z wyprzedzeniem aplikację React, która będzie używana po zalogowaniu się użytkowników. Dzięki temu skróciła czas do pełnej interaktywności o 30% w przypadku przyszłych nawigacji.

W tej chwili możliwe jest udostępnianie wstępnie pobranych zasobów między stronami udostępnianymi z różnych źródeł. Gdy wysyłana jest pamięć podręczna HTTP z podwójnym kluczem, będzie to działać tylko w przypadku nawigacji najwyższego poziomu i zasobów podrzędnych tego samego pochodzenia, ale nie będzie można ponownie używać pobranych z wyprzedzeniem zasobów podrzędnych z różnych źródeł. Oznacza to, że jeśli a.com wstępnie pobierze zasób b.com/library.js, nie będzie on dostępny w pamięci podręcznej usługi c.com. Niektóre przeglądarki, np. oparte na WebKit, już używają pamięci podręcznych partycji i miejsca na dane HTML5 we wszystkich domenach zewnętrznych.

Wpływ pobierania zasobów statycznych z wyprzedzeniem na dane o skuteczności zależy od tego, który zasób jest pobierany z wyprzedzeniem:

• Pobieranie obrazów z wyprzedzeniem może znacznie obniżyć współczynnik LCP w przypadku elementów graficznych LCP.
• Pobieranie z wyprzedzeniem arkuszy stylów może poprawić zarówno FCP, jak i LCP, ponieważ nie wymaga czasu sieciowych na pobieranie arkusza. Arkusze stylów blokują renderowanie, więc mogą zmniejszyć LCP po pobraniu z wyprzedzeniem. Jeśli element LCP kolejnej strony jest obrazem tła CSS żądanym przez właściwość background-image, obraz zostanie również wstępnie pobrany jako zasób zależny wstępnie pobranego arkusza stylów.
• Pobieranie z wyprzedzeniem kodu JavaScript umożliwia przetworzenie pobranego skryptu dużo szybciej, niż gdyby sieć musiała go najpierw pobrać przez sieć. Może to mieć wpływ na dane czasu reagowania, takie jak opóźnienie po pierwszym działaniu (FID) i interakcja z kolejnym wyrenderowaniem (INP). Jeżeli znaczniki są renderowane na kliencie za pomocą JavaScriptu, LCP można poprawić przez zmniejszenie opóźnień wczytywania zasobów. Może też nastąpić wcześniej renderowanie znaczników zawierających element LCP po stronie klienta.
• Pobieranie z wyprzedzeniem czcionek internetowych, które nie są jeszcze używane na bieżącej stronie, może wyeliminować przesunięcia układu. Jeśli używany jest font-display: swap;, okres wymiany czcionki jest eliminowany, co przyspiesza renderowanie tekstu i eliminuje przesunięcia układu. Jeśli w przyszłości strona będzie używać czcionki pobranej z wyprzedzeniem, a jej element LCP jest blokiem tekstu z czcionką internetową, LCP również będzie szybsze.

Pobieranie z wyprzedzeniem fragmentów JavaScript na żądanie

Dzięki dzieleniu kodu pakietów JavaScript możesz początkowo ładować tylko niektóre fragmenty aplikacji, a resztę ładować leniwie. Jeśli korzystasz z tej metody, możesz zastosować pobieranie z wyprzedzeniem do tras lub komponentów, które nie są od razu niezbędne, ale prawdopodobnie zostaną wkrótce żądane.

Jeśli np. masz stronę, na której znajduje się przycisk otwierający okno z selektorem emotikonów, możesz go podzielić na 3 fragmenty JavaScriptu – stronę główną, okno i selektor. Strona główna i okno mogą być wstępnie wczytywane, a selektor – na żądanie. Narzędzia takie jak Webpack umożliwiają przeglądarce wstępne pobieranie tych fragmentów na żądanie.

Jak wdrożyć rel=prefetch

Najprostszym sposobem implementacji prefetch jest dodanie tagu <link> do <head> dokumentu:

<head>
  ...
  <link rel="prefetch" href="/articles/" as="document">
  ...
</head>

Atrybut as pomaga przeglądarce ustawić odpowiednie nagłówki i określić, czy zasób znajduje się już w pamięci podręcznej. Przykładowe wartości tego atrybutu to: document, script, style, font, image i inne.

Pobieranie z wyprzedzeniem możesz też zainicjować za pomocą nagłówka HTTP Link:

Link: </css/style.css>; rel=prefetch

Zaletą stosowania podpowiedzi pobierania z wyprzedzeniem w nagłówku HTTP jest to, że przeglądarka nie musi analizować dokumentu w celu znalezienia podpowiedzi dotyczącej zasobów, co w niektórych przypadkach może przynieść niewielkie ulepszenia.

Uwaga: prefetch jest obsługiwany przez wszystkie nowoczesne przeglądarki z wyjątkiem Safari. W przypadku Safari możesz zaimplementować technikę zastępczą, używając żądań XHR lub Fetch API.

Pobieranie z wyprzedzeniem modułów JavaScript z magicznymi komentarzami webpack

Webpack umożliwia wstępne pobieranie skryptów dotyczących tras lub funkcji, które prawdopodobnie wkrótce odwiedzą lub z niej będą korzystać.

Ten fragment kodu leniwie wczytuje funkcję sortowania z biblioteki lodash, aby posortować grupę liczb przesłanych w formularzu:

form.addEventListener("submit", e => {
  e.preventDefault()
  import('lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

Zamiast czekać na załadowanie tej funkcji, możesz pobrać zasób z wyprzedzeniem, aby zwiększyć szanse na to, że będzie on dostępny w pamięci podręcznej, zanim użytkownik prześle formularz. Pakiet internetowy umożliwia korzystanie z magicznych komentarzy w import():

form.addEventListener("submit", e => {
   e.preventDefault()
   import(/* webpackPrefetch: true */ 'lodash.sortby')
         .then(module => module.default)
         .then(sortInput())
         .catch(err => { alert(err) });
});

Spowoduje to wstrzyknięcie tagu <link rel="prefetch"> do dokumentu HTML:

<link rel="prefetch" as="script" href="1.bundle.js">

Korzyści w zakresie wydajności pobierania fragmentów na żądanie są nieco zróżnicowane, ale ogólnie rzecz biorąc, możesz spodziewać się szybszego reakcji na interakcje, które zależą od tych fragmentów na żądanie, ponieważ są one dostępne natychmiast. W zależności od charakteru interakcji może to przełożyć się na wartość INP strony.

Ogólnie pobieranie z wyprzedzeniem wpływa też na ogólne priorytety zasobów. Gdy zasób jest pobierany z wyprzedzeniem, odbywa się to z najniższym możliwym priorytetem. W związku z tym żadne z wstępnie pobranych zasobów nie będą rywalizować o wykorzystanie przepustowości łącza o zasoby potrzebne przez bieżącą stronę.

Inteligentne pobieranie z wyprzedzeniem z użyciem Quicklink i Guess.js

Możesz też wdrożyć inteligentne pobieranie z wyprzedzeniem, korzystając z bibliotek, które korzystają z funkcji prefetch:

• quicklink używa interfejsu Intersection Observer API do wykrywania, kiedy linki pojawiają się w widocznym obszarze, i pobiera z wyprzedzeniem połączone zasoby w czasie bezczynności. Dodatkowo szybki link waży mniej niż 1 KB.
• Kod Guess.js wykorzystuje raporty analityczne do utworzenia modelu prognostycznego, który służy do inteligentnego pobierania z wyprzedzeniem tylko tego, czego użytkownik prawdopodobnie będzie potrzebować.

Zarówno szybki link, jak i Guess.js używają interfejsu Network Information API, który pozwala uniknąć pobierania z wyprzedzeniem, jeśli użytkownik korzysta z wolnej sieci lub ma włączone Save-Data.

Pobieranie z wyprzedzeniem

Wskazówki dotyczące zasobów nie są obowiązkowe i to przeglądarka decyduje, czy oraz kiedy zostaną wykonane.

Możesz użyć pobierania z wyprzedzeniem wiele razy na tej samej stronie. Przeglądarka umieszcza w kolejce wszystkie wskazówki i żąda każdego zasobu, gdy jest nieaktywny. Jeśli pobieranie z wyprzedzeniem nie zostało zakończone, a użytkownik przejdzie do docelowego zasobu pobierania z wyprzedzeniem, dane w trakcie przesyłania są odbierane jako nawigacja przez przeglądarkę (inni dostawcy przeglądarek mogą to robić inaczej).

Wstępne pobieranie odbywa się z „najniższym” priorytetem, dlatego wstępnie pobrane zasoby nie konkurują o przepustowość z zasobami wymaganymi na bieżącej stronie.

Pliki pobrane z wyprzedzeniem są przechowywane w HTTP Cache lub w pamięci podręcznej stanu strony internetowej (w zależności od tego, czy zasób jest buforowany) przez czas, który różni się w zależności od przeglądarek. Na przykład zasoby Chrome są przechowywane przez 5 minut. Po tym czasie obowiązują normalne reguły Cache-Control dotyczące tego zasobu.

Podsumowanie

Używanie prefetch może znacznie skrócić czas wczytywania przyszłych elementów nawigacyjnych, a nawet sprawić, że strony będą się wczytywać błyskawicznie. prefetch jest powszechnie obsługiwany w nowoczesnych przeglądarkach, dlatego jest to atrakcyjna technika, która poprawia komfort korzystania z nawigacji wielu użytkowników. Ta metoda wymaga wczytywania dodatkowych bajtów, które mogą nie być używane, więc zachowaj ostrożność podczas korzystania z tej metody – rób to tylko wtedy, gdy to konieczne, i najlepiej tylko w szybkich sieciach.