Zoptymalizuj wczytywanie zasobów za pomocą interfejsu Fetch Priority API

Interfejs Fetch Priority API wskazuje względny priorytet zasobów względem przeglądarki. Może umożliwić optymalne ładowanie i ulepszanie podstawowych wskaźników internetowych.

Addy Osmani
Addy Osmani
X GitHub
Leena Sohoni
Leena Sohoni
X
Patrick Meenan
Patrick Meenan
X
Barry Pollard

Obsługa przeglądarek

  • Chrome: 102.
  • Edge: 102.
  • Firefox: funkcja nieobsługiwana.
  • Safari: 17.2

Źródło

Gdy przeglądarka analizuje stronę internetową i zaczyna wykrywać oraz pobierać zasoby, takie jak obrazy, skrypty czy CSS, przypisuje jej pobranie priority, aby pobrać je w optymalnej kolejności. Priorytet zasobu zależy zwykle od jego zawartości i lokalizacji w dokumencie. Na przykład priorytet obrazów w widocznym obszarze może wynosić High, a priorytetu wczesnego wczytywania, blokującego renderowanie CSS, który korzysta z elementów <link> w elemencie <head>, może być Very High. Przeglądarki bardzo dobrze sobie radzą z przypisywaniem priorytetów, które się sprawdzają, jednak nie zawsze są optymalne.

Na tej stronie omówiono interfejs Fetch Priority API i atrybut HTML fetchpriority, które pozwalają wskazać względny priorytet zasobu (high lub low). Priorytet pobierania pomaga zoptymalizować podstawowe wskaźniki internetowe.

Podsumowanie

Priorytet pobierania może pomóc Ci w tych kluczowych obszarach:

  • Zwiększenie priorytetu obrazu LCP przez określenie w elemencie obrazu fetchpriority="high", co powoduje szybsze wystąpienie LCP.
  • Zwiększ priorytet skryptów async, używając lepszej semantyki niż w przypadku obecnie najczęstszego ataku (wstawienie <link rel="preload"> dla skryptu async).
  • Zmniejszenie priorytetu skryptów z późnej części tekstu pozwala na lepszą sekwencjonowanie obrazów.
.
Widok paska zdjęć z porównaniem 2 testów strony głównej Lotów Google. U dołu pole „Fetch Priority” (Priorytet pobierania) zwiększa priorytet obrazu banera powitalnego, co przekłada się na spadek LCP o 0, 7 sekundy.
W teście Lotów Google priorytet pobierania poprawił największe wyrenderowanie treści z 2,6 s do 1,9 s.

W przeszłości deweloperzy mieli ograniczony wpływ na priorytet zasobów przy użyciu wstępnego wczytywania i preconnect. Wstępne wczytywanie umożliwia poinformowanie przeglądarki o kluczowych zasobach, które mają zostać wczytane wcześniej, zanim przeglądarka je wykryje. Jest to szczególnie przydatne w przypadku zasobów, które są trudniejsze do znalezienia, takich jak czcionki umieszczone w arkuszach stylów, obrazy tła lub zasoby wczytywane ze skryptu. Preconnect pomaga rozgrzewać połączenia z serwerami z innych domen i pomaga ulepszać wskaźniki takie jak Czas do pierwszego bajtu. Jest to przydatne, gdy znasz źródło, ale niekoniecznie dokładny adres URL zasobu, który będzie potrzebny.

Priorytet pobierania uzupełnia te wskazówki dotyczące zasobów. Jest to sygnał oparty na znacznikach dostępny w atrybucie fetchpriority, za pomocą którego programiści mogą określić względny priorytet określonego zasobu. Możesz też korzystać z tych wskazówek w języku JavaScript oraz za pomocą interfejsu Fetch API z właściwością priority, by wpływać na priorytet pobierania zasobów dla danych. Priorytet pobierania może również uzupełniać wstępne wczytywanie. Wybierz największy obraz wyrenderowania treści, który po załadowaniu nadal będzie miał niski priorytet. Jeśli są one odrzucane przez inne zasoby o niskim priorytecie, warto użyć opcji Priorytet pobierania, aby przyspieszyć wczytywanie obrazu.

Priorytet zasobu

Sekwencja pobierania zasobów zależy od priorytetu przypisanego do przeglądarki wszystkich zasobach na stronie. Czynniki, które mogą wpływać na obliczanie priorytetu to:

  • Typ zasobu, na przykład CSS, czcionki, skrypty, obrazy i zasoby firm zewnętrznych.
  • Lokalizacja lub kolejność, w której dokument odwołuje się do zasobów.
  • Określa, czy w skryptach są używane atrybuty async lub defer.

W tabeli poniżej pokazujemy, jak Chrome nadaje priorytet większości zasobów i porządkuje je w sekwencje:

  Wczytywanie na etapie blokowania układu Wczytywanie pojedynczo w fazie blokowania układu
Mrugnięcie
Priorytet		 VeryHigh Wysoki Średnie Niski VeryLow
DevTools
Priority		 Najwyższa Wysoki Średnie Niski Najniższa
Główny zasób
CSS (wczesna**) CSS (spóźniony**) CSS (niezgodność multimediów***)
Skrypt (przed czasem** lub nie ze skanera wstępnego wczytywania) Skrypt (spóźnione**) Skrypt (asynchroniczny)
Czcionka Czcionka (rel=preload)
Importuj
Obraz (w widocznym obszarze) Obraz (5 pierwszych obrazów > 10 000 pikseli) Obraz
Multimedia (wideo/audio)
Pobieranie z wyprzedzeniem
XSL
XHR (synchronizacja) XHR/pobieranie* (asynchroniczne)

Przeglądarka pobiera zasoby o tym samym obliczonym priorytecie w kolejności ich wykrycia. Priorytet przypisany do różnych zasobów możesz sprawdzić podczas wczytywania strony na karcie Sieć w Narzędziach deweloperskich w Chrome. Pamiętaj, aby uwzględnić kolumnę priorytet, klikając prawym przyciskiem myszy nagłówki tabeli i zaznaczając ją.

Karta Sieć w Narzędziach deweloperskich w Chrome z listą zasobów czcionek. Wszystkie mają najwyższy priorytet.
Priorytet zasobu type = "font" na stronie szczegółów wiadomości BBC
.
Karta Sieć w Narzędziach deweloperskich w Chrome z listą zasobów czcionek. Stanowią kombinację ustawień o niskim i wysokim priorytecie.
Priorytet zasobu type = "script" na stronie szczegółów wiadomości BBC.

Gdy priorytety się zmieniają, możesz zobaczyć zarówno początkowy, jak i ostateczny priorytet w ustawieniu Wiersze dużych żądań lub w etykietce.

Karta Sieć w Narzędziach deweloperskich w Chrome. „Wiersze dużych żądań” jest zaznaczone, a w kolumnie Priorytet wyświetlany jest pierwszy obraz o priorytecie Wysoki, a inny początkowy – Medium poniżej. To samo jest wyświetlane w etykietce.
Zmiany priorytetów w Narzędziach deweloperskich.

Kiedy możesz potrzebować priorytetu pobierania?

Znasz już zasady ustalania priorytetów w przeglądarce, możesz więc dostosować kolejność pobierania strony, aby zoptymalizować jej wydajność oraz podstawowe wskaźniki internetowe. Oto kilka przykładów rzeczy, które możesz zmienić, aby wpłynąć na priorytet pobierania zasobów:

  • Tagi zasobów, takie jak <script> i <link>, umieść w kolejności, w jakiej przeglądarka może je pobierać. Zasoby o tym samym priorytecie są zwykle ładowane w kolejności wykrycia.
  • Skorzystaj ze wskazówek na temat zasobu preload, aby wcześniej pobrać niezbędne zasoby, szczególnie w przypadku zasobów, które nie są łatwo wykrywane przez przeglądarkę.
  • Użyj async lub defer, aby pobrać skrypty bez blokowania innych zasobów.
  • Leniwe ładowanie treści w części strony widocznej po przewinięciu, dzięki czemu przeglądarka może korzystać z dostępnej przepustowości w przypadku ważniejszych zasobów, które znajdują się w części strony widocznej na ekranie.

Te techniki pomagają kontrolować sposób obliczania priorytetów przeglądarki, co przekłada się na poprawę wydajności i podstawowych wskaźników internetowych. Na przykład gdy krytyczny obraz tła jest wstępnie wczytywany, można go wykryć znacznie wcześniej, co poprawia wartość największego wyrenderowania treści (LCP).

Czasami te nicki mogą nie wystarczyć, aby zoptymalizować zasoby pod kątem aplikacji. Oto kilka scenariuszy, w których może się przydać opcja Priorytet pobierania:

  • Masz kilka obrazów w części strony widocznej na ekranie, ale nie wszystkie powinny mieć ten sam priorytet. Na przykład w karuzeli obrazów tylko pierwszy widoczny obraz potrzebuje wyższego priorytetu, a pozostałe, zwykle poza ekranem, najpierw można nadać niższy priorytet.
  • Obrazy w widocznym obszarze zazwyczaj mają priorytet Low. Po ukończeniu układu Chrome wykrywa, że strona znajduje się w widocznym obszarze, i zwiększa ich priorytet. Powoduje to zwykle znaczne opóźnienie wczytywania krytycznych obrazów, takich jak obrazy banera powitalnego. Podanie priorytetu pobierania w znacznikach umożliwia ładowanie obrazu z priorytetem High i znacznie wcześniej. Aby to nieco zautomatyzować, Chrome ustawi priorytet Medium dla pierwszych 5 dużych obrazów, co w tym pomoże, ale wartość „fetchpriority="high"” będzie jeszcze lepsza.

    Wstępne wczytywanie jest nadal wymagane do wczesnego wykrywania obrazów LCP uwzględnionych jako tła CSS. Aby ulepszyć obrazy tła uwzględnij przy wstępnym wczytaniu wartość fetchpriority='high'.
  • Zadeklarowanie skryptów jako async lub defer informuje przeglądarkę, że ma ładować je asynchronicznie. Jednak jak widać w tabeli priorytetów, skrypty te również mają przypisaną ocenę „Niski”. . Możesz zwiększyć ich priorytet przy jednoczesnym zapewnieniu pobierania asynchronicznego, zwłaszcza w przypadku skryptów mających kluczowe znaczenie dla wygody użytkowników.
  • Jeśli do asynchronicznego pobierania zasobów lub danych używasz interfejsu JavaScript fetch() API, przeglądarka nadaje mu priorytet High. Możesz chcieć, aby niektóre pobierania działały z niższym priorytetem, zwłaszcza jeśli łączysz wywołania interfejsu API w tle z wywołaniami interfejsu API, które reagują na dane wejściowe użytkownika. Priorytetom wywołań interfejsu API w tle ustaw priorytet Low, a interaktywnych wywołań interfejsu API – priorytet High.
  • Przeglądarka nadaje CSS i czcionki priorytet High, ale niektóre z tych zasobów mogą być ważniejsze od innych. Możesz użyć opcji Priorytet pobierania, aby obniżyć priorytet niekrytycznych zasobów (pamiętaj, że wczesny kod CSS blokuje renderowanie, więc jego priorytet powinien mieć zwykle priorytet High).

Atrybut fetchpriority

Użyj atrybutu HTML fetchpriority, aby określić priorytet pobierania typów zasobów, takich jak CSS, czcionki, skrypty i obrazy, pobierane za pomocą tagów link, img lub script. Może przyjmować następujące wartości:

  • high: zasób ma wyższy priorytet i chcesz, aby przeglądarka miała wyższy priorytet niż zwykle, o ile własna heurystyka przeglądarki to nie uniemożliwi.
  • low: zasób ma niższy priorytet i chcesz, by przeglądarka obniżyła jego priorytet, jeśli zezwalają na to ustawienia heurystyczne.
  • auto: wartość domyślna, która pozwala przeglądarce wybrać odpowiedni priorytet.

Oto kilka przykładów użycia atrybutu fetchpriority w znacznikach oraz odpowiadającej mu właściwości priority.

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">

<!-- We want to initiate an early fetch for a resource, but also deprioritize it -->
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">

<script>
  fetch('https://example.com/', {priority: 'low'})
  .then(data => {
    // Trigger a low priority fetch
  });
</script>

Wpływ priorytetu przeglądarki i fetchpriority

Aby zwiększyć lub zmniejszyć obliczony priorytet zasobów, możesz zastosować atrybut fetchpriority do różnych zasobów, jak pokazano w tabeli poniżej. fetchpriority="auto" (◉) w każdym wierszu oznacza domyślny priorytet danego typu zasobu. (dostępne też jako dokument Google).

  Wczytywanie na etapie blokowania układu Wczytywanie pojedynczo w fazie blokowania układu
Mrugnięcie
Priorytet		 VeryHigh Wysoki Średnie Niski VeryLow
DevTools
Priority		 Najwyższa Wysoki Średnie Niski Najniższa
Główny zasób ◉
CSS (wczesna**) ⬆◉ ⬇
CSS (spóźniony**) ⬆ ◉ ⬇
CSS (niezgodność multimediów***) ⬆*** ◉⬇
Skrypt (przed czasem** lub nie ze skanera wstępnego wczytywania) ⬆◉ ⬇
Skrypt (spóźnione**) ⬆ ◉ ⬇
Skrypt (asynchroniczny/odroczony) ⬆ ◉⬇
Czcionka ◉
Czcionka (rel=preload) ⬆◉ ⬇
Importuj ◉
Obraz (w widocznym obszarze – po układzie) ⬆◉ ⬇
Obraz (5 pierwszych obrazów > 10 000 pikseli) ⬆ ◉ ⬇
Obraz ⬆ ◉⬇
Multimedia (wideo/audio) ◉
XHR (synchronizacja) – wycofane ◉
XHR/pobieranie* (asynchroniczne) ⬆◉ ⬇
Pobieranie z wyprzedzeniem ◉
XSL ◉

fetchpriority ustawia względny priorytet, co oznacza, że podnosi lub obniża domyślny priorytet o odpowiednią wartość, zamiast ustawiać go bezpośrednio na High lub Low. Często daje to priorytet High lub Low, ale nie zawsze. Na przykład krytyczny kod CSS z atrybutem fetchpriority="high" zachowuje wartości „bardzo wysokie” i „najwyższe” priorytet, a użycie elementu fetchpriority="low" w przypadku tych elementów zachowa wartość „Wysoki” . Żaden z tych przypadków nie wiąże się z jednoznacznym ustawieniem priorytetu na High lub Low.

Przypadki użycia

Użyj atrybutu fetchpriority, gdy chcesz przekazać przeglądarce dodatkową wskazówkę na temat priorytetu pobierania zasobu.

Zwiększ priorytet obrazu LCP

Możesz użyć wartości fetchpriority="high", aby zwiększyć priorytet LCP lub innych krytycznych obrazów.

<img src="lcp-image.jpg" fetchpriority="high">

Porównanie poniżej pokazuje stronę Lotów Google z obrazem tła LCP wczytanym z priorytetem pobierania i bez niego. Po ustawieniu priorytetu LCP poprawił się z 2,6 s do 1,9 s.

Eksperyment przeprowadzony przy użyciu instancji roboczych Cloudflare w celu przepisywania strony Lotów Google z wykorzystaniem priorytetu pobierania.

Użyj reguły fetchpriority="low", by obniżyć priorytet obrazów w części strony widocznej na ekranie, które nie są istotne od razu, np. obrazów poza ekranem w karuzeli obrazów.

<ul class="carousel">
  <img src="img/carousel-1.jpg" fetchpriority="high">
  <img src="img/carousel-2.jpg" fetchpriority="low">
  <img src="img/carousel-3.jpg" fetchpriority="low">
  <img src="img/carousel-4.jpg" fetchpriority="low">
</ul>

Obrazy 2–4 znajdują się poza widocznym obszarem, ale można je uznać za „wystarczająco bliskie” aby zwiększyć je do high i wczytać nawet po dodaniu atrybutu load=lazy. Dlatego fetchpriority="low" to rozwiązanie odpowiednie w tym przypadku.

We wcześniejszym eksperymencie z aplikacją Oodle wykorzystaliśmy to rozwiązanie, aby obniżyć priorytet obrazów, które nie wyświetlają się po wczytaniu. Czas wczytywania strony skrócił się o 2 sekundy.

Porównanie priorytetu pobierania stosowanego w karuzeli obrazów w aplikacji Oodle. Po lewej stronie przeglądarka ustawia domyślne priorytety obrazów karuzelowych, ale pobiera i maluje te obrazy o około 2 sekundy wolniej niż w przykładzie po prawej stronie, co nadaje wyższy priorytet tylko pierwszemu obrazowi w karuzeli.
Użycie wysokiego priorytetu tylko dla pierwszego obrazu karuzeli pozwala szybciej wczytywać stronę.

Obniż priorytet wstępnie wczytywanych zasobów

Aby zapobiec konkurowaniu wstępnie załadowanych zasobów z innymi zasobami krytycznymi, możesz zmniejszyć ich priorytet. Ta metoda jest stosowana w przypadku obrazów, skryptów i CSS.

<!-- Lower priority only for non-critical preloaded scripts -->
<link rel="preload" as="script" href="critical-script.js">
<link rel="preload" as="script" href="non-critical-script.js" fetchpriority="low">

<!-- Preload CSS without blocking render, or other resources -->
<link rel="preload" as="style" href="theme.css" fetchpriority="low" onload="this.rel='stylesheet'">

Zmień priorytet skryptów

Skrypty, które powinny być interaktywne, powinny szybko się ładować, ale nie powinny blokować innych, ważniejszych zasobów blokujących renderowanie. Możesz je oznaczyć jako async z wysokim priorytetem.

<script src="async_but_important.js" async fetchpriority="high"></script>

Nie możesz oznaczyć skryptu jako async, jeśli wymaga on określonych stanów DOM. Jeśli jednak zostaną uruchomione później na stronie, możesz je załadować z niższym priorytetem:

<script src="blocking_but_unimportant.js" fetchpriority="low"></script>

Spowoduje to zablokowanie parsera po dotarciu do tego skryptu, ale umożliwi priorytetowe traktowanie treści znajdujących się wcześniej w tym skrypcie.

Jeśli potrzebny jest pełny DOM, możesz użyć atrybutu defer (który uruchamia się w odpowiedniej kolejności po elemencie DOMContentLoaded), a nawet async na dole strony.

Obniż priorytet pobierania danych, które nie są krytyczne

Przeglądarka wykonuje polecenie fetch z wysokim priorytetem. Jeśli masz wiele pobrań, które mogą być uruchamiane jednocześnie, możesz ustawić wysoki priorytet dla ważniejszych pobrań danych, a obniżony priorytet dla mniej ważnych danych.

// Important validation data (high by default)
let authenticate = await fetch('/user');

// Less important content data (suggested low)
let suggestedContent = await fetch('/content/suggested', {priority: 'low'});

Uwagi o implementacji priorytetu pobierania

Priorytet pobierania może zwiększyć wydajność w określonych przypadkach, ale podczas korzystania z tego priorytetu należy pamiętać o kilku kwestiach:

  • Atrybut fetchpriority to wskazówka, a nie dyrektywa. Przeglądarka stara się przestrzegać preferencji dewelopera, ale może też zastosować swoje preferencje dotyczące priorytetu zasobów w celu rozwiązywania konfliktów.

  • Nie należy mylić opcji Priorytet pobierania z wstępnym wczytywaniem:

    • Wstępne wczytywanie to obowiązkowe pobieranie, a nie wskazówka.
    • Wstępne wczytywanie umożliwia przeglądarce wykrycie zasobu wcześniej, ale pobiera go z domyślnym priorytetem. I odwrotnie, opcja Priorytet pobierania nie pomaga w wykrywalności, ale pozwala zwiększyć lub zmniejszyć priorytet pobierania.
    • Często łatwiej jest obserwować i mierzyć efekty wstępnego wczytywania niż skutki zmiany priorytetu.

    Priorytet pobierania może uzupełniać wstępne załadowania przez zwiększenie szczegółowości określania priorytetów. Jeśli określisz już wstępne wczytywanie jako jeden z pierwszych elementów obrazu LCP w polu <head>, priorytet pobierania high może nie poprawić znacznie LCP. Jeśli jednak wstępne wczytywanie ma miejsce po wczytaniu innych zasobów, priorytet pobierania high może jeszcze bardziej poprawić LCP. Jeśli obraz o znaczeniu krytycznym jest obrazem tła CSS, wstępnie wczytaj go za pomocą elementu fetchpriority = "high".

  • Skrócenie czasu wczytywania wynikające z ustalania priorytetów sprawdza się lepiej w środowiskach, w których więcej zasobów rywalizuje o dostępną przepustowość sieci. Jest to typowe w przypadku połączeń HTTP/1.x, w przypadku których nie jest możliwe równoległe pobieranie, lub w przypadku połączeń HTTP/2 lub HTTP/3 o niskiej przepustowości. W takich przypadkach określenie priorytetów może pomóc w rozwiązaniu problemu wąskiego gardła.

  • Sieci CDN nie wdrażają priorytetów HTTP/2 w taki sam sposób, jak w przypadku HTTP/3. Nawet jeśli przeglądarka przekazuje priorytet pobierania z priorytetu pobierania, CDN może nie zmienić priorytetu zasobów w podanej kolejności. Utrudnia to testowanie opcji Fetch Priority (Priorytet pobierania). Priorytety są stosowane zarówno wewnętrznie w przeglądarce, jak i w przypadku protokołów, które obsługują priorytety (HTTP/2 i HTTP/3). Warto używać tego ustawienia tylko na potrzeby wewnętrznego określania priorytetów przeglądarki niezależnie od obsługi sieci CDN i punktu początkowego, ponieważ priorytety często się zmieniają, gdy przeglądarka żąda zasobów. Na przykład żądania zasobów o niskim priorytecie, takich jak obrazy, są często wstrzymywane, gdy przeglądarka przetwarza kluczowe elementy <head>.

  • Wprowadzenie opcji Priorytet pobierania jako sprawdzonej metody na początkowym etapie może być niemożliwe. W dalszej części cyklu programowania możesz przypisać priorytety różnym zasobom na stronie. Jeśli nie spełnią one Twoich oczekiwań, możesz użyć opcji Priorytet pobierania, aby przeprowadzić dalszą optymalizację.

Deweloperzy powinni używać wstępnego wczytywania do zamierzonego celu, czyli do wstępnego wczytywania zasobów, których nie wykryto przez parser (czcionki, importy, obrazy LCP tła). Umiejscowienie podpowiedzi preload ma wpływ na to, kiedy zasób będzie wstępnie wczytywany.

Priorytet pobierania określa, w jaki sposób zasób powinien zostać pobrany.

Wskazówki dotyczące korzystania z wstępnych wczytywań

Podczas korzystania z wstępnych wczytywań pamiętaj o tych kwestiach:

  • Uwzględnienie wstępnego wczytywania w nagłówkach HTTP powoduje umieszczenie go przed wszystkimi innymi elementami w kolejności wczytywania.
  • Ogólnie rzecz biorąc, wczytywanie jest wstępnie wczytywane w takiej kolejności, w jakiej parser dociera do niego w przypadku dowolnych treści o priorytecie Medium lub wyższym. Zachowaj ostrożność, jeśli na początku kodu HTML dodajesz wstępne wczytywanie.
  • Wstępne wczytywanie czcionek najlepiej sprawdza się na początku lub na końcu głowy.
  • Wstępne wczytywanie importu (dynamiczne import() lub modulepreload) powinno być uruchamiane po tagu skryptu, który wymaga importu, dlatego najpierw upewnij się, że skrypt został wczytany lub przeanalizowany, aby można go było ocenić podczas wczytywania zależności.
  • Wstępne wczytywanie obrazów ma domyślnie priorytet Low lub Medium. Uporządkuj je według skryptów asynchronicznych oraz innych tagów o niskim lub najniższym priorytecie.

Historia

Priorytet pobierania został po raz pierwszy przetestowany w Chrome w ramach testowania origin w 2018 roku, a potem ponownie w 2021 roku przy użyciu atrybutu importance. W tym czasie nazwa ta nosiła nazwę Priority Hints (Wskazówki priorytetowe). Interfejs ten został zmieniony na fetchpriority w przypadku kodu HTML i priority dla JavaScriptu Fetch API w ramach procesu standardów internetowych. Aby uniknąć nieporozumień, nazywamy ten interfejs API „Priorytetem pobierania”.

Podsumowanie

Priorytet pobierania może być zainteresowany poprawką działania wstępnego wczytywania i niedawną koncentracją na podstawowych wskaźnikach internetowych i LCP. Mają teraz do dyspozycji dodatkowe elementy sterujące, które pozwalają osiągnąć preferowaną sekwencję wczytywania.