Core/Dash Wymiar: LCP Priority

Wymiar: Resource: LCP Priority

Wymiar LCP Priority segmentuje dane wydajności na podstawie tego, jak przeglądarka odkryła i nadała priorytet zasobowi LCP. Podczas gdy wymiar „Element Type" informuje, czym jest element (tekst vs. obraz), ten wymiar informuje, dlaczego przeglądarka opóźniła jego ładowanie.

To jest Twoje główne narzędzie audytu dla Load Delay. Ujawnia, czy Twój zasób LCP rywalizuje o przepustowość, czy jest sztucznie opóźniany przez nieprawidłowe atrybuty HTML.

Hierarchia priorytetów

Przeglądarka przypisuje priorytet pobierania każdemu zasobowi. Ten wymiar mapuje element LCP do jednego z pięciu konkretnych stanów ładowania, uszeregowanych od najbardziej destrukcyjnego (Lazy Loaded) do najbardziej optymalnego (Text/High Priority).

Kontekst: Gdy użytkownik wraca na Twoją stronę przyciskiem „Wstecz" lub „Odśwież", większość przeglądarek przywraca go do poprzedniej pozycji przewijania. Jeśli ta pozycja znajduje się poniżej linii zgięcia, Twój zoptymalizowany Hero Image nie jest już LCP. Zamiast tego przeglądarka mierzy największy element w bieżącym oknie widoku. To tworzy nieunikniony zbiór zdarzeń „Not Preloaded" w Twoim zbiorze danych. I to jest zupełnie normalne!

1. Lazy Loaded

Jeśli ponad 10% Twoich elementów LCP pojawia się w tej kategorii, zidentyfikowałeś problem. Obrazy z lazy loading są kolejkowane znacznie później (przez wolny parser DOM, a nie szybki preload scanner). Atrybut loading="lazy" instruuje przeglądarkę, aby wstrzymała pobieranie do momentu obliczenia layoutu i znalezienia się elementu w pobliżu okna widoku.

Rozwiązanie: Musisz usunąć ten atrybut loading. Element LCP nigdy nie powinien mieć lazy loading.

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

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

2. Not Preloaded

Reprezentuje domyślne zachowanie przeglądarki. Przeglądarka odkryła obraz w HTML podczas wstępnego parsowania, ale nie otrzymała żadnego sygnału, aby nadać mu priorytet nad innymi obrazami.

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

3. Preloaded

Wskazuje, że zasób został odkryty za pomocą tagu <link rel="preload"> w nagłówku dokumentu. Te linki preload oznaczają wczesne odkrycie, nawet jeśli odniesienie do obrazu jest ukryte głęboko w DOM lub w pliku CSS (obraz tła).

Preloading to najskuteczniejszy sposób na wymuszenie wczesnego pobrania. Preloading wymaga utrzymania oddzielnego tagu link, który musi dokładnie odpowiadać URL-owi obrazu. Jeśli się rozjadą, pobierasz zasób podwójnie.

4. High fetchpriority

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

Strategia: To jest docelowy stan dla LCP opartego na obrazach. Sygnalizuje ważność bezpośrednio na elemencie, podnosząc go ponad inne zasoby w kolejce pobierania bez narzutu utrzymania ręcznych tagów preload.

5. Not an Image

Status: Węzeł tekstowy / SVG

Element LCP to blok tekstu (h1, p) lub surowe SVG. To idealny stan architektoniczny, ponieważ tekst generuje zerowe Load Delay (jest już obecny w dokumencie HTML).

Optymalizacja: Jeśli Twój LCP należy do tej kategorii, ale nadal jest wolny, wąskim gardłem jest wyłącznie Render Delay. Musisz zoptymalizować Critical Rendering Path (blokujące CSS/JavaScript) lub strategię ładowania fontów (font-display: swap), ponieważ nie ma pliku obrazu do pobrania.

Przepływ pracy: 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 częste w szablonach CMS, które stosują lazy loading globalnie do wszystkich mediów.
2. Migruj na Fetchpriority: Przenieś ruch z Not Preloaded i Preloaded do High fetchpriority. Zastąpienie <link rel="preload"> przez fetchpriority="high" porządkuje Twój <head> i wiąże logikę priorytetów bezpośrednio z komponentem.
3. Audytuj obrazy tła: Jeśli masz dużą ilość ruchu w Not Preloaded, a Twój LCP to obraz tła, przeglądarka odkrywa go zbyt późno (dopiero po sparsowaniu CSS). Musisz przebudować to na tag HTML <img> z fetchpriority="high" lub wymusić nagłówek Preload.

Inżynieryjna reguła kciuka

Twój docelowy rozkład dla tego wymiaru jest ścisły:

• <10% Lazy Loaded
• > 90% High fetchpriority (dla LCP opartych na obrazach)
• 100% Not an image (dla LCP opartych na tekście)

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