Optymalizacja priorytetu obrazu

Przeglądarki używają heurystyki do przypisywania priorytetów ładowania obrazów, ale te wartości domyślne nie zawsze są zgodne z największym wyrenderowaniem treści (LCP) na stronie.

Użycie atrybutu fetchpriority w elemencie <img> pozwala wyraźnie zasygnalizować przeglądarce znaczenie obrazu, dzięki czemu ważne obrazy wczytują się szybciej, a mniej istotne nie konkurują o przepustowość.

Atrybut loading=lazy zapobiega pobieraniu obrazów, które znajdują się poza ekranem, co może dodatkowo pomóc w ustalaniu priorytetów obrazów.

Jak to zrobić?

1. Zidentyfikuj obraz LCP: określ, który obraz jest najbardziej prawdopodobnym kandydatem do największego wyrenderowania treści (zwykle jest to baner powitalny u góry strony).
2. Zwiększ priorytet LCP: dodaj fetchpriority="high" do elementu <img> kandydata LCP.
3. Zmniejsz priorytet obrazów, które nie są kluczowe: w przypadku obrazów, które są częścią dodatkowego interfejsu lub są widoczne dopiero po interakcji użytkownika (np. mega menu, okna modalne lub slajdy karuzeli poza ekranem), dodaj fetchpriority="low".
4. Zoptymalizuj leniwe ładowanie: nigdy nie używaj loading="lazy" w przypadku obrazu LCP. W przypadku standardowych obrazów w części strony widocznej po przewinięciu wystarczy loading="lazy", aby opóźnić żądanie, dopóki użytkownik nie przewinie strony w ich pobliże. Unikaj dodawania atrybutu fetchpriority="low" do tych obrazów, ponieważ chcesz, aby były wczytywane z normalnym priorytetem, gdy użytkownik przewinie do nich stronę. Zarezerwuj fetchpriority="low" dla obrazów, które technicznie znajdują się „above the fold”, ale nie są początkowo widoczne (np. ukryte slajdy karuzeli lub mega menu). W przypadku tych ukrytych obrazów można też użyć loading="lazy". Przeglądarka obsłuży czas żądania, zachowując niski priorytet.
5. Preferuj domyślne priorytety: jeśli obraz powinien mieć normalny priorytet ładowania, pomiń atrybut fetchpriority, zamiast ustawiać go na auto. Jest to konwencja stylistyczna, która pozwala zachować czystość kodu HTML, jednocześnie korzystając z natywnych heurystyk przeglądarki.

Przykładowy kod

<!-- Elevate priority for the LCP image -->
<img src="/images/hero-lcp.jpg"
     alt="Main Banner"
     fetchpriority="high"
     width="800" height="400">

<!-- Deprioritize initially hidden images above the fold -->
<!-- Additionally use `loading="lazy"` if there are likely to be many images-->
 <div class="carousel">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 1"
          width="400" height="300">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 2"
          fetchpriority="low"
          loading="lazy"
          width="400" height="300">
<div>

<!-- Deprioritize images revealed only after user interaction -->
<img src="/images/mega-menu-promo.jpg"
     alt="Special Offer"
     fetchpriority="low"
     width="300" height="150">

<!-- Use lazy loading ALONE for standard below-the-fold images -->
<img src="/images/footer-logo.png"
     alt="Footer Logo"
     loading="lazy"
     width="120" height="60">

<!-- Omit fetchpriority for images with standard priority -->
<img src="/images/standard-image.jpg"
     alt="Standard Image"
     width="400" height="300">

Sprawdzone metody

• OBOWIĄZKOWO: zawsze stosuj fetchpriority="high" do obrazu LCP.
• OBOWIĄZKOWE: używaj fetchpriority="high" tylko w przypadku maksymalnie 1–2 najważniejszych obrazów, aby uniknąć rywalizacji o zasoby sieciowe i osłabienia priorytetu.
• OBOWIĄZKOWO: używaj atrybutu fetchpriority="low" w przypadku obrazów, które technicznie znajdują się „w części strony widocznej na ekranie”, ale są początkowo ukryte (np. ukryte slajdy karuzeli, obrazy w menu mega).
• OBOWIĄZKOWO: nie używaj fetchpriority="low" w przypadku standardowych obrazów w części strony widocznej po przewinięciu, które już korzystają z loading="lazy". Te obrazy powinny wczytywać się z normalnym priorytetem, gdy pojawią się w widocznym obszarze.
• ZALECANE: unikaj używania fetchpriority="auto". Jeśli chcesz użyć domyślnego priorytetu, pomiń ten atrybut, aby zachować przejrzystość kodu HTML.
• NIE łącz fetchpriority="high" z loading="lazy".
• NIE używaj wycofanego atrybutu importance. Został zastąpiony przez fetchpriority i nie jest obsługiwany przez żadną przeglądarkę.
• NIE używaj wycofanej wartości loading="auto". Początkowo była obsługiwana przez Chrome, ale została usunięta i nie jest obsługiwana przez żadną przeglądarkę.

Strategia zastępcza

Atrybut fetchpriority to progresywne ulepszanie elementu <img>. Jeśli przeglądarka nie obsługuje tego atrybutu, jest on ignorowany, a przeglądarka używa domyślnych heurystyk priorytetów.