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

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

Demián Renzulli

Jeremy Wagner

Data publikacji: 12 września 2019 r., ostatnia aktualizacja: 8 lutego 2025 r.

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>, który umożliwia skuteczne wstępne pobieranie.

Zwiększanie wydajności witryny za pomocą rel=prefetch

Dodanie <link rel=prefetch> do strony internetowej powoduje, że przeglądarka pobiera niektóre zasoby (np. skrypty lub pliki CSS), których użytkownik może potrzebować w przyszłości:

<link rel="prefetch" href="/css/styles.css">

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.

Przypadki użycia

Wstępne pobieranie ma wiele zastosowań, które pozwalają przyspieszyć wczytywanie stron internetowych dzięki wcześniejszemu pobieraniu zasobów.

Wstępnie pobieraj kolejne strony

pobieranie w poprzedniości dokumentów HTML, gdy kolejne strony są przewidywalne, dzięki czemu po kliknięciu linku strona wczytuje się natychmiast;

Uwaga: interfejs Speculation Rules API oferuje kilka zalet w porównaniu z wstępnym pobieraniem w przypadku nawigacji w przeglądarkach obsługujących ten interfejs API, w tym obsługę nawigacji, której nie można zapisać w pamięci podręcznej i spójne pobieranie wstępne w różnych domenach.

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 zakupów prawdopodobieństwo, że użytkownik odwiedzi stronę płatności, jest zwykle wysokie, co czyni ją dobrym kandydatem do wstępnego pobierania.

Uwaga: eBay wdrożył wstępny odczyt dla pierwszych 5 wyników na stronie wyszukiwania, aby przyspieszyć wczytywanie kolejnych stron. Dzięki temu udało się pozytywnie wpłynąć na współczynniki konwersji.

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ępne zasobów statycznych

Pobieranie w poprzednim etapie zasobów statycznych, takich jak skrypty czy arkusze stylów, gdy można przewidzieć, które kolejne 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, który użytkownicy spędzają na stronach logowania, 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.

W momencie pisania tego artykułu można udostępniać zasobów z zaproszeniem w ramach stron pochodzących z różnych źródeł. Gdy pamięć podręczna HTTP z podwójnym kluczem zostanie udostępniona, będzie działać tylko w przypadku nawigacji na najwyższym poziomie i zasobów podrzędnych w tej samej domenie, ale nie będzie można ponownie użyć zasobów podrzędnych wyprzedzających się w różnych domenach. Oznacza to, że jeśli a.com pobiera zasobów w ramach wstępnego pobierania, zasób b.com/library.js nie będzie dostępny w pamięci podręcznej c.com. Niektóre przeglądarki, np. oparte na WebKit, już partycjonują pamięć podręczną i miejsce na dane w HTML5 dla wszystkich domen innych firm.

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 obrazów 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 arkuszy stylów, mogą zmniejszyć LCP, gdy są pobierane z wyprzedzeniem. Jeśli element LCP na następnej stronie to obraz tła w CSS wczytywany za pomocą właściwości background-image, obraz zostanie też wstępnie wczytany jako zasób zależny od wstępnie wczytanej sekcji stylów.
• Dzięki pobieraniu wstępnemu skryptu JavaScript przetwarzanie skryptu pobieranego wstępnie nastąpi znacznie szybciej niż w przypadku pobierania go 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 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 również będzie szybszy.

Pobieranie wstępnie fragmentów kodu JavaScript na żądanie

Dzielenie kodu w pakietach JavaScriptu pozwala początkowo wczytać tylko części aplikacji, a pozostałe wczytywać w tylu, gdy są potrzebne. 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ę zawierającą przycisk, który otwiera okno z selektorem emotikonów, możesz podzielić ją na 3 elementy JavaScriptu: stronę główną, okno 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 poprzednim czasie.

Jak wdrożyć rel=prefetch

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

<head>
  ...
  <link rel="prefetch" href="//css/styles.css">
  ...
</head>

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.

Uwaga: prefetch jest obsługiwana we wszystkich nowoczesnych przeglądarkach z wyjątkiem Safari. W Safari możesz zastosować technikę zapasową z użyciem żądań XHR lub interfejsu Fetch API.

Wstępne pobieranie modułów JavaScript za pomocą magicznych komentarzy webpacka

webpack umożliwia pobieranie wstępnie 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 z wyprzedzeniem pobrać ten zasób, aby zwiększyć szansę 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" 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. W przypadku załadowania zasobów z zapasem priorytet jest najniższy. Dzięki temu wszystkie zainstalowane wstępnie zasoby nie będą konkurować o przepustowość z zasobami potrzebnymi do bieżącej strony.

Inteligentne pobieranie wstępne za pomocą quicklink i Guess.js

Możesz też zaimplementować inteligentniejsze pobieranie w tle 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 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 wstępnego, jeśli użytkownik korzysta z wolnej sieci lub ma włączone Save-Data.

Wstępne pobieranie

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 za nawigację (inne przeglądarki mogą implementować to inaczej).

Wstępna instalacja zasobów odbywa się z priorytetem „Najniższy”, dzięki czemu zainstalowane wstępnie zasoby nie konkurują o przepustowość z zasobami wymaganymi na bieżącej stronie.

Pliki pobrane w poprzedniości są przechowywane w pamięci podręcznej HTTP, jeśli zasób można przechowywać w pamięci podręcznej. W przeciwnym razie zostanie on odrzucony i nie zostanie użyty.

Podsumowanie

Korzystanie z elementu prefetch może znacznie poprawić wydajność witryny, ponieważ zasoby potrzebne w przyszłości są pobierane z wyprzedzeniem. prefetch jest obsługiwany w większości nowoczesnych przeglądarek. 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 tylko w przypadku szybkich sieci.