LCP - jak zoptymalizować Largest Contentful Paint
LCP (Largest Contentful Paint) to jeden z trzech wskaźników Core Web Vitals, które Google używa jako czynnik rankingowy. Mierzy czas ładowania największego widocznego elementu na stronie. Dobry LCP to poniżej 2.5 sekundy.
Krótka odpowiedź
Czym jest LCP i dlaczego jest ważny
Largest Contentful Paint mierzy czas, po którym największy element w viewport (widocznym obszarze) jest w pełni wyrenderowany.
Typowe elementy LCP:
- Duże obrazy (hero image, banner)
- Bloki tekstu
- Elementy video (poster)
- Tła CSS z obrazkami
Progi oceny:
- Dobry: ≤ 2.5 sekundy (zielony)
- Wymaga poprawy: 2.5 - 4.0 sekundy (pomarańczowy)
- Słaby: > 4.0 sekundy (czerwony)
Dlaczego Google to mierzy:
LCP koreluje z percepcją użytkownika - kiedy główna treść się załadowała. Wolny LCP = użytkownik myśli, że strona jest wolna, nawet jeśli całość ładuje się szybko.
Diagnoza problemu LCP
PageSpeed Insights:
Wpisz URL i sprawdź sekcję "Dane laboratoryjne". Zobaczysz wartość LCP i element, który go powoduje.
Chrome DevTools > Performance:
1. Otwórz DevTools (F12)
2. Zakładka Performance
3. Kliknij Record i odśwież stronę
4. Znajdź marker "LCP" na timeline
5. Kliknij, żeby zobaczyć który element
Web Vitals Extension:
Rozszerzenie Chrome pokazujące LCP, FID i CLS w czasie rzeczywistym.
Search Console > Core Web Vitals:
Raport z danymi terenowymi (real users) dla całej strony. Pokazuje URL-e z problemami LCP.
Optymalizacja obrazów dla LCP
Obrazy to najczęstsza przyczyna słabego LCP.
Preload hero image:
```html
```
Umieść w
Nowoczesne formaty:
- WebP: 25-35% mniejszy niż JPEG
- AVIF: jeszcze mniejszy, ale mniejsze wsparcie
Responsive images:
```html
srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
sizes="(max-width: 600px) 400px, 800px"
width="800" height="600" alt="...">
```
Lazy loading:
- NIE dla obrazu LCP (above the fold)
- TAK dla obrazów poniżej fold
- `loading="lazy"` lub Intersection Observer
Określ wymiary:
`width` i `height` zapobiegają layout shift podczas ładowania.
Optymalizacja CSS i JS dla LCP
CSS blokujący renderowanie:
- Inline critical CSS w
- Lazy load pozostały CSS: ``
- Usuń nieużywane CSS (PurgeCSS, UnCSS)
JavaScript:
- Defer lub async dla skryptów zewnętrznych
- Przenieś heavy JS na koniec
- Code splitting - ładuj tylko potrzebny kod
Fonty:
```css
@font-face {
font-family: 'MyFont';
font-display: swap; /* Wyświetl systemowy font podczas ładowania */
src: url('font.woff2') format('woff2');
}
```
Preload kluczowych fontów:
```html
```
Server-side rendering:
Dla SPA (React, Vue) - SSR lub Static Generation znacząco poprawia LCP.