Optymalizacja sklepu WooCommerce z odzieżą może być nie lada wyzwaniem – szczególnie, gdy zależy nam na zachowaniu atrakcyjnych wizualnie elementów takich jak galerie zdjęć, warianty produktów czy zaawansowane funkcje zakupowe. Niedawno miałem okazję podjąć się właśnie takiego zadania dla jednego ze sklepów z odzieżą. Efekt? Uzyskałem aż 96 punktów w PageSpeed Insights. Oto, jak tego dokonałem, krok po kroku.
Początkowy stan sklepu
Sklep pierwotnie miał nieprawidłowo skonfigurowaną wtyczkę LiteSpeed Cache oraz Cloudflare APO. Chociaż dawało to szybkie wczytywanie stron dzięki cache’owaniu całych stron, wyniki w PageSpeed Insights pozostawały niskie (około 63 punktów). Główne problemy obejmowały długi czas ładowania największego elementu (LCP ~5,9 s) oraz słaby indeks szybkości (~6,9 s). Bez odpowiedniej optymalizacji sklep ryzykował niższą pozycję w Google oraz gorszą konwersję sprzedaży.
1. Odchudzenie plików statycznych
Najpierw zadbałem o zmniejszenie wielkości plików CSS i JavaScript poprzez ich minifikację. Dzięki temu strona szybciej się ładuje, bo przeglądarka musi pobierać mniej danych. Korzyścią jest szybsze działanie strony, jednak potencjalną stratą mogłaby być awaria niepoprawnie zminifikowanych skryptów – dlatego konieczne były dokładne testy.
2. Opóźnienie ładowania niekrytycznych skryptów
Kolejnym krokiem było ustawienie opcji „Delay JS”, dzięki czemu skrypty, które nie są potrzebne od razu, ładują się dopiero wtedy, gdy użytkownik zacznie przewijać stronę lub z nią wchodzić w interakcję. Kluczowe skrypty jednak zostały wyłączone z tej funkcji, aby nie ucierpiała wygoda zakupów. Dzięki temu użytkownicy widzą szybciej treść strony, choć istnieje ryzyko opóźnień w zaawansowanych interakcjach.
3. Natychmiastowe wczytywanie jQuery
Biblioteka jQuery jest istotna dla funkcji interaktywnych strony, dlatego ustawiłem jej natychmiastowe ładowanie, dodając odpowiednie wyjątki do konfiguracji (/jquery.min.js oraz /jquery-migrate.min.js).
4. Zabezpieczenie galerii produktów przed opóźnieniami
Wiele sklepów WooCommerce boryka się z problemem galerii, które ładują się zbyt długo lub są niewidoczne przy pierwszym załadowaniu. Aby tego uniknąć, wykluczyłem kluczowe skrypty galerii (single-product.min.js, add-to-cart-variation.min.js, photoswipe*.js, itp.) z mechanizmu opóźniania JS.
5. Zachowanie krytycznego CSS
Dodatkowo upewniłem się, że nie zostanie przypadkowo usunięty krytyczny CSS, odpowiedzialny za widoczność zdjęć produktów. Zastosowałem reguły, które zabezpieczają najważniejsze style galerii przed automatycznym usunięciem. To zapewnia poprawne wyświetlanie strony, unikając potencjalnej straty w postaci niewidocznych zdjęć.
6. Integracja CDN Cloudflare Enterprise z automatyczną optymalizacją obrazów
Podłączyłem CDN Cloudflare Enterprise z automatyczną optymalizacją obrazów oraz Edge Network. Dzięki temu obrazy są dostarczane błyskawicznie z serwerów znajdujących się bliżej użytkowników, a ich rozmiary są automatycznie redukowane, co jeszcze bardziej przyspiesza ładowanie strony. Korzyścią jest szybka strona globalnie, choć w przypadku błędnej konfiguracji CDN może powodować chwilowe niedostępności.
7. Zastosowanie premium silnika optymalizacji
Do tego wyjątkowego zlecenia zastosowałem także silnik optymalizacji z półki premium, zapewniający zaawansowaną optymalizację zasobów, niedostępną w standardowych rozwiązaniach.
8. Wyczyściłem wszystkie warstwy cache
Dla pewności wykonałem trójstopniowe czyszczenie pamięci podręcznej: najpierw lokalnej na serwerze, następnie na poziomie CDN, a na końcu wykonałem test w trybie incognito z wyłączonym cache przeglądarki.
9. Weryfikacja efektów w DevTools oraz PageSpeed Insights
Dokładne testy przeprowadzone na sieci 4G pokazały znaczną poprawę wyników. Czas ładowania największego elementu (LCP) zmniejszył się z około 5,9 s do 2,7 s, a indeks szybkości poprawił się z 6,9 s do zaledwie 1,4 s. CLS pozostał minimalny (0,002), co potwierdza, że strona ładuje się stabilnie i bez zbędnych przesunięć.
10. Aktywacja live-cache i powrót do normalnego ruchu
Dzięki tym działaniom sklep utrzymuje teraz stabilny wynik ~96 punktów w PageSpeed Insights, zapewniając błyskawiczne ładowanie bez kompromisów w atrakcyjności i funkcjonalności sklepu WooCommerce. Korzyścią jest poprawiona widoczność w Google i lepsze doświadczenie użytkownika, co przekłada się na wyższe konwersje.
Chcesz przyspieszyć swój sklep WooCommerce?
Zastanawiasz się, jak poprawić szybkość swojej strony bez utraty jakości wizualnej i funkcjonalności? Skontaktuj się ze mną! W BezLaga specjalizuję się w optymalizacji WordPressa, dzięki czemu Twoi klienci zyskają błyskawiczne ładowanie strony, a Ty – wyższe konwersje.
👉 Zamów bezpłatną konsultację i przekonaj się, jak mogę pomóc Twojemu sklepowi WooCommerce!