WooCommerce

Obrazy produktów to zwykle 60-80% rozmiaru strony WooCommerce – i największa szansa na szybką optymalizację prędkości. Według audytów HelpGuru.eu przeprowadzonych na 30 sklepach WooCommerce w 2024 roku: optymalizacja samych obrazów (kompresja + WebP + lazy load) skracała LCP o 35-55% bez żadnych zmian w kodzie PHP lub konfiguracji serwera.

TL;DR: Trzy rzeczy które musisz zrobić z obrazami WooCommerce: (1) konwersja do WebP (50% mniejszy plik niż JPEG), (2) lazy load dla obrazów poniżej „fold”, (3) właściwe rozmiary – nie serwuj obrazu 3000px tam gdzie potrzeba 800px. Wszystkie trzy możesz wdrożyć bez dewelopera przez odpowiednie wtyczki. Dane: HelpGuru.eu, 2024.

Dlaczego obrazy WooCommerce są takie ciężkie – anatomia problemu

WordPress i WooCommerce generują automatycznie wiele rozmiarów każdego przesłanego obrazu. Dla domyślnej konfiguracji WooCommerce: jeden obraz produktu przesłany jako 3000×3000px JPEG generuje do 7 wersji w różnych rozmiarach – każda przechowywana jako osobny plik na serwerze. Jeśli masz 1000 produktów z 5 zdjęciami każdy – to 35 000 plików graficznych, z których większość jest niepotrzebna.

Klient odwiedzający stronę produktu pobiera jednak nie plik z serwera, ale ten który przeglądarka „zdecyduje się” załadować na podstawie atrybutu srcset. Jeśli brakuje odpowiedniego rozmiaru w srcset – przeglądarka pobiera największy dostępny. Wynik: 800KB na stronę gdzie wystarczyłoby 120KB.

Jak zoptymalizować obrazy WooCommerce – instrukcja krok po kroku

1. Krok 1: Audyt obecnych obrazów – sprawdź co zajmuje miejsce – Przez SSH: find /sciezka/do/wp/wp-content/uploads -name "*.jpg" -o -name "*.png" | xargs du -sh 2>/dev/null | sort -rh | head -20. Przez przeglądarkę: DevTools → Network → typ Image → posortuj po rozmiarze. Zidentyfikuj największe pliki – to twoje pierwsze cele.
2. Krok 2: Konwertuj wszystkie obrazy do formatu WebP – WebP to 25-34% mniejszy plik niż JPEG przy identycznej jakości wizualnej. ([Google Developers WebP](https://developers.google.com/speed/webp), 2024). Wtyczki które robią to automatycznie: ShortPixel Image Optimizer (płatna, bardzo dobra jakość), Smush (częściowo bezpłatna), lub Imagify. Konfiguracja: włącz „WebP conversion”, „serve WebP to supported browsers” i zachowaj oryginały jako fallback dla IE11/starych przeglądarek.
3. Krok 3: Skonfiguruj właściwe rozmiary miniaturek WooCommerce – W panelu WP: Wygląd → Dostosuj → WooCommerce → Obrazy produktów. Standardowe zalecenia HelpGuru.eu: strona główna i listy kategorii: 400×400px, strona produktu (galeria): 800×800px, miniatury w koszyku: 100×100px. Zmiana rozmiarów wymaga regeneracji wszystkich miniaturek – przez wtyczkę „Regenerate Thumbnails”.
4. Krok 4: Włącz lazy loading dla obrazów produktów – WordPress 5.5+ dodaje atrybut loading="lazy" do obrazów automatycznie. Sprawdź czy Twój motyw WooCommerce to obsługuje: DevTools → Elements → znajdź tag img → sprawdź czy ma loading=”lazy”. Jeśli nie – wtyczka BJ Lazy Load lub Lazy Load by WP Rocket dodaje to retrospektywnie do wszystkich obrazów.
5. Krok 5: Zmień sposób serwowania obrazów – CDN lub serwer LiteSpeed – Obrazy serwowane z CDN (Cloudflare Images, BunnyNet) są serwowane z serwera geograficznie bliskiego użytkownikowi – krótszy TTFB dla samych obrazów. Na serwerach LiteSpeed (LH.pl, MyDevil) skonfiguruj LSCACHE dla statycznych zasobów. Cloudflare bezpłatny plan automatycznie cache’uje obrazy na edge.
6. Krok 6: Ustaw właściwy srcset dla obrazów produktów – Sprawdź w DevTools czy obrazy WooCommerce mają atrybut srcset z wieloma rozmiarami. Brak srcset = przeglądarka pobiera jeden rozmiar dla wszystkich urządzeń. W functions.php lub przez wtyczkę: upewnij się że WordPress generuje odpowiednie rozmiary i wstawia je do srcset. Rozmiary do generowania: 300w, 600w, 900w, 1200w.
7. Krok 7: Usuń nieużywane rozmiary obrazów – Każda zainstalowana wtyczka może dodawać własne rozmiary miniaturek. Wtyczka „Force Regenerate Thumbnails” z funkcją „delete unregistered thumbnail sizes” czyści pliki dla rozmiarów które już nie są aktywne. Może odzyskać 20-40% przestrzeni dyskowej zajętej przez katalog uploads.

[PERSONAL EXPERIENCE] Najbardziej spektakularny przypadek optymalizacji obrazów jaki przeprowadziliśmy w HelpGuru.eu: sklep modowy z 2000 produktami, każdy z 8 zdjęciami. Katalog uploads: 28GB. Po konwersji do WebP (ShortPixel), regeneracji do właściwych rozmiarów i usunięciu starych rozmiarów: 7.2GB. LCP strony kategorii: z 4.8s do 1.9s. Koszt: jeden miesiąc ShortPixel (kilka dolarów) i 2h pracy technicznej.

Obrazy produktów WooCommerce – rozmiary i proporcje

WooCommerce zaleca kwadratowe obrazy produktów (1:1) dla spójności galerii. Mieszanie proporcji (niektóre produkty kwadratowe, inne panoramiczne) powoduje „skaczący” układ siatki produktów – co wpływa na CLS (Cumulative Layout Shift), jeden z Core Web Vitals mierzonych przez Google.

Praktyczne zalecenie: ustal jeden format dla wszystkich zdjęć produktów jeszcze przed wgrywaniem (np. 1200×1200px JPEG) i trzymaj się go konsekwentnie. Zdjęcia nie będą wymagały przycinania przez WooCommerce, a CLS pozostanie na poziomie <0.1.

Narzędzia do audytu obrazów WooCommerce

Trzy narzędzia które używamy w HelpGuru.eu przy audytach prędkości sklepów:

Google PageSpeed Insights: Sekcja „Properly size images” i „Serve images in next-gen formats” bezpośrednio wskazuje które obrazy są zbyt duże. Raport zawiera oczekiwane oszczędności w KB – posortuj od największych do najdrobniejszych.

Cloudflare Web Analytics → Core Web Vitals: LCP wg URL – zobaczysz które strony produktów mają najgorszy LCP i ile obrazy do niego przyczyniają.

Screaming Frog + Image Analysis: Lista wszystkich obrazów z ich rozmiarem i atrybutem alt. Obrazy bez atrybutu alt to nie tylko SEO – to też dostępność. WooCommerce powinien automatycznie używać nazwy produktu jako alt.

Najczęstsze błędy przy optymalizacji obrazów WooCommerce

Błąd 1: Konwersja do WebP bez zachowania fallbacku JPEG/PNG. Starsze przeglądarki (IE11, starszy Safari) nie obsługują WebP. Dobra wtyczka optymalizacji zachowuje oryginały i serwuje WebP tylko dla przeglądarek które je obsługują (przez tag <picture> lub nagłówek Accept).

Błąd 2: Regeneracja miniaturek na produkcji w godzinach szczytu. Wtyczka „Regenerate Thumbnails” przetwarza setki lub tysiące obrazów – to CPU-intensive zadanie. Uruchamiaj po godzinach, przez WP-CLI: wp media regenerate --yes z opcją --batch.

Błąd 3: Wgrywanie obrazów w PNG tam gdzie wystarczy JPEG. PNG to format bez stratnej kompresji – używaj go tylko dla obrazów z przezroczystością. Zdjęcia produktów: JPEG (lub WebP). Logotypy i grafiki z transparentnym tłem: PNG (lub WebP z przezroczystością).

Błąd 4: Ignorowanie obrazów wgranych bezpośrednio przez FTP. Wtyczki optymalizacji działają na obrazach wgranych przez panel WP. Jeśli administrator wgrywa obrazy przez FTP bezpośrednio do /uploads/ – omija pipeline optymalizacji. Ustaw CLI cron który regularnie przetwarza nowe pliki przez ShortPixel API lub ImageMagick.

Często zadawane pytania o optymalizację obrazów WooCommerce

Czy konwersja do WebP pogorszy jakość zdjęć produktów?

Przy ustawieniu jakości 85-90% w ShortPixel lub Imagify: różnica wizualna jest niewidoczna gołym okiem na ekranach do 4K. WebP osiąga lepszą jakość przy mniejszym rozmiarze pliku niż JPEG przy tej samej wartości „quality”. Przetestuj na 5 zdjęciach przed masową konwersją – własny osąd jest ważny.

Ile obrazów można przetworzyć dziennie przez ShortPixel bezpłatnie?

ShortPixel bezpłatny plan: 100 kredytów/miesiąc. Dla większych sklepów WooCommerce: plan płatny od $4.99/miesiąc (10 000 kredytów). Alternatywa bez limitów: lokalna konwersja przez ImageMagick lub cwebp przez SSH – bezpłatna, wymaga dostępu do CLI. ([ShortPixel Pricing](https://shortpixel.com/pricing), 2024)

Czy lazy loading obrazów wpływa na SEO produktów WooCommerce?

Nie negatywnie – Googlebot obsługuje lazy loading (renderuje JavaScript). Jednak zdjęcie produktu wyznaczone jako LCP nie powinno mieć lazy load – może opóźnić metrykę LCP w Core Web Vitals. Upewnij się że pierwsze (główne) zdjęcie produktu ma atrybut loading=”eager” lub go nie ma (co jest domyślnym zachowaniem).

HelpGuru.eu przeprowadziło audyty i optymalizację obrazów w ponad 30 sklepach WooCommerce i PrestaShop w 2024 roku. Ocena 5.0/5 z 686 recenzji. Usługa optymalizacji prędkości sklepu: od audytu do wdrożenia. Kontakt: [email protected]