Optymalizacja priorytetu wstępnego wczytywania

Wstępne wczytywanie zasobów za pomocą <link rel="preload"> sygnalizuje przeglądarce, że zasób będzie wkrótce potrzebny. Jednak wstępne wczytywanie dziedziczy domyślny priorytet dla typu zasobu, a w przypadku obrazów jest on niski. Użycie fetchpriority pozwala doprecyzować ten względny priorytet, w szczególności zapewniając, że wstępne wczytywanie obrazów odbywa się z wysokim priorytetem, co pozwala na wcześniejsze rozpoczęcie i wykorzystanie większej ilości zasobów przepustowości.

Jak to zrobić?

1. Identyfikowanie kandydatów do wstępnego wczytywania: znajdź zasoby, które nie są wykrywane na wczesnym etapie przez przeglądarkę (np. obrazy plakatu filmu lub obrazy tła w CSS), ale są niezbędne do wyświetlania strony.
2. Zwiększ priorytet wstępnego wczytywania kluczowych obrazów: w przypadku obrazu LCP lub innych kluczowych obrazów, które nie są domyślnie traktowane priorytetowo, użyj <link rel="preload" fetchpriority="high">, aby zapewnić im wyższy priorytet niż innym wstępnie wczytywanym elementom. Pamiętaj, że czcionki mają już domyślnie wysoki priorytet.
3. Obniż priorytet mniej istotnych zasobów wstępnie wczytywanych: w przypadku zasobów, które nie są kluczowe dla początkowego renderowania (np. film w tle lub czcionki dodatkowe), użyj <link rel="preload" fetchpriority="low">.
4. Koordynacja z typami zasobów: pamiętaj, że różne typy as mają różne priorytety domyślne. W razie potrzeby użyj fetchpriority, aby zastąpić te wartości domyślne.

Przykładowy kod

<!-- Elevate priority for a video poster image that acts as the LCP candidate -->
<link rel="preload" href="/images/video-poster.jpg" as="image" fetchpriority="high">

<!-- Elevate priority for a critical LCP image that is hidden in CSS -->
<link rel="preload" href="/images/hero-background.jpg" as="image" fetchpriority="high">

<!-- Deprioritize a secondary font to avoid network contention -->
<link rel="preload" href="/fonts/secondary-font.woff2" as="font" type="font/woff2" fetchpriority="low" crossorigin>

Sprawdzone metody

• OBOWIĄZKOWE: używaj fetchpriority="high" tylko w przypadku maksymalnie 1–2 krytycznych wstępnie wczytywanych obrazów, aby uniknąć przeciążenia sieci i osłabienia priorytetu.
• OBOWIĄZKOWO: używaj fetchpriority="high" w przypadku obrazów o największym wyrenderowaniu treści (LCP).
• DO: ogranicz łączną liczbę wstępnie wczytywanych elementów na stronie do maksymalnie 2 obrazów i 2–3 podstawowych czcionek, aby zapobiec przeciążeniu przepustowości.
• UŻYWAJ fetchpriority="low" do wstępnego wczytywania zasobów, które przeglądarka ma zacząć wczytywać wcześniej, ale nie kosztem zasobów krytycznych (zwłaszcza niekrytycznych czcionek).
• PRAWIDŁOWO określ atrybut as, aby mieć pewność, że wstępne wczytywanie zostanie użyte.
• ZALECENIE: preferuj statyczne wykrywanie zasobów krytycznych (takich jak obrazy LCP) w kodzie HTML za pomocą tagów <img> zamiast polegania na wstępnym wczytywaniu obrazów tła.
• DO ensure that font preloads always have the crossorigin attribute (even if same-origin).
• NIE używaj wycofanego atrybutu importance. Został on zastąpiony przez fetchpriority.

Strategia zastępcza

Atrybut fetchpriority w elemencie <link rel="preload"> to progresywne ulepszanie. Przeglądarki, które nie obsługują tej funkcji, będą nadal wstępnie wczytywać zasób, używając domyślnego priorytetu dla tego typu zasobu. Aby zapewnić zgodność, zawsze podawaj prawidłowe atrybuty as i type.