Core Web Vitals to nie tylko temat dla technicznych zapaleńców. Od 2024 roku Google używa ich jako realnego sygnału rankingowego na zapytaniach komercyjnych, a wpływ na konwersję jest mierzalny: witryna, która schodzi z 4 sekund do 2 sekund LCP, zyskuje zwykle od 10 do 25 % konwersji mobilnej. Ten przewodnik precyzyjnie omawia trzy aktualne metryki, sposoby ich pomiaru oraz optymalizację w PrestaShop i WordPressie w 2026 roku.
Trzy Core Web Vitals, które trzeba znać
LCP: Largest Contentful Paint
LCP mierzy czas od rozpoczęcia ładowania strony do pojawienia się największego widocznego elementu w oknie przeglądarki. W sklepie internetowym tym elementem niemal zawsze jest obraz: główne zdjęcie produktu na karcie, hero na stronie głównej, baner kategorii.
Oficjalne progi Google:
- Dobry: poniżej 2,5 sekundy
- Do poprawy: od 2,5 do 4 sekund
- Słaby: powyżej 4 sekund
CLS: Cumulative Layout Shift
CLS mierzy stabilność wizualną strony w trakcie ładowania. Konkretnie: przycisk, który przesuwa się, gdy użytkownik zaczyna klikać, obraz, który spycha treść w dół, docierając z opóźnieniem, baner cookies, który przesuwa całą stronę. Im niższy wynik, tym lepiej.
- Dobry: poniżej 0,1
- Do poprawy: od 0,1 do 0,25
- Słaby: powyżej 0,25
INP: Interaction to Next Paint
INP zastąpiło FID (First Input Delay) w marcu 2024 roku. Mierzy opóźnienie między interakcją użytkownika (kliknięcie, dotknięcie, wpisanie znaku) a widoczną reakcją przeglądarki, w całej sesji, a nie tylko przy pierwszej interakcji.
- Dobry: poniżej 200 ms
- Do poprawy: od 200 do 500 ms
- Słaby: powyżej 500 ms
INP jest bardziej wymagające niż FID, bo obejmuje wszystkie interakcje, nie tylko pierwszą. Witryny, które ledwo zaliczały FID, często oblewają INP, zwłaszcza WooCommerce ze skryptami wariantów i dodawaniem do koszyka przez AJAX.
Jak mierzyć Core Web Vitals
Cztery uzupełniające się narzędzia:
- PageSpeed Insights (darmowe, od Google): daje syntetyczną ocenę wraz z konkretnymi zaleceniami. Rozróżnia dane laboratoryjne (test symulowany) i terenowe (rzeczywiste, z Chrome User Experience Report)
- Lighthouse (wbudowany w Chrome DevTools): pełny audyt lokalny, przydatny do wykrywania wąskich gardeł
- Google Search Console → Wrażenia → Core Web Vitals: zagregowany widok witryny na podstawie rzeczywistych danych użytkowników Chrome
- WebPageTest: szczegółowy test z wykresem waterfall i wyborem parametrów łącza
Ważne: dane laboratoryjne z pojedynczego testu nie odzwierciedlają tego, czego doświadczają Twoi użytkownicy. Dane terenowe w Search Console są bardziej reprezentatywne i to one liczą się dla Google.
Optymalizacja LCP
Zidentyfikuj element LCP
W Lighthouse sekcja Largest Contentful Paint element wskazuje dokładnie, który element strony jest elementem LCP. Na karcie produktu w PrestaShop albo WooCommerce jest to niemal zawsze główne zdjęcie.
Zoptymalizuj obrazy
Trzy kluczowe działania:
- Konwersja do WebP albo AVIF: zmniejsza rozmiar pliku o 30 do 60 % bez widocznej straty jakości. W PrestaShop konwersję automatyzują dedykowane moduły. W WordPressie wtyczki takie jak ShortPixel, Imagify czy Smush.
- Serwuj właściwe wymiary: nie wysyłaj obrazu 2000 na 2000 pikseli do miejsca o rozmiarze 400 na 400. Używaj
srcsetisizes, aby dopasować obraz do każdego viewportu. - Wczytuj wstępnie obraz LCP: dodaj
<link rel="preload" as="image">w sekcji<head>dla głównego zdjęcia. Przeglądarka pobierze je z absolutnym priorytetem.
Włącz cache HTTP
W PrestaShop: cache Smarty plus cache pełnostronicowy przez moduł albo reverse proxy typu Varnish. W WordPressie: wtyczka cache (LiteSpeed Cache, jeśli serwer działa na LiteSpeed Web Server, w przeciwnym razie WP Rocket). Zysk na LCP przy poprawnie skonfigurowanym cache HTTP to zwykle 1 do 2 sekund.
Wykorzystaj CDN
Cloudflare, BunnyCDN albo CDN wbudowany w usługę hostingową. Do obrazów, wideo i zasobów statycznych. Obniża LCP użytkownikom oddalonym geograficznie od Twojego serwera.
Optymalizacja CLS
CLS jest zwykle najłatwiejsze do naprawienia. Trzy główne działania:
Zawsze podawaj width i height przy obrazach
Przeglądarka musi zarezerwować miejsce na obraz, zanim zostanie on wczytany. Bez wymiarów zarezerwowana przestrzeń jest zerowa, a treść poniżej przesuwa się w momencie dotarcia obrazu.
<img src="produkt.webp" width="800" height="600" alt="..." />Liczy się proporcja wymiarów. Przeglądarka użyje CSS do dopasowania do rzeczywistego rozmiaru wyświetlania, ale zarezerwuje miejsce w poprawnych proporcjach.
Rezerwuj miejsce na banery i popupy
Paski cookies, popupy newslettera i banery pilności na górze strony generują CLS, jeśli wstrzykują się po załadowaniu. Rozwiązania: renderowanie po stronie serwera (HTML obecny już przy ładowaniu, tylko uwidaczniany przez CSS) albo zarezerwowanie wysokości w CSS od samego początku.
Poprawnie ładuj fonty webowe
Zjawiska FOUT (Flash of Unstyled Text) i FOIT (Flash of Invisible Text) wywołują CLS, gdy font zastępczy i docelowy mają różne wymiary. Rozwiązania: font-display: swap z dobrze dobranym fontem awaryjnym (zbliżony rozmiar), wstępne wczytywanie krytycznych fontów przez <link rel="preload"> albo użycie font-size-adjust do zrównania metryk.
Optymalizacja INP
INP jest najtrudniejsze z całej trójki. Zależy od jakości JavaScriptu wykonywanego w momencie interakcji użytkownika ze stroną.
Ogranicz blokujący JavaScript
Zaudytuj skrypty zewnętrzne: analitykę, czat, testy A/B, remarketing, popupy. Każdy dokłada czas wykonania na głównym wątku. Bądź bezlitosny: jeśli skrypt nie generuje mierzalnego przychodu, usuń go.
Dla skryptów, które zostają: ładuj je z atrybutem defer albo async, gdy tylko to możliwe. Tagi śledzące niemal zawsze da się odroczyć.
Dziel JavaScript na części
W witrynach z dużą ilością JS code splitting (ładowanie tylko kodu potrzebnego na bieżącej stronie) obniża INP. W PrestaShop 8 z jego bundlami możliwości są ograniczone, ale w WordPressie z ciężkimi wtyczkami to często optymalizacja o dużym znaczeniu.
Optymalizuj same interakcje
Częste interakcje, które psują INP:
- Dodanie do koszyka (szczególnie w WooCommerce)
- Wybór wariantu produktu
- Wyszukiwanie w mega menu z autouzupełnianiem
- Zastosowanie filtra na liście produktów
W każdym przypadku optymalizacja prowadzi przez profilowanie w Chrome (zakładka Performance), aby zidentyfikować wolne funkcje, a następnie ich refaktoryzację.
Specyfika PrestaShop
W PrestaShop najbardziej opłacalne działania to:
- Włączenie cache Smarty oraz łączenia i minifikacji zasobów w Parametry zaawansowane → Wydajność
- Kompilacja szablonów Smarty i wyłączenie rekompilacji przy każdej wizycie
- Użycie modułu generującego krytyczny CSS dla obszaru widocznego bez przewijania
- Audyt modułów zewnętrznych: jeden źle napisany moduł potrafi dołożyć 500 ms czasu po stronie serwera
Specyfika WordPress i WooCommerce
W WordPressie główne działania to:
- Obowiązkowa wtyczka cache (LiteSpeed Cache, WP Rocket, W3 Total Cache)
- Audyt wtyczek: wyłącz i usuń te nieużywane
- Masowa konwersja obrazów do WebP przez ShortPixel albo odpowiednik
- Ograniczenie skryptów WooCommerce na stronach, gdzie nie są potrzebne (strona główna, wpisy blogowe). Pozwala na to wtyczka typu Asset CleanUp
- Poważny hosting: na tanim współdzielonym nigdy nie przekroczysz wyniku Lighthouse mobile na poziomie 50
Częste błędy
- Optymalizowanie wyłącznie wyniku Lighthouse dla desktopu. Dla Google liczy się mobile.
- Ignorowanie danych terenowych na rzecz laboratoryjnych
- Instalowanie 5 wtyczek cache „na wszelki wypadek”. Wchodzą sobie w drogę, a efekt jest gorszy
- Kompresowanie obrazów do granic brzydoty. Celuj w 75 do 85 % jakości, nie niżej
- Blokowanie z nadgorliwości niezbędnego JavaScriptu (przycisk dodania do koszyka przestaje działać)
Aby pójść dalej
Wszystkie nasze artykuły o wydajności znajdziesz w kategorii Wydajność i Core Web Vitals. Po rozwiązania techniczne zajrzyj do modułów SEO do PrestaShop, które zawierają optymalizacje Core Web Vitals (generowanie krytycznego CSS, zaawansowany lazy loading, konwersja WebP). Szybki sklep to sklep, który konwertuje, i prawdopodobnie najlepsza inwestycja techniczna 2026 roku.
Aby przejść do działania: nasze zestawienia modułów przyspieszających sklep dla PrestaShop oraz dla WooCommerce.
