Z czego składa się LCP
Ten podział na cztery części dotyczy LCP wymagającego pobrania zasobu, np. obrazu. Tekstowy LCP nie ma osobnego pobierania obrazu; opóźnienie może wynikać z CSS lub fontu. Nie przypisuj mu sztucznie wszystkich faz.
- TTFB: czas do pierwszego bajtu odpowiedzi serwera.
- Opóźnienie ładowania zasobu: czas między odpowiedzią HTML a rozpoczęciem pobierania elementu LCP.
- Czas ładowania zasobu: pobranie obrazu lub innego pliku.
- Opóźnienie renderowania: czas do faktycznego wyświetlenia elementu na ekranie.
Jak poprawić LCP
Najskuteczniejsze działania to: skrócenie TTFB (cache, CDN), priorytetyzacja zasobu LCP (fetchpriority="high", preload), eliminacja blokującego renderowanie CSS/JS oraz optymalizacja obrazów (nowoczesne formaty, właściwe wymiary, brak lazy loadingu dla elementu LCP).
Przykład
Przykład obrazu hero o stałym URL-u. Priorytet i preload mogą skrócić oczekiwanie, jeśli zasób jest wykrywany za późno. Dla srcset/sizes dopasuj imagesrcset/imagesizes w preload albo zrezygnuj z niego, aby nie pobierać dwóch wariantów. Potwierdź efekt w waterfall; nie preloaduj wszystkich dużych obrazów.
<link rel="preload" as="image" href="/hero.webp" type="image/webp"><img src="/hero.webp" alt="Produkt w użyciu"
width="1200" height="630" fetchpriority="high">Google przyjmuje 2,5 sekundy lub mniej jako dobry, 2,5–4,0 s jako wymagający poprawy i powyżej 4,0 s jako słaby. Próg dotyczy 75. percentyla wczytań, nie średniej, czyli jedna czwarta użytkowników nadal może mieć gorzej.
Kandydatami są m.in. img, image wewnątrz SVG, plakat lub pierwsza klatka wideo, tło url() i bloki tekstu. Przeglądarka stosuje reguły kwalifikacji; największy prostokąt DOM nie musi być LCP. Kandydaci zmieniają się podczas ładowania, a raportowanie kończy się m.in. przy pierwszej interakcji lub przewinięciu. Korzystaj z biblioteki uwzględniającej cykl życia strony.
Bo to dwa różne pomiary. Lighthouse to test laboratoryjny na symulowanym urządzeniu i łączu, a Search Console pokazuje dane terenowe z CrUX, od prawdziwych użytkowników, na ich sprzętie i sieci. Rozbieżność jest normalna; do oceny liczy się pomiar terenowy.
Wolna odpowiedź serwera (wysoki TTFB), lazy-loading założony na obrazku, który sam jest elementem LCP, blokujące renderowanie CSS i JavaScript oraz obrazki w starych formatach bez wariantów responsywnych.
Źródła i dalsza lektura
- web.dev: Largest Contentful Paint (LCP) dokumentacja
- MDN: LargestContentfulPaint API dokumentacja
- web.dev: Optimize LCP dokumentacja