Dowiedz się więcej o wskazówce dotyczącej zasobu rel=prefetch i o tym, jak jej używać.
Badania pokazują, że krótszy czas wczytywania prowadzi do wyższych współczynników konwersji i lepszej wygody użytkowników. Jeśli wiesz, jak użytkownicy poruszają się po Twojej witrynie i które strony prawdopodobnie odwiedzą jako następne, możesz skrócić czas wczytywania kolejnych stron, pobierając zasoby tych stron z wyprzedzeniem.
Z tego przewodnika dowiesz się, jak to zrobić za pomocą <link rel=prefetch>
, czyli wskazówki dotyczącej zasobu, która umożliwia łatwe i wydajne wdrożenie wstępnego pobierania.
Ulepszanie nawigacji za pomocą rel=prefetch
Dodanie <link rel=prefetch>
do strony internetowej powoduje, że przeglądarka pobiera całe strony lub niektóre zasoby (np. skrypty lub 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 w przypadku zasobów, które nie są potrzebne od razu, dlatego należy stosować tę metodę rozważnie. Pobieraj zasoby z wyprzedzeniem tylko wtedy, gdy masz pewność, że użytkownicy będą potrzebować ich. Rozważ niepobieranie z wyprzedzeniem, gdy użytkownicy korzystają z wolnego połączenia. Możesz to wykryć za pomocą interfejsu Network Information API.
Istnieją różne sposoby określenia, które linki mają być pobierane z wyprzedzeniem. Najprostszy z nich to pobieranie z wyprzedzeniem pierwszego lub kilku linków na bieżącej stronie. Istnieją też biblioteki, które korzystają z bardziej zaawansowanych metod, o których opowiemy w dalszej części tego artykułu.
Przypadki użycia
Wstępne wczytywanie kolejnych stron
Wstępnie pobieraj dokumenty HTML, gdy kolejne strony są przewidywalne, dzięki czemu po kliknięciu linku strona zostanie wczytana od razu.
Na przykład na stronie z informacjami o produkcie możesz pobrać wstępnie stronę najpopularniejszego produktu na liście. W niektórych przypadkach następny krok jest jeszcze łatwiejszy do przewidzenia – na stronie koszyka zakupowego prawdopodobieństwo, że użytkownik odwiedzi stronę płatności, jest zwykle wysokie, co czyni ją dobrym kandydatem do wstępnego pobierania.
Chociaż wstępny odczyt zasobów wykorzystuje dodatkową przepustowość, może poprawić większość wskaźników wydajności. Czas do pierwszego bajta (TTFB) będzie często znacznie krótszy, ponieważ żądanie dokumentu spowoduje trafienie do pamięci podręcznej. Ponieważ TTFB będzie niższy, kolejne dane oparte na czasie będą często też niższe, w tym największe wyrenderowanie treści (LCP) i pierwsze wyrenderowanie treści (FCP).
Pobieranie wstępnie zasobów statycznych
Wstępnie pobieraj zasoby statyczne, np. skrypty lub arkusze stylów, gdy można przewidzieć kolejne sekcje, które użytkownik może odwiedzić. Jest to szczególnie przydatne, gdy te zasoby są udostępniane na wielu stronach.
Na przykład Netflix wykorzystuje czas spędzany przez użytkowników na stronach niezalogowanych, aby pobrać z wyprzedzeniem React, który zostanie wykorzystany po zalogowaniu. Dzięki temu czas do osiągnięcia stanu interaktywnego zmniejszył się o 30% w przypadku przyszłych nawigacji.
Wpływ wstępnego pobierania zasobów statycznych na dane dotyczące skuteczności zależy od zasobu, który jest wstępnie pobierany:
- Pobieranie obrazów z wyprzedzeniem może znacznie skrócić czas LCP w przypadku elementów graficznych LCP.
- Wstępne pobieranie arkuszy stylów może poprawić zarówno wartość FCP, jak i LCP, ponieważ oznacza to skrócenie czasu pobierania arkusza stylów przez sieć. Ponieważ arkuszy stylów blokują renderowanie, mogą one wydłużać LCP, gdy są pobierane w poprzednim tle. Jeśli kolejny element LCP strony jest obrazem tła CSS zażądanym przez właściwość
background-image
, obraz zostanie również wstępnie pobrany jako zależny zasób pobranego wstępnie arkusza stylów. - Wstępne wczytywanie skryptu JavaScript pozwoli na przetworzenie takiego skryptu znacznie wcześniej, niż gdyby było to wymagane przez sieć podczas nawigacji. Może to mieć wpływ na czas od interakcji do kolejnego wyrenderowania (INP) strony. W przypadku, gdy znaczniki są renderowane po stronie klienta za pomocą JavaScriptu, można poprawić LCP przez zmniejszone opóźnienia wczytywania zasobów, a renderowanie znaczników zawierających element LCP strony może nastąpić wcześniej.
- Wstępne pobieranie czcionek internetowych, które nie są jeszcze używane przez bieżącą stronę, może wyeliminować przesunięcia układu. W przypadku użycia funkcji
font-display: swap;
okres zamiany czcionki jest usuwany, co powoduje szybsze renderowanie tekstu i wyeliminowanie przesunięć układu. Jeśli przyszła strona używa wstępnie pobranego czcionki, a element LCP tej strony to blok tekstu korzystający z czcionki internetowej, LCP tego elementu też będzie szybszy.
Pobieranie z wyprzedzeniem fragmentów kodu JavaScript na żądanie
Dzielenie kodu w pakietach JavaScript pozwala na początkowe wczytanie tylko części aplikacji, a pozostałe części wczytywać w tylu. Jeśli używasz tej metody, możesz zastosować pobieranie z wyprzedzeniem do tras lub komponentów, które nie są konieczne od razu, ale prawdopodobnie wkrótce będą żądane.
Jeśli na przykład masz stronę z przyciskiem, który otwiera okno dialogowe z selektorem emotikonów, możesz podzielić ją na 3 elementy JavaScript: stronę główną, okno dialogowe i selektor. Strona główna i okno mogą być wczytane w pierwszej kolejności, a selektor – na żądanie. Narzędzie takie jak webpack pozwala na nakazywanie przeglądarce pobierania tych fragmentów w ramach wstępnego pobierania.
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ą określenia wskazówki dotyczącej pobierania z wyprzedzeniem w nagłówku HTTP jest to, że przeglądarka nie musi analizować dokumentu w celu znalezienia wskazówki dotyczącej zasobu, co w niektórych przypadkach może przynieść niewielkie ulepszenia.
Pobieranie wstępnie modułów JavaScript za pomocą magicznych komentarzy webpacka
webpack umożliwia wstępne pobieranie skryptów dla ścieżek lub funkcji, które według Ciebie użytkownicy wkrótce odwiedzą lub wykorzystają.
Ten fragment kodu wczytuje z opóźnieniem funkcję sortowania z biblioteki lodash, aby posortować grupę liczb, które zostaną przesłane przez formularz:
form.addEventListener("submit", e => {
e.preventDefault()
import('lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
Zamiast czekać na zdarzenie „submit” (prześlij), aby załadować tę funkcję, możesz pobrać ten zasób wstępnie, aby zwiększyć szanse na to, że będzie on dostępny w pamięci podręcznej w momencie, gdy użytkownik prześle formularz. webpack umożliwia to za pomocą 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) });
});
To polecenie informuje webpack, aby wstrzyknął tag <link rel="prefetch">
do dokumentu HTML:
<link rel="prefetch" as="script" href="1.bundle.js">
Korzyści z pobierania wstępnego fragmentów na żądanie są nieco subtelne, ale ogólnie można oczekiwać szybszej reakcji na interakcje, które zależą od tych fragmentów, ponieważ będą one dostępne natychmiast. W zależności od charakteru interakcji może to przynieść korzyści w odniesieniu do INP strony.
Wstępne pobieranie ma też ogólnie wpływ na priorytetyzację zasobów. Gdy zasób jest wstępnie wczytywany, ma najniższy możliwy priorytet. Dzięki temu żadne wstępnie pobrane zasoby nie będą konkurować o przepustowość zasobów potrzebnych na bieżącą stronę.
Inteligentne wstępne pobieranie za pomocą Quicklink i Guess.js
Możesz też zaimplementować inteligentniejsze pobieranie wstępne za pomocą bibliotek, które korzystają z funkcji prefetch
:
- quicklink używa interfejsu Intersection Observer API do wykrywania, kiedy linki wchodzą do widoku, i pobierania zasobów połączonych w tle podczas czasu bezczynności. Bonus: szybki link waży mniej niż 1 KB.
- Guess.js korzysta z raportów analitycznych, aby utworzyć model prognostyczny używany do inteligentnego pobierania z wyprzedzeniem tylko tego, co prawdopodobnie będzie potrzebne użytkownikowi.
Szybkie linki i Guess.js korzystają z interfejsu Network Information API, aby uniknąć pobierania z wyprzedzeniem, jeśli użytkownik korzysta z powolnej sieci lub ma włączoną Save-Data
.
Wstępne wczytywanie
Wskazówki dotyczące zasobów nie są instrukcjami obowiązkowymi. To przeglądarka decyduje, czy i kiedy mają być wykonywane.
Możesz użyć tej samej funkcji pobierania z wyprzedzeniem wiele razy. Podczas bezczynności przeglądarka umieszcza wszystkie wskazówki w kolejce i wysyła żądania dotyczące każdego zasobu. Jeśli w Chrome wczytywanie w ramach przewidującego pobierania nie zostało jeszcze ukończone, a użytkownik przejdzie do docelowego zasobu, przeglądarka uzna wczytywanie w trakcie za nawigację (inne przeglądarki mogą implementować tę funkcję inaczej).
Wstępna instalacja odbywa się z priorytetem „Najniższy”, dzięki czemu zainstalowane wstępnie zasoby nie konkurują o przepustowość z zasobami wymaganymi na bieżącej stronie.
Wstępnie pobrane pliki są przechowywane w buforze HTTP lub buforze pamięci (w zależności od tego, czy zasób można przechowywać w buforze) przez czas, który różni się w zależności od przeglądarki. Na przykład w Chrome zasoby są przechowywane przez około 5 minut, po których obowiązują normalne reguły Cache-Control
dotyczące zasobu.
Podsumowanie
Korzystanie z prefetch
może znacznie skrócić czas wczytywania kolejnych stron i nawet sprawić, że będą się one wczytywać natychmiast. prefetch
jest obsługiwana przez większość współczesnych przeglądarek, co czyni ją atrakcyjną techniką ułatwiającą nawigację wielu użytkownikom. Ta technika wymaga wczytania dodatkowych bajtów, które mogą nie zostać użyte, więc należy z niej korzystać ostrożnie. Stosuj ją tylko wtedy, gdy jest to konieczne, i najlepiej tylko w przypadku szybkich sieci.