Core Web Vitals to zestaw metryk zdefiniowanych przez Google do mierzenia doświadczenia użytkownika na stronie internetowej. Od 2021 roku metryki te wchodzą w skład sygnałów rankingowych Google — co oznacza, że niski wynik może zaszkodzić Twojemu SEO. Obrazy są jednym z głównych czynników wpływających na te wyniki — zarówno pozytywnie, jak i negatywnie.
Trzy metryki Core Web Vitals
Google mierzy trzy wymiary doświadczenia użytkownika za pomocą Core Web Vitals:
| Metryka | Co mierzy | Próg "Dobry" | Próg "Wymaga poprawy" |
|---|---|---|---|
| LCP (Largest Contentful Paint) | Czas ładowania największego widocznego elementu | ≤ 2,5 sekundy | 2,5 do 4 sekund |
| INP (Interaction to Next Paint) | Responsywność na interakcje użytkownika | ≤ 200 ms | 200 do 500 ms |
| CLS (Cumulative Layout Shift) | Wizualna stabilność układu strony | ≤ 0,1 | 0,1 do 0,25 |
LCP i obrazy: bezpośredni związek
Metryka LCP (Largest Contentful Paint) mierzy czas potrzebny do wyświetlenia największego widocznego elementu w oknie przeglądarki. W zdecydowanej większości stron internetowych tym elementem jest obraz — obraz hero, główny baner, zdjęcie produktu. Ciężki lub źle załadowany obraz jest więc bezpośrednio odpowiedzialny za zły wynik LCP.
Aby poprawić LCP związany z obrazami:
- Używać nowoczesnych formatów: WebP i AVIF są znacznie lżejsze od JPEG i PNG przy równoważnej jakości wizualnej
- Wstępnie ładować obraz LCP: dodaj tag <link rel="preload"> w <head>, aby zmusić przeglądarkę do priorytetowego ładowania obrazu hero
- Unikać lazy loading na obrazie LCP: nigdy nie stosuj loading="lazy" do obrazu, który będzie Twoim LCP — to opóźnia dokładnie to, co mierzy Google
- Serwować obrazy z CDN: geograficzna bliskość serwera zmniejsza Time to First Byte (TTFB), który bezpośrednio wpływa na LCP
- Prawidłowo wymiarować obrazy: nigdy nie serwuj obrazu o szerokości 3000px dla wyświetlania 800px
Warto wiedzieć: możesz zidentyfikować, który obraz stanowi Twój LCP za pomocą narzędzi PageSpeed Insights lub Chrome DevTools (karta Wydajność → kliknij na znacznik LCP). Identyfikacja ta jest niezbędnym pierwszym krokiem przed jakąkolwiek optymalizacją.
CLS i obrazy: przesunięcia układu
Metryka CLS (Cumulative Layout Shift) mierzy nieoczekiwane przesunięcia układu podczas ładowania. Obrazy bez zdefiniowanych wymiarów są jedną z najczęstszych przyczyn złego wyniku CLS: przeglądarka nie zna rozmiaru obrazu przed jego załadowaniem, co powoduje "skakanie" strony przy jego pojawieniu się.
Rozwiązanie jest proste i uniwersalne: zawsze określaj atrybuty width i height na tagach img. Pozwala to przeglądarce zarezerwować dokładnie potrzebną przestrzeń jeszcze przed pobraniem obrazu.
INP i obrazy: pośredni wpływ
Metryka INP (Interaction to Next Paint) mierzy responsywność strony na interakcje użytkownika (kliknięcia, wprowadzanie danych). Obrazy nie wpływają bezpośrednio na INP, ale bardzo ciężkie obrazy monopolizujące główny wątek przeglądarki mogą pośrednio pogorszyć tę metrykę poprzez blokowanie przetwarzania zdarzeń JavaScript.
Dekodowanie dużych obrazów (PNG o kilku megabajtach, TIFF w wysokiej rozdzielczości) może powodować blokowanie głównego wątku. Atrybut decoding="async" pozwala odroczyć to dekodowanie, aby nie blokować interakcji.
Dobre praktyki dotyczące obrazów dla Core Web Vitals
- Format: używaj WebP lub AVIF dla wszystkich obrazów treści
- Wymiary: zawsze określaj width i height na wszystkich tagach img
- Lazy loading: używaj loading="lazy" dla wszystkich obrazów poza ekranem, z wyjątkiem obrazu LCP
- Preload: wstępnie ładuj tylko obraz LCP za pomocą <link rel="preload" as="image">
- Obrazy responsywne: używaj atrybutu srcset do dostarczania odpowiedniego rozmiaru dla każdej rozdzielczości ekranu
- Kompresja: kompresuj wszystkie obrazy narzędziem takim jak Squoosh, Sharp lub ImageMagick przed wgraniem
- CDN: hostuj obrazy na CDN, aby zmniejszyć geograficzne opóźnienie ładowania
Warto wiedzieć: Google PageSpeed Insights i Lighthouse są narzędziami referencyjnymi do mierzenia Core Web Vitals i identyfikowania problematycznych obrazów. Google Search Console oferuje również raport Core Web Vitals oparty na rzeczywistych danych odwiedzających (CrUX — Chrome User Experience Report), bardziej wiarygodny niż testy laboratoryjne do oceny rzeczywistego doświadczenia użytkowników.