Wymiar Core/Dash: Priorytet LCP

Wymiar: Zasób: Priorytet LCP

Wymiar LCP Priority segmentuje dane o wydajności na podstawie tego, w jaki sposób przeglądarka odkryła i określiła priorytet zasobu LCP. Podczas gdy wymiar „Typ elementu” (Element Type) informuje o tym, czym jest dany element (tekst kontra obraz), ten wymiar mówi, dlaczego przeglądarka opóźniła jego ładowanie.

Jest to Twoje podstawowe narzędzie do audytu Load Delay. Ujawnia ono, czy Twój zasób LCP rywalizuje o przepustowość sieci, czy jest sztucznie opóźniany przez nieprawidłowe atrybuty HTML.

Hierarchia priorytetów

Przeglądarka przypisuje priorytet pobierania do każdego zasobu. Ten wymiar mapuje element LCP na jeden z pięciu konkretnych stanów ładowania, uszeregowanych od najbardziej destrukcyjnego (Lazy Loaded) do najbardziej optymalnego (Tekst / High fetchpriority).

Kontekst: Kiedy użytkownik wraca na Twoją stronę za pomocą przycisku „Wstecz” lub „Odśwież”, większość przeglądarek przywraca go do poprzedniej pozycji w pionie. Jeśli ta pozycja znajduje się poniżej widocznego obszaru (below the fold), zoptymalizowany Hero Image nie jest już elementem LCP. Zamiast tego przeglądarka bierze pod uwagę największy element w bieżącym widoku. Tworzy to w zbiorze danych nieuniknioną pulę zdarzeń typu „Not Preloaded”. I jest to całkowicie normalne!

1. Lazy Loaded

Jeśli do tego przedziału trafia więcej niż 10% elementów LCP, oznacza to zidentyfikowanie problemu. Obrazy ładowane z opóźnieniem (lazy loading) są kolejkowane znacznie później (przez wolny parser DOM, a nie szybki skaner wstępnego ładowania). Atrybut loading="lazy" instruuje przeglądarkę, aby wstrzymała się z pobieraniem do momentu obliczenia układu i znalezienia się elementu w pobliżu obszaru widocznego (viewport).

Rozwiązanie: Musisz usunąć ten atrybut ładowania. Element LCP nigdy nie powinien być ładowany w trybie lazy-loaded.

<!-- NIEPOPRAWNIE -->
<img src="hero.jpg" loading="lazy" alt="Hero Image" />

<!-- POPRAWNIE -->
<img src="hero.jpg" fetchpriority="high" alt="Hero Image" />

2. Not Preloaded

Reprezentuje to domyślne zachowanie przeglądarki. Przeglądarka odkryła obraz w kodzie HTML podczas początkowego parsowania, ale nie otrzymała sygnału, by nadać mu wyższy priorytet niż pozostałym obrazom.

Wpływ na pagespeed zależy od złożoności Twojej strony internetowej. Obraz LCP trafia do kolejki rywalizacji o zasoby. Jeśli strona zawiera wiele skryptów, fontów, innych obrazów bez atrybutu lazy lub stylów do pobrania, przeglądarka może opóźnić pobranie tego obrazu, zwiększając Load Delay.

3. Preloaded

Oznacza to, że zasób został wykryty dzięki tagowi <link rel="preload"> w sekcji head dokumentu. Te linki preloada oznaczają wczesne wykrycie, nawet jeśli odwołanie do obrazu znajduje się głęboko w DOM lub jest ukryte w pliku CSS (obraz tła).

Wstępne ładowanie (preloading) to najskuteczniejszy sposób na wymuszenie wczesnego pobrania, jednak wymaga utrzymywania osobnego tagu link, który musi dokładnie pasować do adresu URL obrazu. Jeśli się rozminą, pobierzesz zasób podwójnie.

4. High fetchpriority

To nowoczesny standard inżynieryjny. Przeglądarka otrzymała instrukcję za pomocą atrybutu fetchpriority="high", aby traktować ten konkretny obraz jako kluczowy zasób.

Strategia: Jest to stan docelowy dla LCP opartego na obrazie. Sygnalizuje znaczenie bezpośrednio na elemencie, wypychając go ponad inne zasoby w kolejce pobierania, bez narzutu na utrzymywanie manualnych tagów preload.

5. Not an Image

Status: Węzeł tekstowy (Text Node) / SVG

Element LCP to blok tekstu (h1, p) lub zwykły kod SVG. Jest to idealny stan architektoniczny, ponieważ tekst nie generuje opóźnienia Load Delay (jest już obecny w dokumencie HTML).

Optymalizacja: Jeśli LCP mieści się w tej kategorii, a mimo to ładuje się powoli, wąskim gardłem jest wyłącznie opóźnienie renderowania (Render Delay). Musisz zoptymalizować krytyczną ścieżkę renderowania (Critical Rendering Path - blokowanie przez CSS/JS) lub strategię ładowania fontów (font-display: swap), ponieważ nie ma pliku obrazu do pobrania.

Workflow: Optymalizacja Load Delay

Wykorzystaj ten wymiar do walidacji strategii ładowania zasobów frontendowych.

1. Wyeliminuj Lazy Loading: Przefiltruj dane po Lazy Loaded. Jeśli wartość jest wyższa niż 0%, zlokalizuj komponent dodający loading="lazy" do elementu hero image i usuń go. Jest to powszechne zjawisko w szablonach CMS, które globalnie stosują lazy loading do wszystkich multimediów.
2. Migruj na Fetchpriority: Przenieś ruch z kategorii Not Preloaded i Preloaded do High fetchpriority. Zastąpienie <link rel="preload"> na fetchpriority="high" pozwala uporządkować sekcję <head> i łączy logikę priorytetów bezpośrednio z komponentem.
3. Wykonaj audyt obrazów tła (Background Images): Jeśli masz duży wolumen w Not Preloaded, a Twoim LCP jest obraz tła, przeglądarka odkrywa go zbyt późno (dopiero po sparsowaniu CSS). Musisz przebudować to do postaci tagu HTML <img> z atrybutem fetchpriority="high" lub wymusić nagłówek Preload.

Inżynieryjna złota zasada

Cel dystrybucji dla tego wymiaru jest rygorystyczny:

• <10% Lazy Loaded
• > 90% High fetchpriority (dla obrazów LCP)
• 100% Not an image (dla LCP w formie tekstu)

Każdy ruch kwalifikujący się jako „Not Preloaded” stanowi nieoptymalny stan, w którym zrzekasz się kontroli nad priorytetyzacją zasobów, oddając ją w ręce domyślnych mechanizmów przeglądarki.