Core Web Vitals to zestaw metryk, które mierzą realne doświadczenie użytkownika. W sklepie internetowym są szczególnie ważne, bo każda sekunda opóźnienia może obniżyć konwersję, a niestabilny layout potrafi utrudnić zakup na telefonie.
LCP — największy element na ekranie
W PrestaShop LCP najczęściej psuje duży banner, slider albo zdjęcie kategorii. Najważniejsze działania:
- użyj WebP lub AVIF,
- podaj poprawne wymiary obrazów,
- preloaduj tylko główny obraz nad zgięciem,
- nie ładuj slidera jako ciężkiego JavaScriptu, jeśli wystarczy statyczny hero.
CLS — przesunięcia layoutu
CLS rośnie, gdy elementy wskakują po załadowaniu: banery, fonty, reklamy, paski cookies lub zdjęcia bez wymiarów. Rozwiązanie jest proste: rezerwuj miejsce przez width/height, aspect-ratio i stabilne kontenery.
INP — reakcja na kliknięcia
INP pogarsza nadmiar JavaScriptu: moduły czatu, trackery, slidery, pop-upy i filtry produktów. Warto opóźniać skrypty, których użytkownik nie potrzebuje od razu, oraz usuwać moduły, które nie wpływają na sprzedaż.
Checklist dla PrestaShop
- Włącz cache i kompresję zasobów.
- Zamień duże zdjęcia na WebP i generuj miniatury zgodne z miejscem wyświetlania.
- Usuń nieużywane moduły frontowe.
- Ładuj fonty z
font-display: swap. - Testuj mobile, nie tylko desktop.
Jeśli sklep jest wolny na telefonach, wykonamy audyt Core Web Vitals i listę poprawek.