Wymiar Core/Dash: Priorytet LCP

Wymiar: Zasób: Priorytet LCP

Wymiar Priorytet LCP segmentuje dane o wydajności w oparciu o to, jak przeglądarka wykryła i uszeregowała pod względem ważności zasób LCP. Podczas gdy wymiar "Typ Elementu" mówi, czym jest dany element (Tekst vs. Obraz), ten wymiar wyjaśnia, dlaczego przeglądarka opóźniła jego ładowanie.

To Twoje główne narzędzie do audytu Load Delay. Ujawnia ono, czy Twój zasób LCP walczy o przepustowość, czy też 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 do jednego z pięciu konkretnych stanów ładowania, uszeregowanych od najbardziej destrukcyjnego (Lazy Loaded) do najbardziej optymalnego (Tekst/Wysoki Priorytet).

Tło: Gdy użytkownik wraca na Twoją stronę za pomocą przycisku "Wstecz" lub "Odśwież", większość przeglądarek przywraca go do poprzedniej pozycji wertykalnej. Jeśli ta pozycja znajduje się poniżej linii zanurzenia (below the fold), Twój zoptymalizowany Hero Image nie jest już LCP. Zamiast tego przeglądarka mierzy największy element w bieżącym oknie widoku (viewport). Tworzy to nieunikniony zestaw zdarzeń "Not Preloaded" w Twoim zbiorze danych.  I jest to całkowicie w porządku!

1. Lazy Loaded 

Jeśli ponad 10% Twoich elementów LCP pojawia się w tej grupie, zidentyfikowałeś problem. Obrazy z lazy loadingiem są kolejkowane znacznie później (przez wolny parser DOM, a nie szybki skaner preload). Atrybut loading="lazy" instruuje przeglądarkę, aby wstrzymała się z  pobieraniem, dopóki układ (layout) nie zostanie obliczony, a element nie znajdzie się w pobliżu viewportu.

Rozwiązanie: Musisz usunąć ten atrybut ładowania. Element LCP nigdy nie powinien być ładowany z opóźnieniem (lazy-loaded).

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

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

2. Not Preloaded

Reprezentuje to domyślne zachowanie przeglądarki. Przeglądarka wykryła obraz w kodzie HTML podczas wstępnego parsowania, ale nie otrzymała żadnego sygnału, aby nadać mu priorytet wyższy niż innym obrazom.

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

3. Preloaded

Wskazuje to, że zasób został wykryty poprzez tag <link rel="preload"> w nagłówku dokumentu. Te linki preload oznaczają w zasadzie wczesne wykrycie, nawet jeśli odniesienie do obrazu jest głęboko ukryte w DOM lub schowane w pliku CSS (obraz tła).

Preloading to najskuteczniejszy sposób na wymuszenie wczesnego pobierania, jednak wymaga utrzymywania oddzielnego tagu link, który musi dokładnie pasować do adresu URL obrazu. Jeśli przestaną być zgodne, pobierzesz zasób podwójnie.

4. High fetchpriority

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

Strategia: Jest to stan docelowy dla LCP opartego na obrazach. Sygnalizuje ważność bezpośrednio na elemencie, promując go ponad inne zasoby w kolejce pobierania bez narzutu związanego z ręcznym utrzymywaniem tagów preload.

5. Not an Image

Status: Węzeł tekstowy / SVG

Element LCP jest blokiem tekstu (h1, p) lub surowym SVG. Jest to idealny stan architektoniczny, ponieważ tekst generuje zerowy Load Delay (jest już obecny w dokumencie HTML).

Optymalizacja: Jeśli Twój LCP znajduje się w tej kategorii, ale nadal jest wolny, wąskim gardłem jest wyłącznie Render Delay. Musisz zoptymalizować swoją Krytyczną Ścieżkę Renderowania (blokowanie przez CSS/JS) lub strategię ładowania fontów (font-display: swap), ponieważ nie ma pliku obrazu do pobrania.

Workflow: Optymalizacja Load Delay

Użyj tego wymiaru, aby zweryfikować swoją strategię zasobów frontendowych.

1. Wyeliminuj Lazy Loading: Filtruj według Lazy Loaded. Jeśli ta wartość jest większa niż 0%, znajdź komponent dodający loading="lazy" do obrazu hero i usuń go. Jest to powszechne w szablonach CMS, które stosują lazy loading globalnie do wszystkich mediów.
2. Przejdź na Fetchpriority: Przenieś ruch z Not Preloaded i Preloaded do High fetchpriority. Zastąpienie <link rel="preload"> atrybutem fetchpriority="high" czyści Twój <head> i wiąże logikę priorytetów bezpośrednio z komponentem.
3. Audyt Obrazów Tła: Jeśli masz duży wolumen w Not Preloaded, a Twój LCP jest obrazem tła, przeglądarka wykrywa go zbyt późno (dopiero po sparsowaniu CSS). Musisz zrefaktoryzować to do tagu HTML <img> z fetchpriority="high" lub wymusić nagłówek Preload.

Zasada Inżynierska

Twój cel dystrybucji dla tego wymiaru jest ścisły:

• <10% Lazy Loaded
• > 90% High fetchpriority (dla LCP będących obrazami)
• 100% Not an image (dla LCP tekstowych)

Każdy ruch wpadający do "Not Preloaded" reprezentuje niezoptymalizowany stan, w którym oddajesz kontrolę nad priorytetem zasobów domyślnym heurystykom przeglądarki.