Co mierzy LCP
LCP wskazuje moment, w którym największy element w widocznym obszarze ekranu - np. obraz hero, duży nagłówek lub blok tekstu - zostaje w pełni wyrenderowany. To wskaźnik, który najlepiej oddaje odczucie użytkownika 'strona się załadowała'.
Typowe elementy LCP
- obrazy (img, background-image),
- elementy video z posterem,
- bloki tekstu renderowane z dużym fontem,
- elementy SVG zawierające grafikę.
Od czego zależy wynik LCP
- czas odpowiedzi serwera (TTFB),
- rozmiar i format zasobów (obrazy, fonty),
- kolejność ładowania zasobów krytycznych,
- liczba skryptów blokujących renderowanie.
Progi Google
- Good: poniżej 2.5 s,
- Needs Improvement: 2.5–4.0 s,
- Poor: powyżej 4.0 s.
Jak poprawić LCP
- skrócić TTFB,
- zoptymalizować obrazy (kompresja, WebP, preload hero image),
- wyeliminować render-blocking resources,
- zastosować lazy loading dla zasobów poniżej foldu.