Interfejs Fetch Priority API wskazuje względny priorytet zasobów dla przeglądarki. Może umożliwić optymalne wczytywanie i poprawić podstawowe wskaźniki internetowe.
Gdy przeglądarka analizuje stronę internetową i zaczyna odkrywać oraz pobierać zasoby, takie jak obrazy, skrypty czy CSS, przypisuje im atrybut priority pobierania, aby pobrać zasoby w optymalnej kolejności. Priorytety mogą zależeć od rodzaju zasobu i umiejscowienia go w dokumencie. Na przykład obrazy widoczne w widocznym obszarze mogą mieć priorytet High, natomiast w interfejsie <head> priorytety CSS wczesnego wczytywania blokującego renderowanie przez dyrektywy <link> mogą mieć priorytet Very High. Przeglądarki dość dobrze potrafią przypisywać priorytety, które działają poprawnie, ale nie zawsze są optymalne.
W tym artykule omówimy interfejs Fetch Priority API i atrybut HTML fetchpriority, które umożliwiają wskazywanie względnego priorytetu zasobu (high lub low). Priorytet pobierania może pomóc w optymalizacji podstawowych wskaźników internetowych.
Podsumowanie
Oto kilka najważniejszych kwestii, w których może pomóc priorytet pobierania:
- Aby zwiększyć priorytet obrazu LCP, określ w elemencie obrazu
fetchpriority="high". Spowoduje to szybsze wywołanie LCP. - Zwiększ priorytet skryptów
async, używając lepszej semantyki niż ten, który obecnie jest często używany (wstawienie<link rel="preload">do skryptuasync). - Obniż priorytet skryptów z późnej treści, aby umożliwić lepszą sekwencjonowanie obrazów.
W przeszłości deweloperzy mieli pewien, choć ograniczony wpływ na priorytet zasobów, używając funkcji wstępnego ładowania i wstępnego łączenia. Priorytet pobierania stanowi uzupełnienie tych wskazówek dotyczących zasobów, ale kluczowe jest zrozumienie, gdzie się one znajdują. Wstępne wczytywanie pozwala poinformować przeglądarkę o kluczowych zasobach, które chcesz załadować, zanim zostaną wykryte naturalnie. Jest to szczególnie przydatne w przypadku zasobów, które nie są łatwo wykrywalne, takich jak czcionki uwzględnione w arkuszach stylów, obrazy tła czy zasoby wczytywane ze skryptu. Takie połączenie pomaga rozgrzewać połączenia z serwerami z innych domen i poprawia wskaźniki takie jak Time-to-first-byte. Jest przydatne, gdy znasz źródło, ale niekoniecznie dokładny adres URL potrzebnego zasobu.
Priorytet pobierania to sygnał oparty na znacznikach (dostępny w atrybucie fetchpriority), którego deweloperzy mogą używać do określania względnego priorytetu konkretnego zasobu. Możesz też korzystać z tych wskazówek za pomocą JavaScriptu i interfejsu Fetch API z właściwością priority, aby wpływać na priorytet pobierania zasobów dla danych. Priorytet pobierania może też uzupełniać wstępne wczytywanie. Użyj obrazu największego wyrenderowania treści, który po wstępnie wczytywanym wciąż ma niski priorytet. Jeśli zostanie ona odsunięta przez inne zasoby o niskim priorytecie, użycie priorytetu pobierania może pomóc w szybkim załadowaniu obrazu.
Priorytet pobierania jest dostępny w Chrome 101 i nowszych wersjach.
Priorytet zasobu
Sekwencja pobierania zasobów zależy od priorytetu przypisanego przez przeglądarkę do każdego zasobu na stronie. Na logikę obliczania priorytetu mogą mieć wpływ różne czynniki. Przykład:
- CSS, czcionki, skrypty, obrazy i zasoby firm zewnętrznych mają różne priorytety.
- Lokalizacja lub kolejność odwoływania się do zasobów w dokumencie również wpływa na priorytet zasobów.
- Wskazówka dotycząca zasobu
preloadpomaga przeglądarce szybciej wykryć zasób i załadować go przed załadowaniem dokumentu, a tym samym wpłynąć na jego priorytet. - Zmiany priorytetu obliczania skryptów w skryptach
asynclubdefer.
W poniższej tabeli uwzględniono te czynniki, aby pokazać, jak większość zasobów ma obecnie priorytet i sekwencje w Chrome.
| Wczytywanie na etapie blokowania układu | Ładuj pojedynczo na etapie blokowania układu | ||||
|---|---|---|---|---|---|
| Mrugnięcie priorytet |
VeryHigh | Wysoki | Medium | Niski | VeryLow |
| Narzędzia deweloperskie Priorytet |
Najwyższy | Wysoki | Medium | Niski | Najniższa wartość |
| Główny zasób | |||||
| CSS (wczesna**) | CSS (opóźniony**) | CSS (niezgodność multimediów***) | |||
| Skrypt (przed czasem** lub ze skanera wstępnego wczytywania) | Skrypt (opóźniony**) | Skrypt (asynchroniczny) | |||
| Czcionka | Czcionka (rel=preload) | ||||
| Importuj | |||||
| Obraz (w widocznym obszarze) | Obraz (pierwsze 5 obrazów > 10 000 pikseli2) | Obraz | |||
| Multimedia | |||||
| Dokument SVG | |||||
| Pobieranie z wyprzedzeniem | |||||
| Kod XSL | |||||
| XHR (synchronizacja) | XHR/pobieranie* (asynchroniczne) | ||||
Przeglądarka pobiera zasoby o tym samym obliczonym priorytecie w kolejności, w jakiej są wykrywane. Priorytety przypisane 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ę priorytetu, klikając nagłówki tabeli prawym przyciskiem myszy).
type = "font" na stronie z informacjami o wiadomościach BBC
W przypadku zmiany priorytetów możesz użyć ustawienia Wiersze dużych żądań, aby wyświetlić zarówno początkowy, jak i końcowy priorytet. To samo wyświetla się w etykietce niezależnie od ustawienia Duże wiersze żądania.
Kiedy ma być potrzebny priorytet pobierania?
Znajomość logiki ustalania priorytetów w przeglądarce pozwoli Ci korzystać z kilku dotychczasowych gałek do zmiany kolejności pobieranych plików. Możesz
- Umieść tagi zasobów, takie jak
<script>i<link>, w zależności od kolejności, w jakiej chcesz je pobrać. Zasoby o tym samym priorytecie są zwykle ładowane w kolejności, w jakiej są wykrywane. - Skorzystaj ze wskazówki dotyczącej zasobów
preload, aby wcześniej pobrać niezbędne zasoby, zwłaszcza w przypadku zasobów, które nie są łatwo wykrywane przez przeglądarkę. - Używaj
asynclubdefer, aby pobierać skrypty bez blokowania innych zasobów. - Leniwe ładowanie treści w części strony widocznej na ekranie, tak aby przeglądarka mogła wykorzystać dostępną przepustowość do obsługi bardziej newralgicznych zasobów w części strony widocznej na ekranie.
Te techniki pomagają kontrolować priorytet przetwarzania danych w przeglądarce, co przekłada się na poprawę wydajności i poprawę podstawowych wskaźników internetowych. Jeśli na przykład wstępnie wczytywany jest krytyczny obraz tła, można go wykryć znacznie wcześniej, co poprawia wskaźnik największego wyrenderowania treści (LCP).
Czasami te nicki mogą nie wystarczyć do określenia optymalnego priorytetu zasobów pod kątem aplikacji. Oto kilka scenariuszy, w których może pomóc priorytet pobierania:
- Masz kilka obrazów w części strony widocznej na ekranie, ale nie wszystkie muszą mieć taki sam priorytet. Na przykład w karuzeli obrazów tylko pierwszy widoczny obraz musi mieć wyższy priorytet niż pozostałe.
- Obrazy powitalne w widocznym obszarze mają zwykle „niski” priorytet (zwróć uwagę, że w Chrome 117 zmiana ustawienia pierwszych 5 dużych obrazów na „Średni”, ale może, ale nie musi, zawierać baner powitalny). Po utworzeniu układu Chrome odkrywa, że te elementy znajdują się w widocznym obszarze, i zwiększa ich priorytet. Powoduje to zwykle znaczne opóźnienie wczytywania obrazu. Jeśli określisz priorytet pobierania w znacznikach, obraz będzie miał priorytet „Wysoki” i zacznie się ładować dużo wcześniej.
Pamiętaj, że wstępne wczytywanie jest wymagane w przypadku wczesnego wykrywania obrazów LCP zawartych jako tła CSS. Można je połączyć z priorytetem pobierania, dodającfetchpriority='high'podczas wstępnego wczytywania. W przeciwnym razie obrazy zaczynają się od priorytetu „Niski” lub „Średni”. - Zadeklarowanie skryptów jako
asynclubdeferinformuje przeglądarkę, że ma być ładowane asynchronicznie. Jednak jak widać w poprzedniej tabeli, te skrypty również mają przypisany „Niski” priorytet. Możesz zwiększyć ich priorytet przy jednoczesnym zapewnieniu pobierania asynchronicznego, szczególnie w przypadku skryptów, które mają kluczowe znaczenie dla wygody użytkowników. - Aby asynchronicznie pobierać zasoby lub dane, możesz użyć interfejsu JavaScript API
fetch(). Pobieranie ma priorytet „Wysoki” przez przeglądarkę. W pewnych sytuacjach możesz nie chcieć, aby wszystkie pobierania były wykonywane z „Wysokim” priorytetem i zamiast tego wolisz używać innego priorytetu pobierania. Może to być przydatne, gdy uruchamiasz w tle wywołania interfejsu API i mieszasz je z wywołaniami interfejsu API, które odpowiadają na dane wejściowe użytkownika, np. w ramach autouzupełniania. Wywołania interfejsu API działające w tle można oznaczyć jako „Niski”, a interaktywne wywołania interfejsu API – jako „Wysoki”. - Przeglądarka przypisuje CSS i czcionce „wysoki” priorytet, ale niektóre z tych zasobów mogą nie być tak samo ważne lub wymagane w przypadku LCP. Priorytet pobierania pozwala obniżyć priorytet niektórych z tych zasobów.
Atrybut fetchpriority
Priorytet pobierania możesz podać w atrybucie HTML fetchpriority. Możesz używać tego atrybutu z tagami link, img i script. Umożliwia on określenie priorytetu zasobów takich jak CSS, czcionki, skrypty i obrazy, jeśli pobiera się je za pomocą obsługiwanych tagów.
Atrybut fetchpriority może mieć jedną z 3 wartości:
high: zasoby są uznawane za wysoki priorytet i chcesz, aby przeglądarka nadawała mu wysoki priorytet, o ile nie zabrania tego heurystyka przeglądarki.low: uznajesz zasób za niski i chcesz, by przeglądarka obniżyła go, jeśli pozwala na to sposób heurystyki.auto: jest to wartość domyślna, przy której nie masz żadnych preferencji, a przeglądarka decyduje o właściwym priorytecie.
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>
Priorytet przeglądarki i fetchpriority
Jak widać na ilustracji poniżej, możesz zastosować atrybut fetchpriority do różnych zasobów, aby potencjalnie zwiększyć lub zmniejszyć ich obliczony priorytet. fetchpriority="auto" (◉) w każdym wierszu oznacza domyślny priorytet danego typu zasobu (dostępnego też jako dokument Google).
| Wczytywanie na etapie blokowania układu | Ładuj pojedynczo na etapie blokowania układu | ||||
|---|---|---|---|---|---|
| Mrugnięcie priorytet |
VeryHigh | Wysoki | Medium | Niski | VeryLow |
| Narzędzia deweloperskie Priorytet |
Najwyższy | Wysoki | Medium | Niski | Najniższa wartość |
| Główny zasób | ◉ | ||||
| CSS (wczesna**) | ⬆◉ | ⬇ | |||
| CSS (opóźniony**) | ⬆ | ◉ | ⬇ | ||
| CSS (niezgodność multimediów***) | ⬆*** | ◉⬇ | |||
| Skrypt (przed czasem** lub ze skanera wstępnego wczytywania) | ⬆◉ | ⬇ | |||
| Skrypt (opóźniony**) | ⬆ | ◉ | ⬇ | ||
| Skrypt (asynchroniczny/opóźniony) | ⬆ | ◉⬇ | |||
| Czcionka | ◉ | ||||
| Czcionka (rel=preload) | ⬆◉ | ⬇ | |||
| Importuj | ◉ | ||||
| Obraz (w widocznym obszarze – po układzie) | ⬆◉ | ⬇ | |||
| Obraz (pierwsze 5 obrazów > 10 000 pikseli2) | ⬆ | ◉ | ⬇ | ||
| Obraz | ⬆ | ◉⬇ | |||
| Multimedia (wideo/dźwięk) | ⬆ | ◉⬇ | |||
| Dokument SVG | ⬆ | ◉⬇ | |||
| XHR (sync) – wycofane | ◉ | ||||
| XHR/pobieranie* (asynchroniczne) | ⬆◉ | ⬇ | |||
| Pobieranie z wyprzedzeniem | ◉ | ||||
| Kod XSL | ◉ | ||||
Pamiętaj, że fetchpriority umożliwia ustawienie względnego priorytetu, co oznacza, że podnosi lub obniża priorytet o odpowiednią wartość (zamiast bezpośrednio ustawiać go na „Wysoki” lub „Niski”), a przeglądarka decyduje o tym względnym. Często jest to „Wysoki” lub „Niski”, ale nie zawsze. Na przykład krytyczny kod CSS z elementem fetchpriority="high" wciąż zachowuje priorytet „Bardzo wysoki”/„Najwyższy”, a użycie fetchpriority="low" wciąż zachowuje priorytet „Wysoki” – w żadnym z tych przypadków priorytet nie jest bezpośrednio ustawiony jako „Wysoki” lub „Niski”.
Przykłady zastosowań
Możesz użyć atrybutu fetchpriority w sytuacjach, w których możesz podać przeglądarce dodatkową wskazówkę dotyczącą priorytetu pobierania zasobu.
Zwiększ priorytet obrazu LCP
Możesz użyć ustawienia fetchpriority="high", aby zwiększyć priorytet LCP lub innych obrazów o znaczeniu krytycznym.
<img src="lcp-image.jpg" fetchpriority="high">
Porównanie poniżej przedstawia stronę Lotów Google z obrazem tła LCP wczytywanym z priorytetem pobierania i bez niego. Przy ustawionym wysokim priorytecie LCP poprawiło się z 2,6 s do 1,9 s.
Obniż priorytet obrazów w części strony widocznej na ekranie
Używając elementu fetchpriority="low", możesz obniżyć priorytet obrazów w części strony widocznej na ekranie, które na początku nie są ważne, np. 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>
We wcześniejszym eksperymencie z aplikacją Oodle używaliśmy tej funkcji do obniżania priorytetu obrazów, które nie wyświetlają się po wczytaniu. Pomogło skrócić czas wczytywania o 2 sekundy.
Obniż priorytet wstępnie wczytywanych zasobów
Aby zapobiec konkurowaniu wstępnie wczytywanych zasobów z innymi zasobami krytycznymi, możesz podać wskazówkę dotyczącą obniżenia ich priorytetu. Tej techniki możesz używać w przypadku obrazów, skryptów i kodu CSS.
<!-- Lower priority only for non-critical preloaded scripts -->
<link rel="preload" as="script" href="critical-script.js">
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">
<!-- Preload CSS without blocking other resources -->
<link rel="preload" as="style" href="theme.css" fetchpriority="low" onload="this.rel='stylesheet'">
Zmień priorytet skryptów
Skrypty wymagane do uaktywnienia niektórych części strony są niezbędne, ale nie powinny blokować innych zasobów. Możesz je oznaczyć jako asynchroniczne z wysokim priorytetem.
<script src="async_but_important.js" async fetchpriority="high"></script>
Skryptów nie można oznaczyć jako asynchronicznych, jeśli bazują na konkretnych stanach DOM. Jeśli jednak znajdują się niżej na stronie, mogą zostać pobrane z niższym priorytetem (jak na ilustracji).
<script src="blocking_but_unimportant.js" fetchpriority="low"></script>
Obniż priorytet pobierania danych o znaczeniu niekrytycznym
Przeglądarka wykonuje polecenie fetch z wysokim priorytetem. Jeśli masz wiele pobrań, które mogą być uruchamiane jednocześnie, możesz użyć wysokiego priorytetu pobierania bardziej krytycznych danych i obniżyć go dla danych mniej ważnych.
// 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'});
Pobierz uwagi o implementacji priorytetu pobierania
Priorytet pobierania może zwiększyć wydajność w określonych przypadkach użycia, co zostało omówione powyżej. Pamiętaj o tych kwestiach:
- Atrybut
fetchpriorityjest wskazówką, a nie dyrektywą. Przeglądarka będzie starała się uwzględnić to ustawienie. Przeglądarka może też zastosować swoje preferencje dotyczące priorytetu zasobów w razie potrzeby w przypadku konfliktów. Priorytetu pobierania nie należy mylić ze wstępnym wczytywaniem. Różni się one, ponieważ:
- Wstępne wczytywanie to obowiązkowe, a nie podpowiedź.
- Wstępne wczytywanie umożliwia przeglądarce wcześniejsze wykrycie zasobu, ale nadal będzie pobierać go z domyślnym priorytetem. I na odwrót – priorytet pobierania nie ułatwia wykrywania, ale pozwala zwiększyć lub zmniejszyć priorytet pobierania.
- Łatwiejsze jest obserwowanie i mierzenie efektów wstępnego wczytywania.
Priorytet pobierania może uzupełniać wczytywanie wstępne przez zwiększenie szczegółowości określania priorytetów. Jeśli jako jeden z pierwszych elementów w metodzie
<head>określono już wstępne wczytywanie obrazu LCP, priorytet pobieraniahighmoże nie przynieść znaczącej poprawy. Jeśli jednak wstępne wczytywanie nastąpiło po innych zasobach, priorytet pobieraniahighmoże poprawić LCP. Jeśli krytyczny obraz jest obrazem tła CSS, należy go wstępnie wczytywać za pomocą funkcjifetchpriority = "high".Zauważalne korzyści wynikające z ustalania priorytetów będą miały większe znaczenie w środowiskach, w których o dostępną przepustowość sieci rywalizuje więcej zasobów. Jest to częste w przypadku połączeń HTTP/1.x, w przypadku których nie można pobierać równoległego lub które korzystają z połączenia HTTP/2 o niskiej przepustowości. Ustalenie priorytetów może rozwiązać problemy z wąskimi gardłami w tych warunkach.
Sieci CDN nie implementują jednak priorytetu HTTP/2. Nawet jeśli przeglądarka przekaże sugerowany priorytet za pomocą priorytetu pobierania, sieć CDN może nie ustalać priorytetów zasobów w wymaganej kolejności. Utrudnia to testowanie priorytetu pobierania. Priorytety są stosowane zarówno wewnętrznie w przeglądarce, jak i w protokołach obsługujących określanie priorytetów (HTTP/2 i HTTP/3). W dalszym ciągu warto korzystać z tej opcji nawet do wewnętrznego określania priorytetów przeglądarki niezależnie od obsługi sieci CDN i pierwotnej witryny, ponieważ często zmienia się to, gdy przeglądarka wysyła żądanie zasobów – na przykład żądania zasobów o niskim priorytecie, np. obrazów, są często wstrzymywane, gdy przeglądarka przetwarza kluczowe elementy
<head>.Wprowadzenie priorytetu pobierania jako sprawdzonej metody na początkowym projekcie może nie być możliwe. Jest to optymalizacja, którą możesz zastosować na późniejszym etapie cyklu programowania. Możesz sprawdzić priorytety przypisywane do różnych zasobów na stronie, a jeśli nie odpowiadają Twoim oczekiwaniom, możesz wprowadzić priorytet pobierania w celu dalszej optymalizacji.
Korzystanie z wstępnego wczytywania po Chrome 95
Funkcja priorytetu pobierania była dostępna w wersji próbnej w Chrome od wersji 73 do 76, ale nie została udostępniona z powodu problemów z priorytetami w działaniu Chrome 95. W wersjach starszych niż Chrome 95 żądania wysyłane przez <link rel=preload> zawsze rozpoczynają się przed innymi żądaniami zauważonymi przez skaner wstępnego wczytywania, nawet jeśli inne żądania mają wyższy priorytet.
Mamy nadzieję, że po wprowadzeniu poprawki w Chrome 95 i ulepszeniu priorytetu pobierania mamy nadzieję, że deweloperzy zaczną używać wstępnego wczytywania do zamierzonego celu – do wstępnego wczytywania zasobów niewykrytych przez parser (czcionek, importu, obrazów LCP w tle). Umiejscowienie wskazówki preload będzie miało wpływ na to, kiedy zasób będzie wstępnie wczytywany. Oto kilka najważniejszych kwestii dotyczących wstępnego wczytywania:
- Uwzględnienie wstępnego wczytywania w nagłówkach HTTP spowoduje, że przeskoczy on wcześniej.
- Ogólnie operacje ładowania wstępnego są wczytywane w kolejności, w jakiej parser może je wykonać w przypadku wartości powyżej „średniego”, więc zachowaj ostrożność, jeśli stosujesz wstępne wczytywanie na początku kodu HTML.
- Wstępne wczytywanie czcionek prawdopodobnie najlepiej działa na końcu nagłówka lub na początku treści.
- Importowanie wstępne wczytywania (dynamiczne
import()lubmodulepreload) należy wykonać po tagu skryptu, który wymaga importu (aby najpierw został załadowany/przeanalizowany skrypt). Jeśli tag skryptu wczytuje skrypt, który będzie wywoływać ładowanie zależności, upewnij się, że pole<link rel=preload>dotyczące zależności znajduje się po nadrzędnym tagu skryptu. W przeciwnym razie zależności mogą się wczytać przed skryptem głównym. Podczas wczytywania zależności można przeanalizować/ocenić skrypt główny we właściwej kolejności. - Wstępne wczytywanie obrazów mają priorytet „Niski” lub „Średni” (bez priorytetu pobierania) i powinny być uporządkowane względem skryptów asynchronicznych oraz innych tagów o niskim lub najniższym priorytecie.
Historia
Priorytet pobierania po raz pierwszy przetestowaliśmy w Chrome w ramach wersji próbnej origin w 2018 r., a potem ponownie w 2021 r. z użyciem atrybutu importance. Wtedy ta nazwa była dostępna pod nazwą Wskazówki dotyczące priorytetu. W tym czasie interfejs został zmieniony na fetchpriority w języku HTML i na priority w przypadku interfejsu JavaScript Fetch API w ramach procesu wdrażania standardów internetowych. Aby uniknąć nieporozumień, teraz określamy ten interfejs API jako priorytet pobierania.
Podsumowanie
Deweloperzy mogą być zainteresowani priorytetem pobierania ze względu na poprawki dotyczące wstępnego wczytywania, a także ostatnio skupione na podstawowych wskaźnikach internetowych i LCP. Dostępne są teraz dodatkowe pokrętła umożliwiające osiągnięcie żądanej sekwencji wczytywania.