LCP - jak zoptymalizować Largest Contentful Paint

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.

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.

Obrazy to najczęstsza przyczyna słabego LCP.

Preload hero image:

<link rel="preload" as="image" href="hero.webp">

Nowoczesne formaty:
- WebP: 25-35% mniejszy niż JPEG
- AVIF: jeszcze mniejszy, ale mniejsze wsparcie

Responsive images:

<img src="hero-800.webp"
     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.

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:

@font-face {
  font-family: 'MyFont';
  font-display: swap; /* Wyświetl systemowy font podczas ładowania */
  src: url('font.woff2') format('woff2');
}

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Server-side rendering:
Dla SPA (React, Vue) - SSR lub Static Generation znacząco poprawia LCP.