Jak obrazy wpływają na Core Web Vitals - i jak to naprawić
Obrazy odpowiadają za większość problemów z LCP (Largest Contentful Paint). Jeśli Twoje Core Web Vitals świecą na czerwono, winne są pewnie obrazy. Oto dokładnie, jak to naprawić.
Wypróbuj teraz - za darmo, bez rejestracji.
Inteligentna kompresja obrazów →Obrazy a LCP (Largest Contentful Paint)
LCP mierzy, kiedy kończy się ładowanie największego widocznego elementu. Na większości stron jest to obraz. Google oczekuje LCP poniżej 2,5 sekundy.
Jak poprawić LCP:
- Używaj WebP/AVIF: pliki mniejsze o 25-50% = szybsze pobieranie. Konwertuj teraz.
- Zmieniaj rozmiar obrazów: serwuj rozmiar dopasowany do kontenera. Zmień rozmiar tutaj.
- Wczytuj obraz główny z wyprzedzeniem:
<link rel="preload" as="image" href="hero.webp"> - Używaj CDN: serwuj obrazy z serwerów brzegowych blisko użytkowników.
- Ustaw fetchpriority:
<img fetchpriority="high">dla obrazów na pierwszym ekranie.
Obrazy a CLS (Cumulative Layout Shift)
CLS mierzy nieoczekiwane przesunięcia układu. Obrazy bez wymiarów sprawiają, że strona „skacze” podczas ładowania.
Jak poprawić CLS:
- Zawsze ustawiaj width i height:
<img width="800" height="600"> - Używaj CSS aspect-ratio:
aspect-ratio: 16/9;jako nowoczesnej alternatywy - Nie ładuj leniwie obrazów na pierwszym ekranie: nie dodawaj
loading="lazy"do obrazu głównego
Szybka lista poprawek
- Inteligentnie skompresuj wszystkie obrazy (automatycznie optymalna jakość)
- Zmień rozmiar do faktycznych wymiarów wyświetlania
- Dodaj atrybuty width/height do wszystkich znaczników
<img> - Wczytaj obraz LCP z wyprzedzeniem
- Ładuj leniwie wszystko poniżej pierwszego ekranu
- Sprawdź ponownie w PageSpeed Insights
Najczęstsze pytania
Jaki wynik LCP jest dobry?
Poniżej 2,5 sekundy to „Good” (zielony). 2,5-4 sekundy to „Needs Improvement” (żółty). Powyżej 4 sekund to „Poor” (czerwony). Sama optymalizacja obrazów często wystarcza, by przejść z czerwonego na zielony.
Czy powinienem leniwie ładować wszystkie obrazy?
Nie! Nie ładuj leniwie obrazów na pierwszym ekranie (zwłaszcza obrazu głównego/LCP). Leniwie ładuj tylko te, które początkowo są poza ekranem. Przesadne leniwe ładowanie w rzeczywistości pogarsza LCP.
Gotowy? 100% za darmo, działa w przeglądarce.
Inteligentna kompresja obrazów →