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 wdrażanie 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 na zasoby, których nie trzeba od razu pobrać, więc należy stosować tę technikę z rozwagą. Zasoby pobieraj tylko wtedy, gdy masz pewność, że użytkownicy ich potrzebują. Rozważ wyłączenie pobierania wstępnego, gdy użytkownicy korzystają z wolnego połączenia. Możesz to wykryć za pomocą interfejsu Network Information API.
Linki do wstępnego pobierania można określać na różne sposoby. Najprostszym sposobem jest wstępne pobieranie pierwszego linku lub kilku pierwszych 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
pobieranie w poprzedniości dokumentów HTML, gdy kolejne strony są przewidywalne, dzięki czemu po kliknięciu linku strona wczytuje się natychmiast;
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
Pobieranie w poprzednim etapie zasobów statycznych, takich jak skrypty czy arkusze stylów, gdy można przewidzieć, które sekcje 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, jaki użytkownicy spędzają na stronach, na których nie są zalogowani, do wstępnego pobierania biblioteki React, która będzie używana 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:
- Wstępne wczytywanie obrazów może znacznie skrócić czas LCP elementów obrazu LCP.
- Wstępne pobieranie arkuszy stylów może poprawić zarówno FCP, jak i LCP, ponieważ eliminuje czas potrzebny sieci na pobranie arkusza stylów. Skrypty blokujące renderowanie, takie jak skrypty czcionek, mogą zmniejszyć LCP, jeśli są pobierane w poprzednim czasie. 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. - Dzięki pobieraniu wstępnemu skryptu JavaScript przetwarzanie skryptu pobieranego wstępnie będzie mogło nastąpić znacznie szybciej niż w przypadku pobierania skryptu przez sieć podczas nawigacji. Może to mieć wpływ na czas od interakcji do kolejnego wyrenderowania (INP) strony. W przypadku znaczników renderowanych po stronie klienta za pomocą JavaScriptu można poprawić LCP, zmniejszając opóźnienia ładowania 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ć zmiany układu. W przypadku użycia elementu
font-display: swap;okres wymiany czcionki jest pomijany, 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 również 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 korzystasz z tej techniki, możesz stosować funkcję wstępnego pobierania do tras lub komponentów, które nie są potrzebne od razu, ale prawdopodobnie będą potrzebne w krótce.
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.
Możesz też zainicjować pobieranie w tle 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) w celu załadowania tej funkcji, możesz zamiast tego 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 zwiększyć INP strony.
Wstępne pobieranie ma też ogólnie wpływ na priorytetyzację zasobów. Gdy zasób jest pobierany w ramach wstępnego pobierania, ma najniższy możliwy priorytet. W rezultacie zainstalowane wstępnie zasoby nie będą konkurować o przepustowość z zasobami potrzebnymi na bieżącej stronie.
Inteligentne pobieranie wstępne za pomocą quicklink i Guess.js
Możesz też zaimplementować inteligentniejsze pobieranie wstępne za pomocą bibliotek, które pod spodem używają 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 do tworzenia modelu prognostycznego, który służy do sprytnego pobierania z poziomu pamięci podręcznej tylko tych treści, których użytkownik prawdopodobnie potrzebuje.
Zarówno quicklink, jak i Guess.js korzystają z interfejsu Network Information API, aby uniknąć pobierania w tle, jeśli użytkownik korzysta z wolnej sieci lub ma włączone Save-Data.
Wstępne pobieranie w GA4
Wskazówki dotyczące zasobów nie są instrukcjami obowiązkowymi. To przeglądarka decyduje, czy i kiedy mają być wykonywane.
Możesz korzystać z wstępnego pobierania wiele razy na tej samej stronie. 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 to jako nawigację (inne przeglądarki mogą implementować to inaczej).
Wstępna instalacja odbywa się z uwzględnieniem priorytetu „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 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, dlatego należy z niej korzystać ostrożnie. Stosuj ją tylko wtedy, gdy jest to konieczne, i najlepiej w przypadku szybkich sieci.