Core Web Vitals to zestaw trzech metryk, które Google uważa za kluczowe dla doświadczenia użytkownika. W tym artykule przejdziesz przez każdą metrykę i nauczysz się, jak ją poprawiać.

Trzy filarze Core Web Vitals

1. LCP (Largest Contentful Paint)

LCP mierzy czas, w którym pojawia się największy element wizualny na stronie. Google rekomenduje, aby LCP był poniżej 2.5 sekundy.

  • Optymalizuj obrazy — użyj WebP i odpowiednich rozmiarów
  • Redukcj CSS i JavaScript blokujące rendering
  • Wykorzystaj lazy loading dla obrazów poza viewport

2. FID (First Input Delay)

FID mierzy opóźnienie między interakcją użytkownika a odpowiedzią przeglądarki. Powinno być poniżej 100ms.

  • Podziel długie JavaScript na mniejsze zadania
  • Zastosuj Web Workers dla operacji CPU-intensywnych
  • Monitoruj główny wątek przeglądarki

3. CLS (Cumulative Layout Shift)

CLS mierzy nieoczekiwane przesunięcia layoutu podczas ładowania. Powinno być poniżej 0.1.

  • Zarezerwuj miejsce dla obrazów i reklam
  • Unikaj wstawiania treści nad istniejącą zawartością
  • Używaj transform zamiast zmian width/height

Jak mierzyć Core Web Vitals?

Używaj tych narzędzi do monitorowania:

  • Lighthouse — wbudowany w Chrome DevTools
  • PageSpeed Insights — dane rzeczywiste od użytkowników
  • Web Vitals Extension — monitorowanie w czasie rzeczywistym
  • RUM — zbieraj dane z rzeczywistych użytkowników

Pamiętaj, że poprawa Core Web Vitals wpłynie zarówno na doświadczenie użytkownika, jak i na ranking w wyszukiwarce Google!