Jak przyspieszyć działanie sklepu na WooCommerce?

WordPress, na którym działa WooCommerce, uchodzi za bardzo wydajny CMS dla małych i średnich stron, zwłaszcza tych statycznych. W przypadku sklepów jest jednak trudniej, ponieważ mamy wtedy do czynienia z bardziej rozbudowaną bazą danych i większą liczbą unikalnych podstron. To zwykle oznacza też dużą liczbę pluginów, które trzeba zainstalować, aby obsłużyć całą ścieżkę zakupową oraz integracje z zewnętrznymi systemami.

Dlatego jeśli chcesz przyspieszyć sklep WooCommerce, obszarów do optymalizacji będzie sporo. Te główne, o których więcej powiemy za moment, to:

• hosting,
• mechanizmy cache,
• zainstalowane wtyczki,
• zasoby strony sklepu, zwłaszcza obrazy,
• front-end sklepu.

Hosting i zasoby serwera

Ograniczeń serwera nie da się obejść. Jeżeli hosting jest zbyt słaby względem wielkości sklepu i skali generowanego ruchu, nawet najlepszy zespół developerów nie pomoże.

Co jest najważniejsze:

1. Typ hostingu – dla średniej wielkości sklepu optymalnym rozwiązaniem najczęściej jest VPS (Virtual Private Server), gdzie dzielisz serwer fizyczny z innymi użytkownikami, ale masz zagwarantowane zasoby (RAM, CPU i przepustowość). Jeśli to nie wystarcza, pozostaje hosting dedykowany.
2. Ilość pamięci RAM – bezwzględne minimum to 2 GB, ale dla większości sklepów zalecamy przynajmniej 4 GB.
3. Dyski, na jakich działa serwer – najlepszą wydajność zapewniają dyski NVMe, znacznie szybsze od standardowych SSD pod kątem operacji odczytu i zapisu.
4. Software serwera – dużą różnicę potrafi zrobić przejście z najpopularniejszych w Polsce Apache lub Nginx na LiteSpeed.

Dokładne wymagania, jakie powinien spełniać serwer, znajdziesz na stronie twórców WooCommerce.

Wtyczki i ich wpływ na wydajność

WooCommerce samo w sobie dokłada do kodu strony dziesiątki plików PHP, własne tabele w bazie danych i spory zestaw skryptów ładowanych na front-endzie.

To samo robią wszystkie wtyczki SEO, pluginy bezpieczeństwa, page buildery, narzędzia analityczne albo – co w szczególności dotyczy sklepów – wtyczki do integracji z zewnętrznymi aplikacjami, np. ERP albo systemami magazynowymi.

Według raportu Metorik Insights for WooCommerce z kwietnia tego roku przeciętnej wielkości sklep korzysta z… 58 wtyczek. To bardzo dużo – podczas audytów często okazuje się, że część z nich jest albo zbędna, albo ma lepszej jakości „zamienniki” w bibliotece WordPressa. Dlatego warto trzymać się dwóch zasad:

• co jakiś czas przeprowadzaj „inwentaryzację” wszystkich zainstalowanych pluginów i usuwaj te, które są niepotrzebne;
• jeśli chcesz wdrożyć nową funkcję na stronie, przetestuj przynajmniej kilka popularnych wtyczek z biblioteki, które ją oferują, pod kątem liczby generowanych dodatkowych zapytań HTTP do bazy danych. Można to łatwo sprawdzić w narzędziu Query Monitor.

Cache i mechanizmy buforowania

Wydajność WooCommerce bardzo łatwo można poprawić wdrażając cache – to zresztą dotyczy każdej strony internetowej.

Mechanizm buforowania jest prosty. Zamiast generować daną stronę od zera przy każdym żądaniu, serwer wysyła przeglądarce gotową, już wcześniej wygenerowaną wersję strony, zapisaną w pamięci podręcznej. Tak działa najprostszy typ buforowania, page cache. W bibliotece WordPressa można znaleźć wiele wtyczek, które pozwalają go skonfigurować w kilka minut – wystarczy wspomnieć o WP Rocket, W3 Total Cache czy LiteSpeed Cache.

Optymalizacja obrazów i zasobów statycznych

W najnowszym raporcie Web Almanac, publikowanym co roku przez organizację The HTTP Archive, przeczytamy, że pliki graficzne stanowią średnio ok. 40% wagi stron internetowych. A w przypadku e-sklepów możemy śmiało założyć, że ten procent jest dużo wyższy.

Podobnie jak przy wtyczkach, kilku zasad wręcz trzeba się trzymać, jeśli zależy Ci na wydajności:

• najlepszymi formatami do publikacji zdjęć na stronie są WebP (waży średnio 25-35% mniej niż JPEG) oraz AVIF (redukuje wagę pliku o 40-50%). Oba są obsługiwane natywnie przez najnowsze wersje WordPressa;
• przed wstawieniem na stronę zawsze warto skompresować grafiki. W bibliotece WP jest sporo wtyczek (np. Imagify, ShortPixel czy Optimole), które zrobią to bez widocznej dla oka straty jakości;
• dla obrazów wgrywanych przez edytor i bibliotekę mediów WordPress automatycznie generuje kilka wersji o różnej rozdzielczości i dodaje do nich atrybut srcset. Dzięki temu przeglądarka może samodzielnie wybrać, którą wersję pobierze w zależności od rozmiarów ekranu. Jeśli jednak zdjęcia umieszczane są ręcznie w szablonie albo poprzez page builder (np. Elementor), trzeba o to zadbać samemu;
• WordPress automatycznie dodaje również atrybut loading="lazy" dla wszystkich zdjęć – to dobrze, ale trzeba uważać przy banerach oraz głównych zdjęciach produktu. Ich wczytywanie nie powinno być opóźnione, wręcz przeciwnie, dlatego warto przy nich dodać atrybuty loading=”eager” oraz fetchpriority="high”.

Motyw i front-end sklepu

Jako że WooCommerce jest dosyć „ciężką” wtyczką, motyw pod platformę powinien być w miarę prosty i jak najlżejszy. Z biblioteki WP możemy polecić takie jak Astra, Kadence czy GeneratePress. Rozbudowane motywy all-in-one, które oferują setki opcji konfiguracji i są sprzedawane jako „kompatybilne z każdym page builderem” mają to do siebie, że są pisane z myślą o elastyczności – kosztem jest to, że ładują ogromne ilości kodu, z którego nigdy nie skorzystasz.

To były podstawy, o które trzeba zadbać zawsze. Jeżeli mimo optymalizacji tych obszarów sklep dalej działa wolno, musimy poszukać kolejnych rozwiązań.

W ramach podsumowania przygotowaliśmy jeszcze tabelę z listą priorytetów, czyli obszarami, którymi warto zająć się w pierwszej kolejności. To zestawienie Ci się przyda, jeśli dopiero zaczynasz pracę nad optymalizacją WooCommerce i swojego sklepu.

I na koniec, kilka narzędzi, które pomogą Ci sprawdzić, czy strona Twojego sklepu wymaga optymalizacji albo czy kroki, które już podjąłeś, przyniosły wymierne efekty.

1. PageSpeed Insights – darmowe narzędzie od Google. Po wpisaniu adresu URL strony pokazuje wyniki wszystkich ważniejszych wskaźników wydajności dla wersji desktopowej i mobilnej. Dodatkowo generuje raport na temat potencjalnych problemów, które mogą spowalniać stronę.
2. GTmetrix – podobna aplikacja do PageSpeed Insights, ale ma dwie istotne zalety. Po pierwsze, pozwala dokładnie określić warunki testowe: lokalizację serwera, przeglądarkę, a nawet i rozdzielczość ekranu. Po drugie, częścią raportu jest tzw. waterfall chart, czyli wykres pokazujący, w jakiej kolejności ładowane są poszczególne zasoby strony oraz ile czasu przeglądarka spędza nad każdym z nich.
3. Chrome Lighthouse – narzędzie wbudowane w przeglądarkę od Google, dostępne w Narzędziach deweloperskich. Podobnie jak PSI, pozwala przeprowadzić audyt strony pod kątem wydajności, dostępności oraz SEO, ale robi to lokalnie, w Twojej przeglądarce. Możesz więc w ten sposób przetestować stronę, która jeszcze nie wyszła z fazy testów i jest dostępna tylko na stagingu.

Jakie metryki są najważniejsze?

Spośród wszystkich metryk, które znajdziesz w raportach z tych narzędzi, do oceny wydajności sklepu potrzebujesz trzech najważniejszych:

• LCP (Largest Contentful Paint) – czas od rozpoczęcia ładowania strony do momentu, gdy największy widoczny element – w sklepie zwykle jest to główne zdjęcie produktu lub baner promocyjny – zostanie w pełni wyrenderowany. I właśnie ten wskaźnik najsilniej koreluje z odczuwalną szybkością strony. Google uznaje za dobre wyniki poniżej 2,5 sekundy;
• INP (Interaction to Next Paint) – mierzy responsywność strony, czyli jak szybko reaguje na działania użytkownika, na przykład na kliknięcie przycisku „Dodaj do koszyka", rozwinięcie galerii zdjęć itd. Dobrze zoptymalizowany sklep nie powinien tu przekraczać progu 200 ms;
• TTFB (Time to First Byte) – czas od wysłania żądania HTTP do odebrania pierwszego bajtu odpowiedzi z serwera. To bardzo ważny wskaźnik, ponieważ jako pierwszy sygnalizuje problemy po stronie serwera lub bazy danych. Eksperci z Google zalecają, aby utrzymywać TTFB na poziomie nie wyższym niż 0,8 sekundy.