Jak przyspieszyć WooCommerce dzięki WP Rocket i Botiga?

Zmagasz się z przyspieszeniem WooCommerce i stworzeniem szybko ładującego się sklepu?

Posiadanie szybkiego sklepu jest niezbędne, ponieważ czas ładowania Twojego sklepu wpłynie na wrażenia kupujących, Twoje rankingi SEO, a nawet współczynniki konwersji Twojego sklepu.

Ale jednocześnie sklepy WooCommerce są trudniejsze do optymalizacji niż zwykłe witryny WordPress, co może Cię rozczarować czasem ładowania Twojego sklepu.

Istnieje kilka powodów, ale dwa z największych to to, że sklepy WooCommerce intensywnie wykorzystują bazę danych niż zwykłe witryny WordPress i nie można buforować wszystkich stron swojego sklepu.

Nie oznacza to jednak, że nie masz możliwości stworzenia szybszego sklepu.

Dzięki odpowiednim narzędziom możesz przyspieszyć swój sklep bez konieczności posiadania specjalnej wiedzy technicznej.

W tym samouczku przeprowadzę Cię przez optymalizację szybkości WooCommerce w najprostszy znany mi sposób: za pomocą wtyczki WP Rocket oraz kilku innych narzędzi i poprawek.

Po drodze podzielę się rzeczywistymi danymi z testów wydajności, abyście mogli zobaczyć, jak każda poprawka wpływa na czas ładowania sklepu.

Na koniec powinieneś mieć znacznie szybciej ładujący się sklep — i nie będziesz potrzebować dyplomu z informatyki, aby wszystko skonfigurować.

Brzmi dobrze? Przyspieszmy razem WooCommerce.

Dwie podstawowe taktyki optymalizacji prędkości WooCommerce przed WP Rocket

W następnej sekcji opowiem Ci wszystko o tym, jak możesz użyć WP Rocket, aby przyspieszyć WooCommerce i uzyskać szybciej ładujący się sklep.

Jeśli jednak chcesz szybko ładującego się sklepu WooCommerce, nadal musisz mieć solidne podstawy wydajności. W przeciwnym razie używanie WP Rocket przypomina nakładanie szminki na świnię.

Zasadniczo WP Rocket nadal przyspieszy Twój sklep. Ale jeśli twój podkład jest zbyt wolny, aby zacząć, nadal będziesz miał wolny zapas. Będzie tylko trochę…”mniej wolny”.

A więc — jaka jest mocna podstawa wydajności WooCommerce?

Musisz przybić te dwa szczegóły:

1. Wybierz szybszy motyw WooCommerce

Motyw Twojego sklepu będzie odgrywał ogromną rolę w szybkości ładowania. Duże, rozdęte motywy ładują więcej zasobów, co spowolni Twoją witrynę.

Z drugiej strony szybki motyw WooCommerce zrobi coś przeciwnego: załaduje tylko minimum potrzebne do stworzenia dobrze wyglądającego, przyjaznego kupującym sklepu.

Mamy dedykowany post, w którym przetestowaliśmy kilka opcji, aby znaleźć najszybsze motywy WooCommerce. Ale jeśli chcesz zaoszczędzić czas, możesz skorzystać z naszego bezpłatnego motywu Botiga:

Od podstaw Botiga jest stworzona z myślą o wydajności. Używa tylko waniliowego JavaScript (bez zależności jQuery), automatycznie minimalizuje swój kod i po wyjęciu z pudełka ma mniej niż 44,3 KB.

Co więcej, wszystkie strony demonstracyjne są zbudowane z natywnym edytorem bloków, co oznacza, że ​​nie musisz obciążać swojego sklepu wtyczką do tworzenia stron tylko po to, aby Twoja witryna wyglądała jak demo.

Jednocześnie Botiga oferuje szereg przydatnych funkcji eCommerce, w tym:

• Wiele stylów strony kasy i koszyka
• Natychmiastowe wyszukiwanie produktów, aby pomóc kupującym szybko znaleźć produkty
• Stylowe rekomendacje produktów
• Próbki odmian produktu
• Wiele układów galerii produktów
• Lista życzeń
• Przyklejony pasek dodawania do koszyka

Botiga ma w pełni funkcjonalną darmową wersję, a także wersję Pro 69 USD, która dodaje więcej funkcji.

Z tych powodów użyjemy Botiga jako przykładu przyspieszenia naszego sklepu.

Możesz pobrać Botiga tutaj lub przejrzeć dema, aby zobaczyć kilka przykładów.

2. Użyj zoptymalizowanego pod kątem wydajności hostingu WooCommerce

Oprócz korzystania z szybkiego motywu warto również wybrać hosting WordPress zoptymalizowany pod kątem wydajności.

Chociaż może być kuszące, aby wybrać najtańszy możliwy hosting, tani hosting współdzielony zwykle nie ma zasobów do obsługi WooCommerce, co prowadzi do słabych czasów ładowania i wydajności, bez względu na to, co robisz.

Tutaj ponownie mamy artykuł, w którym przetestowaliśmy grupę dostawców hostingu, aby znaleźć najszybszy hosting WordPress. Jeśli się spieszysz, oto kilka dobrych opcji do rozważenia:

• Kinsta – przeczytaj naszą pełną recenzję Kinsta
• WP Engine – szczególnie polecam dedykowane plany hostingowe eCommerce, które obejmują Elasticsearch (co znacznie poprawi wydajność wyszukiwania produktów w Twoim sklepie)
• Cloudways – przeczytaj moją pełną recenzję Cloudways

Jak przyspieszyć WooCommerce dzięki WP Rocket?

Teraz nadszedł czas, aby użyć WP Rocket do przypięcia dopalaczy i jeszcze szybszego ładowania WooCommerce.

Ponieważ używamy solidnego hostingu i szybkiego motywu Botiga dla naszego sklepu, ładuje się już dość szybko sam. Oto zrzut ekranu wskaźników wydajności WebPageTest, który pokazuje, od czego zaczynamy na stronie głównej:

Jednak dzięki WP Rocket nadal możemy przyspieszyć jego ładowanie. Istnieje wiele świetnych wtyczek optymalizujących wydajność WordPress, więc dlaczego polecam WP Rocket dla WooCommerce?

Cóż, możesz przeczytać moją pełną recenzję WP Rocket, aby dowiedzieć się, dlaczego to lubię, ale oto krótkie podsumowanie najważniejszych punktów:

1. Ma gotową kompatybilność z WooCommerce . Jeśli WP Rocket zobaczy, że korzystasz z WooCommerce, automatycznie skonfiguruje się w optymalny sposób, jeśli chodzi o podstawy, takie jak buforowanie. To ogromna zaleta, ponieważ nieprawidłowa konfiguracja buforowania w sklepie WooCommerce może zepsuć kluczowe funkcjonalności.
2. Jest bardzo łatwy w użyciu . Oprócz powyższego punktu, WP Rocket ma na ogół prosty interfejs, szczegółową dokumentację i wsparcie premium.
3. Dzięki temu Twoja witryna jest znacznie szybsza . Najlepsze zostawiłem na koniec. WP Rocket po prostu działa i świetnie radzi sobie z szybszym ładowaniem sklepów WooCommerce (i innych witryn WordPress). Posiada również unikalne funkcje, takie jak możliwość usunięcia nieużywanego CSS i opóźnienia wykonania JavaScript.

WP Rocket to wtyczka premium, ale płacenie 49 USD to niewielka cena za szybszy sklep WooCommerce. Istnieje bezpośredni związek między czasem wczytywania strony a współczynnikami konwersji, więc przyspieszenie sklepu może z łatwością odzyskać pieniądze w postaci zwiększonych współczynników konwersji.

Aby rozpocząć, kup kopię WP Rocket. Następnie oto jak skonfigurować go dla WooCommerce.

1. Zainstaluj wtyczkę, aby aktywować podstawowe optymalizacje

Aby rozpocząć, udaj się do swojego sklepu WooCommerce (lub skonfiguruj go najpierw, jeśli jeszcze go nie masz) i zainstaluj i aktywuj WP Rocket:

Gdy tylko aktywujesz wtyczkę WP Rocket, automatycznie aktywuje ona następujące funkcje, aby przyspieszyć Twój sklep:

• Buforowanie stron – WP Rocket automatycznie wykluczy również kluczowe treści WooCommerce, aby uniknąć problemów, jednocześnie buforując jak najwięcej treści. Na przykład wykluczy Twój koszyk i strony kasy, a także inne poprawki dotyczące kompatybilności.
• Buforowanie przeglądarki
• Kompresja GZIP
• Wsparcie Cross-Origin dla czcionek internetowych
• Optymalizacja plików czcionek Google

W sklepie WooCommerce WP Rocket również automatycznie zoptymalizuje żądanie AJAX get_refreshed_fragments . To jest to, czego używa WooCommerce do dynamicznej aktualizacji zawartości koszyka kupującego.

Ponownie, wszystkie te optymalizacje zachodzą automatycznie, więc Twój sklep powinien już ładować się szybciej, gdy tylko aktywujesz WP Rocket.

Oto jak strona główna naszego sklepu ładuje się teraz bez dotykania jednego ustawienia w WP Rocket:

Widać, że czas do pierwszego bajtu został skrócony o około 450 ms (z 0,509 do 0,043 s), co prowadzi do podobnej redukcji prawie wszystkich innych metryk, w tym największego malowania treści (LCP). Czas największej treściowej farby skrócił się z ~1,1 sekundy do ~0,7 sekundy.

Ta redukcja wynika głównie z przyjaznego dla WooCommerce buforowania stron, które implementuje WP Rocket, chociaż inne poprawki również pomagają.

2. Ustaw optymalizacje plików

Podczas gdy WP Rocket domyślnie aktywuje wiele przydatnych funkcji, jest też kilka ważnych, które musisz włączyć ręcznie.

Aby rozpocząć, przejdź do zakładki Optymalizacja plików w obszarze ustawień WP Rocket ( Ustawienia → WP Rocket ).

Tutaj możesz zoptymalizować kod CSS i JavaScript swojego sklepu, co może mieć duży wpływ na wydajność Twojego sklepu (zwłaszcza jeśli chodzi o Core Web Vitals i wynik wydajności Lighthouse).

Oto ustawienia, które polecam:

Pliki CSS :

• Zminifikuj pliki CSS — motyw Botiga domyślnie minimalizuje swój kod, ale może to być pomocne przy zminimalizowaniu kodu z używanych wtyczek.
• Zoptymalizuj dostarczanie CSS → Usuń nieużywany CSS – To usunie niepotrzebny CSS na podstawie strony po stronie, aby zmniejszyć rozmiar pliku każdej strony.

Nie polecam łączenia plików CSS, ponieważ nie jest to zbyt pomocne teraz, gdy większość wysokiej jakości hostów używa HTTP/2.

Pliki JavaScript :

• Zminimalizuj pliki JavaScript
• Ładowanie JS odroczone
• Opóźnij wykonanie JavaScript

Podobnie jak w przypadku CSS nie polecam łączenia plików JavaScript.

Aby zapewnić działanie swojego sklepu, możesz dodać kilka wyjątków do ustawienia opóźnienia wykonania JavaScript . Zasadniczo opóźnia to wczytywanie całego kodu JavaScript do momentu interakcji użytkownika z witryną (np. kliknięć lub przewijania).

Jest to świetne rozwiązanie, jeśli chodzi o skrócenie czasu największego wyświetlania treści, ale możesz mieć kod JavaScript, który chcesz załadować od razu, na przykład skrypty śledzące (np. Google Analytics lub Google Tag Manager) lub niektóre wtyczki, których możesz używać.

WP Rocket utrzymuje szczegółową stronę wszystkich potencjalnych wykluczeń, dzięki czemu nie musisz wymyślać skryptów, aby się wykluczyć. Możesz po prostu skopiować je z tego artykułu pomocy WP Rocket i wkleić je w polu Wykluczone pliki JavaScript .

Na przykład, jeśli chcesz wykluczyć Google Analytics, skonfiguruj go w następujący sposób:

Po wprowadzeniu tych poprawek możesz zobaczyć jeszcze więcej ulepszeń. Rozmiar strony naszej strony głównej został zmniejszony o około 80 KB, a czas największej zawartości treści skrócił się jeszcze bardziej z ~0,7 sekundy do ~0,5 sekundy.

3. Zoptymalizuj swoje media

W tym momencie wycisnąłeś większość wartości wydajności z WP Rocket. Istnieje jednak kilka innych obszarów ustawień, które możesz chcieć zbadać, aby wprowadzić dodatkowe poprawki.

W zakładce Media polecam włączyć leniwe ładowanie i brakujące wymiary obrazka. Pierwsza z nich pomoże Ci zwiększyć wydajność, a druga może zmniejszyć problemy z skumulowanym przesunięciem układu (CLS), aby jeszcze bardziej poprawić wydajność Core Web Vitals:

4. Dodaj sieć dostarczania treści (dla sklepów globalnych)

Sieć dostarczania treści (CDN) pozwala skrócić czas ładowania sklepu poprzez buforowanie zasobów statycznych, takich jak obrazy i skrypty, w sieci serwerów globalnych.

Następnie odwiedzający mogą pobrać te statyczne pliki z serwera, który jest fizycznie najbliżej nich, co skraca czas pobierania i przyspiesza działanie sklepu.

Jeśli Twój sklep jest skierowany tylko do kupujących w określonym obszarze geograficznym, np. w Wielkiej Brytanii, prawdopodobnie nie zauważysz większych korzyści z CDN.

Ale jeśli kierujesz reklamy do klientów na całym świecie, np. w Wielkiej Brytanii i USA, CDN to kolejna świetna opcja na przyspieszenie WooCommerce.

W sekcji CDN WP Rocket daje dwie opcje dodania CDN do Twojego sklepu:

1. Możesz skorzystać z oficjalnej usługi RocketCDN, która kosztuje zaledwie 7,99 USD miesięcznie za nieograniczoną przepustowość. Opiera się na globalnej sieci StackPath. Jest to najprostsza opcja, ponieważ oferuje automatyczną konfigurację.
2. Możesz zintegrować się z dowolnym CDN innej firmy, zlecając WP Rocket przepisywanie adresów URL. Popularne opcje to StackPath, KeyCDN, Bunny CDN, CloudFront i inne.

Jeśli nie czujesz się pewnie z konfiguracją własnego CDN, polecam skorzystać z usługi RocketCDN, ponieważ oferuje całkiem dobrą wartość, ponieważ otrzymujesz nieograniczoną przepustowość za stałą cenę:

Rozwiązywanie problemów z WP Rocket na WooCommerce

Chociaż przestrzeganie powyższych instrukcji powinno prowadzić do szybszego sklepu WooCommerce bez żadnych problemów, istnieją rzadkie scenariusze, w których możesz napotkać drobne problemy.

Najczęstszym przykładem są problemy z niektórymi rodzajami treści dynamicznych, takimi jak listy życzeń użytkowników, ostatnio oglądane elementy lub treści specyficzne dla lokalizacji (np. różne ceny w różnych krajach).

Na przykład, jeśli użytkownik odwiedza produkt, który dodał do swojej listy życzeń, możesz pokazać to na stronie produktu. Ale w niektórych przypadkach buforowanie może tutaj prowadzić do chwiejnego zachowania.

Więc — jak możesz to naprawić? Przejdźmy przez kilka wskazówek.

Po pierwsze, spróbuj użyć wtyczek zawartości dynamicznej, które są zakodowane w sposób zgodny z pamięcią podręczną. Zasadniczo oznacza to, że wtyczka generuje swoją dynamiczną zawartość za pomocą JavaScript lub AJAX zamiast PHP.

Jeśli nie masz pewności, możesz skontaktować się z twórcą wtyczki, w przypadku której występują problemy. Niektóre wtyczki zawierają wbudowane narzędzia zgodności. Na przykład wtyczka YITH WooCommerce Wishlist ma ustawienie umożliwiające ładowanie AJAX, co rozwiąże wszelkie problemy z buforowaniem.

Zespół WP Rocket stworzył również kilka wtyczek / narzędzi zgodności dla popularnych wtyczek WooCommerce, które mogą powodować problemy:

• Wtyczka YITH WooCommerce Lista życzeń
• Widżet Ostatnio oglądane produkty natywnego WooCommerce
• Wtyczka YITH WooCommerce Ostatnio oglądane produkty

Jeśli powyższe poprawki nie są możliwe, kolejną potencjalną poprawką jest dodanie reguły wykluczania pamięci podręcznej, która jest skierowana na plik cookie ustawiony przez wtyczkę. Jest to bardziej zaawansowane, ale pozwoli Ci ominąć pamięć podręczną dla użytkowników, którzy muszą zobaczyć zawartość dynamiczną.

Możesz spróbować znaleźć informacje o plikach cookie w dokumentacji wtyczki lub wynająć programistę, aby to za Ciebie rozwiązał. Następnie możesz skonfigurować reguły wykluczania pamięci podręcznej plików cookie w obszarze Zaawansowane zasady WP Rocket:

Inne przydatne wtyczki optymalizacji prędkości WooCommerce poza WP Rocket

WP Rocket może zrobić prawie wszystko, czego potrzebujesz do optymalizacji wydajności WooCommerce. Ale jest jeden główny wyjątek:

Obrazy!

Twój sklep prawdopodobnie będzie miał mnóstwo zdjęć produktów. A jeśli nie będziesz ostrożny, te zdjęcia produktów mogą spowolnić Twój sklep (zwłaszcza strony produktów i sklepów).

Rozwiązaniem jest optymalizacja obrazów Twojej witryny poprzez ich kompresję i zmianę rozmiaru. Możesz to osiągnąć automatycznie, korzystając z wtyczki do optymalizacji obrazu.

Mamy cały post na temat najlepszych wtyczek do optymalizacji obrazu WordPress, ale oto niektóre z najlepszych opcji:

• Imagify – ta wtyczka pochodzi od tego samego programisty co WP Rocket
• ShortPixel – jest to wtyczka, której używam na własnych stronach
• WP Compress – kolejna opcja wysokiej jakości; dowiedz się więcej w naszym przeglądzie WP Compress

Oprócz obrazów innym przydatnym narzędziem dla dużych sklepów jest jakiś rodzaj rozwiązania do wyszukiwania produktów.

Jeśli masz wiele produktów, wyszukiwanie produktów może być bardzo zasobożerne, ponieważ powoduje wiele ciężkich zapytań do bazy danych.

Możesz to naprawić, korzystając z rozwiązań wyszukiwania poza serwerem, takich jak Elasticsearch (poprzez wtyczkę ElasticPress) lub Jetpack Search (który również opiera się na Elasticsearch, ale jest prostszy do wdrożenia).

Przyspiesz swój sklep WooCommerce już dziś

Jeśli chcesz, aby Twój sklep WooCommerce odniósł sukces, ważne jest, aby szybko się ładował.

Aby Twój sklep odniósł sukces, ważne jest, aby najpierw stworzyć solidne podstawy:

1. Wybierz szybko ładujący się motyw WooCommerce, taki jak darmowy motyw Botiga.
2. Korzystaj z hostingu WordPress zoptymalizowanego pod kątem wydajności, takiego jak Kinsta lub WP Engine.
3. Skonfiguruj podstawę swojej witryny eCommerce.

Stamtąd WP Rocket może pomóc w implementacji szeregu optymalizacji wydajności WooCommerce, w tym buforowania zgodnego z WooCommerce, optymalizacji CSS i JavaScript i innych.

Jeśli dodasz również wtyczkę do optymalizacji obrazu, aby zoptymalizować obrazy produktów, powinieneś być ustawiony na odrzutowiec z lekkim, szybkim sklepem WooCommerce.

Czy nadal masz pytania dotyczące przyspieszenia WooCommerce za pomocą WP Rocket i Botiga? Daj nam znać w komentarzach!