Prędkość wczytywania się strony internetowej ma kluczowe znaczenie. Jeszcze większe, gdy ową stroną internetową jest Twój sklep. Wolne ładowanie się sklepu może skutecznie zniechęcić potencjalnych klientów. Nawet jeśli wyczekają kilka długich sekund na pojawienie się pierwszych elementów witryny, to z dużym prawdopodobieństwem opuszczą ją zanim złożą jakiekolwiek zamówienie. Nie dopuszczaj do takiej sytuacji. W tym wpisie pokażę Ci jak przyspieszyć sklep internetowy za pomocą 5-iu metod na szybszy WooCommerce (i nie tylko).
Jak przyspieszyć sklep internetowy
Metod na przyspieszenie sklepu internetowego zbudowanego przy pomocy WordPress i wtyczki WooCommerce jest kilka. Jedne z poniżej opisanych są prostsze a inne trudniejsze w realizacji. Dzięki poniższym metodom nie tylko przyspieszysz działanie sklepu ale i poprawisz wygodę użytkowania. Zapraszam do czytania.
1. Zacznij od wydajnego motywu
O motywach WordPress i sklepów WooCommerce pisałem już wielokrotnie. Były wpisy o klasycznych motywach ogólnych jak i motywach dla Elementor, który również współpracuje z WooCommerce.
Szybki i wydajny motyw to najważniejsza zasada jeśli myślisz poważnie o swoim biznesie. Jeśli jeszcze nie posiadasz sklepu a dopiero planujesz jego budowę, to jesteś w bardzo komfortowej sytuacji. Możesz z wyprzedzeniem uwzględnić niniejszą poradę. Takie motywy jak Astra, Neve, Zakra, Rife czy Phlox są super szybkie a przy tym posiadają szeroka gamę szablonów wizualnych do wyboru.
Owszem, można im czasem zarzucić prostotę i brak wizualnych fajerwerków, ale z pewnością nie można im odmówić prędkości działania. Motywy te nadają się zarówno dla stron jak i sklepów internetowych a ich podstawowe darmowe wersji w zupełności wystarczają aby zbudować ładny i szybki sklep internetowy.
UWAGA! Jeśli posiadasz już sklep internetowy z innym motywem, zmiana może być mniej lub nieco bardziej bolesna. Wszystko zależy od ilości posiadanych funkcji oraz indywidualnych usprawnień wdrożonych podczas budowy sklepu. Nigdy nie zmieniaj motywu na działającym i opublikowanym sklepie. Wszelkie testy przeprowadzaj na wcześniej utworzonej kopii sklepu.
2. Dobrze skonfiguruj motyw pod WooCommerce
Nie wiem czy wiesz, ale większość motywów ma dostępne dodatkowe opcje specjalnie do WooCommerce. Gdy wejdziesz w zakładkę “Wygląd -> Dostosuj”, znajdziesz tam zakładkę “WooCommerce”. W zależności od motywu znajdują się w niej mniej lub bardziej liczne opcje konfiguracji.
W pierwszej kolejności przyjrzyj się opcji określającej ilość produktów wyświetlanych na jednej stronie. Interesuje Cię ilość wierszy oraz ilość kolumn z produktami w zakładce “Product catalog”. Nazwa zakładki będzie występowała w języku polskim lub angielskim w zależności od motywu. W moim motywie nazywa się ona akurat “Grid settings”.
Zasada jest prosta: im więcej produktów pokażesz na jednym ekranie, tym łatwiej użytkownikowi będzie przeglądać produkty ale katalog produktów będzie się wolniej ładował. Optymalną wartością będzie ustawienie 4 kolumn i 4 wierszy na stronę (16 produktów). Jeśli chcesz pokazać 20 produktów na stronę, ustaw 4 kolumny i 5 wierszy.
Jeśli zauważysz, że lista produktów w sklepie ładuje się zbyt długo, rozważ zmniejszenie liczby wierszy lub zastosuj tzw. lazy load dla produktów, czy doczytywanie kolejnych wierszy w miarę scrollowania strony w dół.
3. Optymalizuj obrazki
O optymalizacji obrazków pisałem już na blogu kilkakrotnie przy różnych okazjach. Po rozszerzony poradnik jak optymalizować obrazki, odsyłam Cię do tego wpisu.
Dodatkową metodą o której nie wspominam w podlinkowanym wpisie, jest konwersja wszystkich obrazów w sklepie internetowym na format .webp co znacznie przyspiesza szybkość strony.
Obrazy w formacie .webp są małe i lekkie dzięki bardzo wydajnej metodzie kompresji bez widocznej utraty jakości. Format ten obsługuje większość popularnych przeglądarek internetowych (poza Safari). Wróćmy jednak do do porad jak przyspieszyć sklep internetowy.
Najwygodniejszą opcją optymalizacji obrazów jest instalacja darmowej wtyczki Converter for Media autorstwa Mateusza Gbiorczyka. Wtyczka rewelacyjnie robi swoją robotę, tj. automatycznie optymalizuje nowo przesyłane obrazy i podmienia na skompresowane wersje w nowym formacie.
Jedyne co musisz zrobić to zainstalować i włączyć wtyczkę. Jeśli masz już obrazy produktów w swoim sklepie internetowym, to wtyczka posiada opcję przeszukiwania i optymalizacji wszystkich plików w Bibliotece mediów! Jedno kliknięcie i gotowe!
Na małych stronach do 5 000 odwiedzin miesięcznie sprawdza się również darmowa wersja wtyczki Optimole, która nie tylko optymalizuje obrazy, ale również przesyła je na serwer CDN w ponad 300 lokalizacjach na całym świecie. CDN wtyczki opiera się o architekturę Amazon Cloudfront.
Oprócz formatu .webp wtyczka obsługuje również jeszcze nowszy i jeszcze wydajniejszy format kompresji AVIF.
4. Wykorzystuj pamięć podręczną
Wykorzystanie pamięci podręcznej potrafi mocno przyspieszyć stronę, która zamiast wykonywać te same skrypty i generować te same obrazy za każdym razem kiedy stronę odwiedzi nowy użytkownik, wykorzystuje wcześniej wygenerowane i zapisane wersje tych plików znajdujące się na serwerze. Dzięki temu, cały proces ładowania się strony mocno przyspiesza, bo serwer hostingowy nie musi wykonywać nowych obliczeń.
Trudno z czystym sumieniem polecić jedną, jedyną i najlepszą wtyczkę. Jest ich bardzo dużo i każda działa dobrze, pod warunkiem dobrej konfiguracji. Jedne wtyczki są bardziej a inne mniej intuicyjne w obsłudze. Wszystkie jednak dają odczuwalną poprawę w szybkości ładowania się strony.
Kompresując pliki CSS i JS należy jednak zachować dużą ostrożność. Zbyt silna kompresja powoduje rozsypanie się wyglądu strony oraz potrafi zepsuć działanie skryptów. Niezależnie od wtyczki jaką wybierzesz, po włączeniu opcji optymalizacji dokładnie przetestuj stronę w trybie prywatnym przeglądarki.
Z popularnych wtyczek do optymalizacji wymienić można Autoptimize, W3 Total Cache, WP Fastest Cache, LiteSpeed Cache czy WP Rocket. Co prawda ta ostatnia nie posiada wersji darmowej i nie jest dostępna w repozytorium wtyczek WordPress, to ja osobiście lubię ją najbardziej bo często na różnych tworzonych stronach okazuje się najskuteczniejsza.
5. Zainwestuj w CDN
CDN (content delivery network) to usługa polegająca na hostowaniu statycznych plików w sieci rozproszonych po całym świecie serwerów. Użytkownicy odwiedzający Twoją stronę będą pobierać te pliki (np. obrazy, PDFy, CSS i skrypty) z szybkich serwerów znajdujących się w najbliższej od nich lokalizacji zamiast z Twojego (często wolniejszego) hostingu na którym trzymasz swój sklep lub stronę.
Wokół wykorzystywania CDN na polskich stronach narosło już wiele mitów. Często podnoszonym przez maruderów i malkontentów argumentem jest to, że serwery CDN rzadko kiedy zlokalizowane są w Polsce. W przeciwieństwie do serwerów hostingowych. Odległość w kilometrach pomiędzy użytkownikiem a hostingiem jest często krótsza niż odległość pomiędzy użytkownikiem a serwerem CDN. Wydawałoby się, że obraz pobrany z CDN umieszczonym np. w Niemczech będzie pobierał się wolniej.
Powyższy mit nie jest jednak prawdą, ponieważ serwery CDN przystosowane są do wysyłania tych statycznych plików z ogromną prędkością, często dużo większą niż serwer współdzielony na którym masz wykupiony hosting. Jeśli Twój serwer jest aktualnie mocno obciążony (co zdarza się często), to pomimo bliskości fizycznej i tak cały sklep będzie ładował się wolniej a czas TTFB będzie dużo większy niż z serwera CDN.
Jeśli skorzystasz z wtyczki Optimole, to częściowo upieczesz dwie pieczenie na jednym ogniu. Skompresujesz obrazy i przechowasz je na szybkim serwerze CDN. Żeby jednak w pełni skorzystać z zalet CDN dla pozostałych plików, musisz rozważyć jedną z wielu popularnych usług CDN dla WordPress. Popularny acz nie zalecany przez profesjonalistów jest CDN Cloudflare. Warto jednak rozejrzeć się za innymi, takimi jak WP Rocket CDN, Nazwa CDN (6 serwerów w Polsce), Amazon CDN czy Google CDN.
5 metod na szybszy sklep internetowy
Po uważnym przeczytaniu całego artykułu, wiesz już jak przyspieszyć sklep internetowy (i przy okazji zwykłą stronę) przy pomocy 5 metod. Samo zastosowanie nawet kilku z nich powinno przynieść spory sukces i odczuwalne przyspieszenie sklepu.
W artykule celowo pomijam sprawę oczywistą – wybór właściwego i szybkiego hostingu. O wyborze firmy hostingowej też kiedyś pisałem, więc i tym razem odsyłam Cię do osobnego wpisu – jak wybrać hosting.
Jeśli masz dodatkowe pytania lub przemyślenia – zostaw mi je w komentarzu pod wpisem lub napisz do mnie na e-mail albo przez formularz kontaktowy. Odpowiadam na wszystkie wiadomości 🙂
