Dowiedz się więcej o wskazówce dotyczącej zasobów rel=prefetch i o tym, jak jej używać.
Badania pokazują, że krótszy czas wczytywania to wyższe współczynniki konwersji i lepsze wrażenia użytkowników. Jeśli masz wgląd w to, w jaki sposób użytkownicy poruszają się po Twojej witrynie i które strony prawdopodobnie odwiedzą w następnej kolejności, możesz poprawić czas wczytywania kolejnych stron nawigacji, pobierając z wyprzedzeniem zasoby dotyczące tych stron.
Z tego przewodnika dowiesz się, jak to zrobić za pomocą <link rel=prefetch> – wskazówki dotyczącej zasobów, która pozwala łatwo i efektywnie wdrożyć pobieranie z wyprzedzeniem.
Ulepsz nawigację dzięki rel=prefetch
Dodanie do strony internetowej tagu <link rel=prefetch> informuje przeglądarkę, że ma pobrać 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 w przypadku zasobów, które nie są potrzebne od razu, dlatego trzeba stosować ją z rozwagą. pobieraj z wyprzedzeniem zasoby tylko wtedy, gdy masz pewność, że użytkownicy będą ich potrzebować. 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ą również biblioteki korzystające z bardziej zaawansowanych metod, które zostały opisane w dalszej części tego posta.
Przypadki użycia
Wstępne pobieranie 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ć z wyprzedzeniem stronę najpopularniejszego produktu z listy. W niektórych przypadkach następna nawigacja jest jeszcze łatwiejsza do przewidzenia – na stronie koszyka prawdopodobieństwo, że użytkownik odwiedzi stronę płatności, jest zwykle wysokie, dlatego dobrze nadaje się ona do wstępnego wczytywania.
Pobieranie zasobów z wyprzedzeniem wymaga dodatkowej przepustowości, ale może poprawić większość wskaźników dotyczących wydajności. Czas do pierwszego bajtu (TTFB) będzie często dużo mniejszy, ponieważ żądanie dokumentu skutkuje trafieniem w pamięci podręcznej. Ponieważ funkcja TTFB będzie mniejsza, kolejne wskaźniki zależne od czasu, takie jak największe wyrenderowanie treści (LCP) i Pierwsze wyrenderowanie treści (FCP), również będą niższe.
Wstępne pobieranie 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ą współdzielone przez wiele stron.
Na przykład Netflix wykorzystuje czas spędzany na stronach niezalogowanych użytkowników, aby pobrać z wyprzedzeniem React, który zostanie wykorzystany po zalogowaniu. Dzięki temu skrócił czas do pełnej interaktywności o 30% na potrzeby przyszłej nawigacji.
Wpływ pobierania z wyprzedzeniem zasobów statycznych na dane o skuteczności zależy od wstępnie pobieranego zasobu:
- 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ć. Arkusze stylów blokują renderowanie, dlatego mogą zmniejszyć LCP podczas wstępnego pobierania. 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 tego skryptu znacznie wcześniej, niż gdyby było to wymagane przez sieć podczas nawigacji. Może to mieć wpływ na interakcję z następnym wyrenderowaniem (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. Z kolei renderowanie po stronie klienta 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ęcia układu. Jeśli w przyszłości strona będzie używać pobranej z wyprzedzeniem czcionki, a jej element LCP to blok tekstu z użyciem czcionki internetowej, wartość LCP tego elementu również będzie szybsza.
Wstępne pobieranie fragmentów kodu JavaScript na żądanie
Dzięki dzieleniu kodu pakiety JavaScriptu umożliwiają wstępne wczytywanie tylko części aplikacji, a resztę – leniwie. 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 np. masz stronę zawierającą przycisk otwierający okno z selektorem emotikonów, możesz go podzielić na 3 fragmenty kodu JavaScript – stronę główną, okno i selektor. Strona główna i okno mogły być wstępnie wczytane, a selektor – na żądanie. Narzędzia takie jak webpack pozwalają nakazać przeglądarce wstępne pobieranie tych fragmentów na żądanie.
Jak zaimplementować rel=prefetch
Najprostszym sposobem implementacji funkcji 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: 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
Wskazówka dotycząca pobierania z wyprzedzeniem jest określona w nagłówku HTTP, że przeglądarka nie musi analizować dokumentu w celu znalezienia tej wskazówki, co w niektórych przypadkach może zapewnić niewielkie ulepszenia.
Wstępne pobieranie modułów JavaScript z magicznymi komentarzami pakietu webpack
webpack umożliwia wstępne pobieranie skryptów na potrzeby tras lub funkcji, które użytkownicy mogą wkrótce odwiedzić lub z których będą korzystać.
Ten fragment kodu leniwie wczytuje funkcję sortowania z biblioteki lodash, która pozwala sortować 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 polecenie „submit” ma miejsce zdarzenie wczytywania tej funkcji, możesz pobrać ten zasób z wyprzedzeniem, aby zwiększyć szanse na to, że będą dostępne w pamięci podręcznej, zanim użytkownik prześle formularz. Webpack pozwala na 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) });
});
Dzięki temu pakiet internetowy ma wstrzyknąć tag <link rel="prefetch"> do dokumentu HTML:
<link rel="prefetch" as="script" href="1.bundle.js">
Korzyści w zakresie wydajności z wstępnego pobierania fragmentów na żądanie są nieco inne, ale zasadniczo można się spodziewać szybszych odpowiedzi na interakcje zależne od tych fragmentów na żądanie, ponieważ będą one dostępne od razu. W zależności od charakteru interakcji może to przynieść korzystny wpływ na wartość INP strony.
Ogólnie pobieranie z wyprzedzeniem również uwzględnia ogólne priorytety 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 również zaimplementować inteligentniejsze pobieranie z wyprzedzeniem za pomocą bibliotek, które korzystają z wewnętrznego atrybutu prefetch:
- quicklink używa interfejsu Intersection Observer API, aby wykrywać, 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!
- 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ą obowiązkowymi instrukcjami i to przeglądarka decyduje, czy i kiedy zostaną wykonane.
Możesz użyć tej samej funkcji pobierania z wyprzedzeniem wiele razy. Przeglądarka umieszcza wszystkie wskazówki w kolejce i wysyła żądania każdego zasobu, gdy jest on nieaktywny. Jeśli w Chrome proces pobierania z wyprzedzeniem nie zostanie w pełni dokończony, a użytkownik przejdzie do docelowego zasobu pobierania z wyprzedzeniem, czas wczytywania zostanie pobrany w trakcie odtwarzania przez przeglądarkę (inni dostawcy przeglądarek mogą stosować to rozwiązanie w inny sposób).
Wstępne wczytywanie ma miejsce przy najniższym poziomie priorytet, więc wstępnie pobrane zasoby nie konkurują o przepustowość z zasobami wymaganymi na bieżącej stronie.
Wstępnie pobrane pliki są przechowywane w pamięci podręcznej HTTP lub pamięci podręcznej (w zależności od tego, czy zasób można przechowywać w pamięci podręcznej) przez czas zależny od przeglądarki. Na przykład w Chrome zasoby są przechowywane przez 5 minut. Po upływie tego czasu w ich działaniu obowiązują zwykłe reguły Cache-Control dotyczące zasobu.
Podsumowanie
Korzystanie z prefetch może znacznie skrócić czas wczytywania kolejnych stron nawigacyjnych, a nawet sprawić, że strony będą się wczytywać natychmiast. prefetch jest powszechnie obsługiwany w nowoczesnych przeglądarkach, dzięki czemu jest atrakcyjną metodą usprawniania nawigacji dla wielu użytkowników. Ta metoda wymaga wczytywania dodatkowych bajtów, które mogą nie być używane, więc korzystając z niej, zachowaj ostrożność. robić to tylko w razie potrzeby, najlepiej tylko w szybkich sieciach.