Karta produktu w PrestaShop bardzo często ładuje się wolno z jednego powodu: zdjęcia są za ciężkie albo jest ich zbyt dużo. Nawet jeśli serwer działa szybko, przeglądarka musi pobrać kilka lub kilkanaście plików graficznych, a to przy wolniejszym internecie potrafi trwać dłużej niż samo wygenerowanie strony.
W sklepie problem narasta wraz z katalogiem. Dochodzą galerie, miniatury, zdjęcia wariantów, czasem zoom, a do tego grafiki z modułów, na przykład banery lub elementy rekomendacji. Użytkownik widzi stronę, ale przez chwilę czeka na najważniejsze elementy, czyli główne zdjęcie produktu i miniatury w galerii. To psuje pierwsze wrażenie i zwiększa ryzyko, że klient zamknie kartę.
Dobra optymalizacja obrazów nie polega na tym, że obniżasz jakość do minimum. Chodzi o to, aby wysyłać pliki w rozsądnym rozmiarze, dobrze je skompresować i ładować je we właściwej kolejności. Dzięki temu zdjęcia wyglądają tak samo, ale karta produktu staje się lżejsza i szybciej nadaje się do kliknięcia.
W tym poradniku przejdziemy przez trzy główne obszary: WebP, lazy loading i CDN, ale zaczniemy od podstaw, czyli od rozmiarów miniatur i kompresji. To właśnie te dwie rzeczy najczęściej dają największy efekt, a dopiero potem warto dokładać kolejne warstwy.
Dlaczego obrazki spowalniają kartę produktu w PrestaShop
Na karcie produktu masz zwykle największe zdjęcia w sklepie. Do tego dochodzi galeria, miniatury, często zdjęcia wariantów i dodatkowe grafiki w opisie. To oznacza, że przeglądarka ma dużo pracy, zanim strona będzie wyglądała na gotową, nawet jeśli HTML już się załadował.
Drugi problem to dopasowanie rozmiaru do ekranu. Jeżeli sklep wysyła zdjęcie o szerokości 3000 px, a na stronie wyświetla je w 900 px, to użytkownik pobiera kilka razy więcej danych niż potrzeba. Na komputerze bywa to niezauważalne, ale na telefonie różnica jest ogromna.
Trzeci problem to kolejność pobierania. Gdy strona ładuje wszystkie obrazki naraz, zdjęcie główne konkuruje o zasoby z miniaturami, obrazami w opisie i elementami z modułów. Użytkownik czeka dłużej na to, co powinien zobaczyć jako pierwsze.
Jeśli chcesz uporządkować temat szybkości sklepu szerzej, a nie tylko w kwestii obrazów, pomocny jest wpis Wydajność PrestaShop: ustawienia, które realnie przyspieszają sklep, bo pokazuje, jak łączyć optymalizacje frontu z ustawieniami po stronie serwera.
Szybka diagnoza w 10 minut: co sprawdzić i gdzie kliknąć
Weź jeden produkt, który ma kilka zdjęć i jest typowy dla sklepu. Otwórz go w przeglądarce, włącz narzędzia deweloperskie i przejdź do zakładki Network. Teraz odśwież stronę i posortuj pliki po rozmiarze. Zobaczysz od razu, czy największe pliki to zdjęcia i które dokładnie ważą najwięcej.
Kliknij największy obrazek i sprawdź jego wymiary oraz typ pliku. Jeśli wymiary są znacznie większe niż to, co widzisz na ekranie, wiesz już, że problemem są rozmiary i miniatury. Jeśli typ to PNG, a zdjęcie nie ma przezroczystości, prawdopodobnie łatwo naprawisz sprawę przez zmianę formatu lub przejście na WebP.
Sprawdź też, ile obrazów ładuje się na start. Często karta produktu pobiera nie tylko galerię, ale też miniatury podobnych produktów i grafiki z modułów, których użytkownik nie widzi od razu. To jest pierwszy sygnał, że lazy loading może dać realną poprawę.
Na koniec uruchom PageSpeed Insights lub Lighthouse i potraktuj wyniki jako podpowiedź. Zwykle pojawiają się tam dwa komunikaty: obrazki mają zbyt duży rozmiar oraz obrazki poza ekranem ładują się zbyt wcześnie. Jeśli widzisz oba, to znaczy, że zmiany opisane dalej najpewniej przyniosą efekt.
Miniatury i rozmiary zdjęć: jak nie wysyłać zbyt dużych plików
Największy, a jednocześnie najbezpieczniejszy zysk daje dopasowanie miniatur do motywu. W PrestaShop masz system obrazów w różnych rozmiarach, ale dopiero poprawna konfiguracja sprawia, że sklep serwuje właściwą wersję pliku w odpowiednim miejscu.
W praktyce chcesz, żeby miniatury galerii były lekkie, bo mają być tylko podglądem, a zdjęcie główne ma być większe, ale nadal rozsądne. Jeśli na stronie zdjęcie główne ma około 900–1200 px szerokości, to serwowanie plików o szerokości 3000 px jest prawie zawsze stratą.
Po zmianie rozmiarów najważniejszy krok to regeneracja miniaturek. Bez regeneracji sklep nadal będzie podawał stare pliki, bo nie ma wygenerowanych nowych wersji. Po regeneracji sprawdź kilka produktów, bo czasem motyw jest podpięty pod konkretny typ miniatury i przy zmianach widać, czy wszystko pasuje. Jeżeli masz duży katalog, regeneracja może potrwać długo i obciążyć serwer. Zrób to poza szczytem, a przed pracami upewnij się, że masz kopię zapasową. W razie potrzeby przypomnij sobie zasady z poradnika Kopie zapasowe w hostingu. Jak wybrać backup, który działa?.
Kompresja zdjęć: jak zmniejszyć wagę bez widocznej utraty jakości
Kompresja działa najlepiej, gdy podchodzisz do niej praktycznie, a nie na ślepo. Weź kilka zdjęć z różnych kategorii, najlepiej takie, które mają dużo detali i takie, które mają gładkie tło. To pozwala ocenić, czy kompresja nie psuje zdjęć w miejscach, które są ważne dla klienta.
Zbyt wysoka jakość często daje minimalną różnicę wizualną, a dużą różnicę w wadze pliku. Dlatego warto stopniowo obniżać jakość i sprawdzać, kiedy pojawiają się artefakty. Jeśli na zdjęciu produktu zaczynają być widoczne brzydkie plamy, wracasz o krok, bo celem jest mniejsza waga bez odczuwalnej straty jakości.
Zwróć uwagę na PNG. PNG jest dobre do grafik i do przezroczystości, ale do zdjęć produktów zazwyczaj jest zbyt ciężkie. Jeśli Twoje produktowe zdjęcia są w formacie PNG, sprawdź, czy to jest konieczne. W wielu sklepach wystarczy JPEG lub WebP i różnica w wadze jest bardzo duża.
Po zmianach testuj na telefonie i na sieci komórkowej, bo tam efekt jest najbardziej widoczny. Jeśli karta produktu przestaje się ciągnąć i szybciej widać główne zdjęcie, masz poprawę, którą odczuje większość klientów.
WebP: jak wdrożyć i jak sprawdzić, czy faktycznie działa
WebP jest przydatny, bo często zmniejsza wagę zdjęć bez pogorszenia jakości. Najważniejsze jest jednak to, żeby WebP było rzeczywiście serwowane użytkownikom, a nie tylko wygenerowane na serwerze. Zdarza się, że ktoś włącza moduł do WebP, ale sklep nadal wysyła JPEG, bo brakuje poprawnego podmienia formatu. Po wdrożeniu WebP zrób prosty test. Otwórz kartę produktu, wejdź w Network, kliknij obrazek główny i sprawdź typ pobranego pliku. Jeśli widzisz WebP, to znaczy, że konfiguracja działa. Jeśli nadal pobierasz JPEG lub PNG, to oznacza, że WebP nie jest dostępny dla klientów.
Pamiętaj też o zgodności. Część przeglądarek może mieć problemy z WebP w specyficznych warunkach, dlatego zawsze potrzebujesz mechanizmu awaryjnego, który poda klasyczny format. W praktyce to powinno działać automatycznie, ale warto to sprawdzić na kilku urządzeniach.
WebP często łączy się z tematem cache, bo po zmianie formatu łatwo o sytuację, w której część użytkowników widzi stare pliki. Jeśli korzystasz z CDN lub mocnego cache po stronie hostingu, zaplanuj czyszczenie cache po wdrożeniu lub zadbaj o wersjonowanie plików.
Lazy loading: co ładować później, a co zostawić na start
Lazy loading ma prosty cel: nie ładuj od razu obrazów, których użytkownik jeszcze nie widzi. Na karcie produktu to oznacza, że zdjęcie główne i pierwsze miniatury powinny ładować się od razu, a reszta galerii, obrazki w opisie oraz grafiki w sekcjach poniżej pierwszego ekranu mogą doładowywać się po przewinięciu.
Najczęstsza pomyłka polega na tym, że lazy loading obejmuje też zdjęcie główne produktu. Wtedy użytkownik czeka na kluczowy element i ma wrażenie, że strona ładuje się wolniej, choć technicznie pobiera mniej. Poprawne ustawienie jest takie, że zdjęcie główne ma priorytet, a lazy loading dotyczy reszty.
Po wdrożeniu sprawdź też, czy układ strony nie skacze. Jeśli obrazek pojawia się później i przesuwa elementy, użytkownik widzi nieprzyjemne przeskoki. Pomaga ustawienie wymiarów obrazów tak, aby przeglądarka od razu rezerwowała miejsce, zanim plik się pobierze.
Lazy loading warto testować na kilku produktach, bo nie każdy produkt ma taką samą liczbę zdjęć i modułów. Jeśli na jednym działa świetnie, a na innym pojawiają się opóźnienia w galerii, może to oznaczać konflikt z motywem lub skryptami wariantów.
CDN dla obrazów: kiedy pomaga, a kiedy tylko komplikuje
CDN pomaga wtedy, gdy chcesz szybciej dostarczać pliki statyczne, a klienci są rozproszeni lub sklep ma duży ruch. Zamiast pobierać zdjęcia z jednego serwera, użytkownik pobiera je z węzła bliżej siebie. To skraca czas pobierania, szczególnie gdy zdjęć jest dużo.
CDN nie jest jednak pierwszym krokiem, jeśli zdjęcia są źle przygotowane. Jeśli serwujesz zbyt duże pliki, CDN może je dostarczyć szybciej, ale nadal wysyłasz za dużo danych. Dlatego rozsądna kolejność to: rozmiary miniatur, kompresja, WebP i dopiero CDN, jeśli nadal chcesz poprawiać czasy pobierania.
Największe ryzyko CDN to cache. Jeśli podmieniasz zdjęcia albo regenerujesz miniatury, CDN może jeszcze długo serwować stare wersje. Dlatego przed wdrożeniem ustal, jak będziesz czyścić cache, oraz kiedy to robisz. Bez tego użytkownicy mogą widzieć mieszankę starych i nowych zdjęć.
Jeśli chcesz uporządkować temat CDN pod kątem szybkości i realnego wpływu na czasy ładowania, przyda Ci się artykuł CDN w hostingu: kiedy ma sens, ile kosztuje i jak wpływa na TTFB oraz Core Web Vitals.
Gdy problemem jest serwer: generowanie miniatur i limity hostingu
W dużym sklepie problemem bywa nie tylko pobieranie zdjęć przez klientów, ale też praca serwera przy przetwarzaniu obrazów. Generowanie miniatur, konwersje formatów i operacje na plikach potrafią mocno obciążyć CPU i dysk, zwłaszcza gdy katalog ma wiele tysięcy produktów.
Jeśli regeneracja miniatur trwa bardzo długo, pojawiają się błędy albo panel zaczyna działać ociężale w trakcie tych operacji, możliwe, że środowisko ma zbyt ciasne limity. Wtedy część optymalizacji będzie działała, ale prace na obrazach będą problematyczne. W takiej sytuacji warto rozumieć, jak działa ograniczanie zasobów, o czym mówi artykuł o limitach hostingu.
Jeśli sklep rośnie i coraz częściej czujesz, że to nie zdjęcia, tylko stabilność środowiska jest problemem, wróć do decyzji o typie hostingu. Artykuł PrestaShop: hosting współdzielony vs hosting VPS pomaga rozpoznać moment, w którym VPS zaczyna mieć sens.
Plan wdrożenia krok po kroku
Najpierw wybierz kilka produktów testowych, najlepiej z różnych kategorii, i sprawdź w Network, jakie zdjęcia są największe oraz ile obrazów ładuje się na start. Dzięki temu będziesz widzieć zmianę na liczbach, a nie tylko na wrażeniu.
Następnie popraw rozmiary miniatur i wykonaj regenerację. To zwykle daje największy efekt w wadze plików, a jednocześnie jest bezpieczne, jeśli robisz to świadomie i poza szczytem. Po regeneracji sprawdź, czy galeria wygląda poprawnie na kilku produktach.
Kolejny krok to kompresja i uporządkowanie formatów, szczególnie ograniczenie niepotrzebnych PNG. Po tych dwóch krokach często okazuje się, że karta produktu jest już wyraźnie lżejsza, a WebP staje się dodatkiem, a nie ratunkiem.
Dopiero potem wdrażasz WebP i testujesz, czy format jest naprawdę serwowany użytkownikom. Na koniec dokładasz lazy loading dla obrazów poza pierwszym ekranem i oceniasz, czy pierwsze wrażenie jest lepsze. CDN zostawiasz na etap, w którym masz już dobre, lekkie pliki i chcesz jeszcze skrócić czas dostarczania.
Jeśli w trakcie tych prac musisz przenosić sklep lub zmieniać środowisko, trzymaj się bezpiecznej ścieżki z poradnika Migracja strony między hostingami krok po kroku, bo optymalizacja obrazów często idzie w parze z porządkami na hostingu.
FAQ – Najczęściej zadawane pytania
Otwórz kartę produktu, wejdź w Network i posortuj pliki po rozmiarze. Jeśli największe elementy to zdjęcia i ich pobieranie zajmuje najwięcej czasu, masz jasny sygnał, że optymalizacja obrazów da efekt.
W większości sklepów większy zysk daje poprawa miniatur i rozmiarów, bo przestajesz wysyłać za duże pliki. WebP jest świetnym dodatkiem, ale często działa najlepiej wtedy, gdy najpierw masz dobrze ustawione rozmiary.
Pomaga wtedy, gdy strona ładuje dużo obrazów poza pierwszym ekranem. Może zaszkodzić, jeśli obejmie zdjęcie główne lub elementy, które użytkownik musi zobaczyć od razu. Dlatego ważne jest dobre ustawienie priorytetów.
CDN może skrócić czas pobierania, ale nie zmniejszy wagi plików, jeśli ich nie zoptymalizujesz. Najpierw zmniejsz wagę i dopasuj rozmiary, a dopiero potem rozważ CDN, jeśli nadal chcesz skracać czasy.
Tak, bo szybsza karta produktu zwykle daje lepsze doświadczenie użytkownika, a to przekłada się na zachowanie klientów. Jeśli interesuje Cię szerszy kontekst, warto też zerknąć na temat CDN i szybkości w artykule o CDN.
30-letnia pasjonatka informatyki, która świat serwerów i hostingów zna od podszewki. Wierzy, że technologia powinna ułatwiać życie, a nie je komplikować. Żyje w ciągłym ruchu – jeśli akurat nie konfiguruje nowej usługi, prawdopodobnie pakuje plecak na kolejną wyprawę w nieznane.
Dodaj komentarz