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

Dowiedz się więcej o wskazówce dotyczącej zasobów rel=prefetch i o tym, jak jej używać.

Demián Renzulli
Demián Renzulli
Jeremy Wagner
Jeremy Wagner

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> – wskazówki dotyczącej zasobów, która pozwala łatwo i efektywnie wdrożyć pobieranie z wyprzedzeniem.

Ulepsz nawigację dzięki 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">

Schemat pokazujący działanie wstępnego pobierania linków.

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.

Istnieją różne sposoby określenia, które linki mają być pobierane z wyprzedzeniem. 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ę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.

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ż 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.

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, 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:

  • 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.
  • Dzięki pobieraniu wstępnemu skryptu JavaScript przetwarzanie skryptu pobieranego wstępnie 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ć przesunięcia układu. W przypadku użycia elementu font-display: swap; okres wymiany czcionki jest pomijany, co powoduje szybsze renderowanie tekstu i brak 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

Pakiety JavaScript dzielą kod, dzięki czemu możesz wstępnie wczytywać tylko część aplikacji, a pozostałe ładować leniwie. Jeśli korzystasz z tej techniki, możesz stosować funkcję pobierania w poprzedniości do tras lub komponentów, które nie są potrzebne od razu, ale prawdopodobnie będą potrzebne w najbliższym czasie.

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: 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.

Wstępne pobieranie modułów JavaScript z magicznymi komentarzami pakietu webpack

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 pobierany w ramach wstępnego pobierania, 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ę.

Możesz też zaimplementować inteligentniejsze pobieranie wstępne za pomocą bibliotek, które korzystają z funkcji prefetch:

Zarówno quicklink, jak i Guess.js korzystają z interfejsu Network Information API, aby uniknąć pobierania wstępnego, 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.

W ramach tej samej strony możesz korzystać z wstępnego pobierania wielokrotnie. Podczas bezczynności przeglądarka umieszcza wszystkie wskazówki w kolejce i wysyła żądania dotyczące każdego zasobu. 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ę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 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 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.