Core Web Vitals to dziś jeden z najważniejszych czynników rankingowych Google — i zarazem realny barometr tego, jak Twój sklep PrestaShop jest odbierany przez klientów. Wolna strona to nie tylko gorsze SEO, ale przede wszystkim porzucone koszyki, niższy współczynnik konwersji i straty liczone w złotówkach każdego dnia.

W tym artykule pokażemy konkretnie, jak wycisnąć z PrestaShop maksimum wydajności i osiągnąć zielone Core Web Vitals — bez przepisywania szablonu od zera.

Co mierzą Core Web Vitals?

Google sprawdza trzy metryki, które najlepiej oddają subiektywne wrażenie szybkości i stabilności strony:

• LCP (Largest Contentful Paint) — czas, w jakim ładuje się największy widoczny element (najczęściej zdjęcie produktu lub baner hero). Próg: 2,5 sekundy.
• INP (Interaction to Next Paint) — opóźnienie między kliknięciem użytkownika a reakcją interfejsu. Próg: 200 ms.
• CLS (Cumulative Layout Shift) — suma niespodziewanych przesunięć układu strony. Próg: 0,1.

Diagnoza — od czego zacząć

Zanim cokolwiek zoptymalizujesz, zmierz stan obecny. Polecamy dwa źródła danych:

1. PageSpeed Insights — szybki test laboratoryjny i polowy (CrUX), dla pojedynczego URL.
2. Search Console → Core Web Vitals — dane prawdziwych użytkowników z ostatnich 28 dni, pogrupowane po URL-ach.

7 najszybszych zysków w PrestaShop

1. Włącz cache i kompresję na poziomie serwera

OPcache w PHP, gzip/brotli w Nginx lub Apache oraz wbudowany cache PrestaShop (Smarty + Memcached lub Redis) to fundament. Sam Redis potrafi zredukować TTFB o 200–400 ms.

2. Optymalizacja obrazów (WebP/AVIF)

Zdjęcia produktów to zwykle 60–80% wagi strony. Konwersja do WebP/AVIF i automatyczne generowanie kolejnych rozmiarów (srcset) potrafi obniżyć LCP nawet o 1,5 sekundy.

3. Lazy loading i preload

Wszystkie obrazy poniżej linii zgięcia: loading="lazy". Główny baner hero: fetchpriority="high" + <link rel="preload">.

4. Odchudź motyw i wyłącz nieużywane moduły

PrestaShop instaluje domyślnie dziesiątki modułów, z których realnie używasz może 10. Każdy nieaktywny moduł to dodatkowy CSS, JS i zapytania SQL. Audyt modułów to często 30–40% mniej kodu.

5. Defer/async dla zewnętrznych skryptów

Piksele Facebooka, Google Tag Manager, czaty, narzędzia analityczne — wszystko, co nie jest krytyczne dla pierwszego renderu, ładuj z defer lub przez GTM z opóźnieniem.

6. CDN dla statycznych zasobów

Cloudflare, BunnyCDN czy nawet darmowy CDN od dostawcy hostingu skróci czas pobierania CSS/JS dla użytkowników spoza miasta, gdzie stoi serwer.

7. Stabilny layout (CLS)

Wszystkie obrazy muszą mieć width i height (lub aspect-ratio w CSS). Reklamy i bannery powinny mieć zarezerwowane miejsce. Czcionki — preload + font-display: swap z fallbackiem o zbliżonej metryce.

Czy warto inwestować w optymalizację?

Wpływ szybkości na konwersję jest dobrze udokumentowany. Według badań Google, każda dodatkowa sekunda ładowania mobile to spadek konwersji o 7–20%. Dla sklepu z obrotem 100 tys. zł/mc oznacza to nawet kilka tysięcy złotych straty miesięcznie.

Dobra wiadomość: większość optymalizacji wykonuje się raz, a efekt utrzymuje się przez lata — pod warunkiem, że masz prawidłowy proces wdrażania zmian (staging, monitoring, rollback).