Core Web Vitals w PrestaShop: jak zdjęcia psują LCP i co poprawić najpierw
Szybkość strony sklepu liczy się podwójnie: Google bierze ją pod uwagę w ocenie strony, a klient – w decyzji, czy w ogóle zostanie. W sklepach na PrestaShop najczęstszą przyczyną wolnej strony produktu są zdjęcia: za ciężkie, za duże albo ładowane w złej kolejności. W tym poradniku pokazuję, jak sprawdzić, czy to zdjęcia psują Twoje Core Web Vitals, i co poprawić najpierw.
Core Web Vitals w skrócie
| Wskaźnik | Co mierzy | Dobry wynik | Związek ze zdjęciami |
|---|---|---|---|
| LCP – Largest Contentful Paint | Kiedy pojawia się największy element na ekranie | do 2,5 s | Bezpośredni: na karcie produktu to prawie zawsze główne zdjęcie, na stronie głównej – baner lub slider |
| INP – Interaction to Next Paint | Jak szybko strona reaguje na kliknięcia | do 200 ms | Pośredni: ciężkie slidery i powiększenia zdjęć w JavaScript |
| CLS – Cumulative Layout Shift | Czy układ „skacze” podczas ładowania | do 0,1 | Bezpośredni: zdjęcia bez podanych wymiarów przesuwają treść |
Google ocenia wynik dla 75. percentyla wizyt, osobno na telefonach i komputerach. Oznacza to, że strona musi być szybka nie tylko na Twoim komputerze i światłowodzie, ale też u klienta z przeciętnym telefonem w tramwaju. Uczciwie trzeba dodać: dobre Core Web Vitals nie zastąpią dobrej treści i same nie wywindują sklepu na pierwsze miejsce. Wolna strona za to traci klientów, zanim zobaczą cenę.
Jak sprawdzić, czy winne są zdjęcia
- PageSpeed Insights (pagespeed.web.dev): górna część raportu to dane prawdziwych użytkowników z ostatnich 28 dni, dolna – test laboratoryjny. W teście znajdziesz pozycję „Element największego wyrenderowania treści” – jeśli to
img, wiesz, od czego zacząć. - Google Search Console › Podstawowe wskaźniki internetowe: pokazuje grupy podobnych adresów z problemem, np. wszystkie karty produktów naraz.
- Trzy typy stron: strona główna, kategoria i karta produktu. Każdy ma inny element LCP i inne problemy.
Pięć typowych problemów ze zdjęciami w PrestaShop
1. Za ciężkie pliki
Zdjęcie prosto z aparatu albo od dostawcy waży 2–5 MB. PrestaShop tworzy z niego miniatury, ale z ustawieniami kompresji, których nikt nie zmieniał od instalacji. Do tego zostaje format JPEG lub PNG. Według Google zdjęcia WebP są przy porównywalnej jakości o 25–34% mniejsze od JPEG, a PNG ze zdjęciem produktu potrafi być kilka razy cięższy od obu.
2. Za duże wymiary
Motyw ładuje format large_default (często 800 px) w miejscu, gdzie zdjęcie ma na ekranie 250 px. Przeglądarka pobiera kilka razy więcej danych, niż potrzebuje. Sprawdź w motywie, który format zdjęć jest użyty na liście produktów i w karcie produktu.
3. Leniwe ładowanie głównego zdjęcia
loading="lazy" jest świetne dla zdjęć poniżej pierwszego ekranu, ale na głównym zdjęciu produktu opóźnia LCP. Główne zdjęcie powinno ładować się od razu, najlepiej z fetchpriority="high". To częsty efekt uboczny modułów, które dodają lazy-load „do wszystkich zdjęć”.
4. Brak wymiarów
Zdjęcie bez atrybutów width i height (albo bez aspect-ratio w CSS) zajmuje miejsce dopiero po pobraniu i przesuwa tekst i przyciski. Tak powstaje wysoki CLS – i kliknięcia w niewłaściwy przycisk.
5. Slider na stronie głównej
Pięć dużych slajdów ładowanych naraz, do tego biblioteka JavaScript do ich przewijania. Pierwszy slajd jest elementem LCP, a reszta konkuruje z nim o łącze. Ogranicz liczbę slajdów i ładuj kolejne dopiero po pierwszym.
Szybki audyt zdjęć na serwerze
Jeśli masz dostęp SSH, te polecenia w katalogu głównym sklepu pokażą skalę problemu w kilka sekund:
# ile miejsca zajmują zdjęcia produktów
du -sh img/p
# ile plików JPG jest większych niż 300 KB
find img/p -type f -name '*.jpg' -size +300k | wc -l
# duże miniatury formatu large_default (pierwsze 20)
find img/p -type f -name '*-large_default.jpg' -size +150k | head -20
# czy w sklepie są już pliki WebP
find img/p -type f -name '*.webp' | wc -lNazwy formatów (large_default, home_default itd.) znajdziesz w Wygląd › Ustawienia zdjęć (Design › Image Settings). Jeśli miniatury listy produktów ważą po 150 KB i więcej, a plików WebP nie ma wcale, wiesz, gdzie jest największy zysk.
Kolejność poprawek
- Główne zdjęcie produktu i baner na stronie głównej: właściwy rozmiar, format WebP, bez lazy-load, z
fetchpriority="high". - Miniatury w kategoriach: WebP i lazy-load dla wszystkiego poniżej pierwszego ekranu.
- Wymiary zdjęć w szablonach motywu – koniec ze skaczącym układem.
- Slider: mniej slajdów, lżejsze pliki.
- Dopiero potem skrypty i style modułów.
Po zmianach test laboratoryjny pokaże różnicę od razu. Dane prawdziwych użytkowników w PageSpeed Insights i Search Console są liczone z 28 dni, więc pełny efekt zobaczysz po około czterech tygodniach.
Lżejsze zdjęcia bez ręcznej pracy
CTW Image Optimizer automatycznie konwertuje zdjęcia sklepu do WebP – istniejące i nowo dodawane – i pokazuje, ile ważyły przed, ile po i ile miejsca zaoszczędziłeś. Działa na PrestaShop od 1.7 do 9.x, także tam, gdzie core nie obsługuje WebP.