Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) to jedna z głównych metryk Core Web Vitals. Mierzy czas od startu ładowania strony do momentu, gdy w obszarze widoku (viewport) pojawi się największy widoczny element treści. Ten wskaźnik wpływa na ocenę jakości strony z perspektywy Google.
Czym jest Largest Contentful Paint
LCP pokazuje, jak szybko użytkownik dostrzeże kluczową treść strony. Nie chodzi o pierwszy widoczny piksel, lecz o największy element w polu widzenia. Google wybrał tę metrykę, ponieważ wcześniejsze wskaźniki, takie jak First Meaningful Paint czy Speed Index, często dawały niejednoznaczne wyniki. Były też trudne do powtórzenia w praktyce.
Wśród Core Web Vitals to właśnie LCP odpowiada za ocenę, jak szybko strona wydaje się ładować. Uzupełnia INP i CLS. Jeśli przed końcem ładowania pojawi się większy element, przeglądarka aktualizuje wartość LCP. Raportuje ostatni największy widoczny element.
Progi i ocena wyniku LCP
Google wyróżnia trzy zakresy: ≤ 2,5 sekundy – wynik dobry, 2,5–4,0 sekund – wymaga poprawy, powyżej 4,0 sekund – słaby. Analiza bazuje na 75. percentylu rzeczywistych wizyt. Co najmniej 75% użytkowników musi mieścić się w danym progu.
Warto wiedzieć, że Google Lighthouse stosuje różne progi dla desktopów i urządzeń mobilnych. To efekt symulacji różnych parametrów sprzętu i sieci. Nie każdy test daje identyczny wynik.
Jakie elementy są uwzględniane w LCP
Przeglądarka bierze pod uwagę konkretne typy elementów:
- elementy
<img> - elementy
<video>(poster lub pierwsza klatka) - elementy
<image>w SVG - elementy z CSS
background-image - blokowe kontenery tekstowe – akapity, nagłówki, listy
Nie są liczone elementy z opacity: 0 ani obrazy o niskiej entropii. Te uznaje się za nieistotne dla treści.
Jak przeglądarka wyznacza rozmiar elementu
Zlicza się wyłącznie fragment widoczny w viewport. W przypadku obrazów liczy się mniejsza z dwóch wartości: realny rozmiar pliku lub rozmiar wyświetlany. Dzięki temu nie da się sztucznie zawyżyć wyniku przez rozciągnięcie grafiki.
Podfazy LCP i typowe przyczyny słabego wyniku
Dla elementów graficznych czas LCP rozbija się na cztery podfazy: TTFB (czas do pierwszego bajtu odpowiedzi serwera), Load delay (opóźnienie przed startem pobierania), Load time (czas pobierania), Render delay (opóźnienie między końcem pobierania a wyrenderowaniem). Zwykle to jeden z tych etapów odpowiada za większość całego czasu. Gdzie najczęściej pojawia się wąskie gardło?
Najlepsze efekty dają działania takie jak:
- ustawienie
fetchpriority="high"lub<link rel="preload">dla najważniejszego zasobu – zazwyczaj hero image - optymalizacja obrazów: nowoczesny format (WebP, AVIF), dopasowany rozmiar pliku
- redukcja TTFB – poprawa infrastruktury serwera lub wdrożenie CDN
- usunięcie render-blokujących CSS i JavaScript
Możesz wybrać jedną z tych dróg lub połączyć kilka naraz. Często już jeden ruch daje widoczną poprawę.
W laboratorium sprawdzisz LCP przez Google Lighthouse albo Chrome DevTools. Oba narzędzia pozwalają symulować ładowanie strony. Dane z realnych wizyt znajdziesz w Google Search Console (opartej o CrUX) oraz PageSpeed Insights, które łączy dane laboratoryjne z rzeczywistymi.
Do pomiaru programowego służy PerformanceObserver korzystający z API LargestContentfulPaint. Dla dewelopera to okno na konkretne dane z przeglądarki.
FCP (First Contentful Paint) mierzy czas do pojawienia się jakiegokolwiek elementu treści. LCP to moment wyświetlenia największego głównego elementu. Lepiej oddaje odbiór użyteczności strony.
LCP stanowi jeden z sygnałów Page Experience wpływających na ranking Google. Strony z wynikiem ≤ 2,5 s są uznawane za szybkie. Mogą zyskać przewagę w wynikach wyszukiwania.
Z reguły wystarcza nadanie najwyższego priorytetu ładowania kluczowemu elementowi (najczęściej hero image) i jego optymalizacja pod względem formatu oraz rozmiaru pliku. Proste, ale skuteczne.
Wynik ≤ 2,5 sekundy, liczony na 75. percentylu odwiedzin, Google uznaje za dobry. Taki wynik daje realną przewagę.
