Od dłuższego czasu sprzedajesz swoje produkty online, zwiększasz asortyment, użytkownicy tworzą konta. Tymczasem witryna się coraz wolniej ładuje. Zastanawiasz się, jak przyspieszyć sklep internetowy na WooCommerce?
Część z naszych porad będziesz w stanie wprowadzić samodzielnie, przy innych będziesz potrzebował wsparcia technicznego programisty lub firmy zajmującej się wsparciem technicznym dla e-commerce. Jedną z takich firm jest Site Care.
Od czego zacząć przyspieszanie sklepu internetowego na WooCommerce?
Zanim zdecydujesz się na zmiany w strukturze kodu, warto przetestować prędkość ładowania się sklepu internetowego. W tym celu najlepiej użyć narzędzi takich jak Google PageSpeed Insights lub Pingdom Tools Speed Test. Narzędzia nie tylko zweryfikują, w jakim czasie ładuje się Twój e-commerce, ale również pomogą wskazać problemy, dzięki którym poprawisz szybkość ładowania się strony.
Dzięki tym narzędziom określisz, ile waży Twój sklep internetowy, jak szybko się ładuje na komputerach i telefonach komórkowych oraz gdzie szukać problemów.
Jak przyspieszyć sklep internetowy bez ingerencji programisty?
Warto zacząć optymalizację działania sklepu od prac, które możemy wykonać samodzielnie przez panel administratora. W wielu przypadkach takie działania będą w zupełności wystarczające. Na tę część obowiązków związanych z zarządzaniem stroną internetową składa się kilka czynników:
- Optymalizacja zdjęć – o optymalizacji zdjęć i sklepu online dowiesz się więcej z artykułu: “Optymalizacja sklepu online”.
- Usunięcie zbędnych wtyczek
- Usunięcie zbędnych plików
Usuwając zbędne komponenty, pliki i optymalizując zdjęcia, sklep będzie znacznie mniej ważył, będzie posiadał mniej skryptów oraz luk bezpieczeństwa. Co sprawi, że znacznie przyspieszy.
Pozbądź się zbędnych wtyczek
Jeśli korzystasz z WordPressa i WooCommerce, zajrzyj do zakładki “Wtyczki”, sprawdź, które z nich obecnie są wyłączone i nie są Ci do niczego potrzebne. Odinstaluj je. Następnie zweryfikuj pozostałą listę i usuń te wtyczki, które są zbędne lub z nich nie korzystasz. Przestarzałe wersje zaktualizuj (wcześniej wykonując backup strony) lub zastąp nowymi wspieranymi wersjami pluginów. Jeśli wtyczki zostaną zaktualizowane i dobrane poprawnie, pozwoli to na zaoszczędzenie miejsca, oczyszczenie WWW ze zbędnego kodu i w konsekwencji przyspieszenie strony.
Dodatkową zaletą porządku we wtyczkach jest znacznie zwiększone bezpieczeństwo. Więcej o aktualizacji dowiesz się tutaj: Jak zaktualizować WordPressa? oraz Błędy po aktualizacji WordPressa – co zrobić?
Zainstaluj wtyczkę do cache
Jeśli posiadasz duży sklep internetowy i chcesz go przyspieszyć, koniecznością będzie instalacja wtyczki do cache’owania. Jedną z najczęściej wybieranych wtyczek jest W3 Total Cache. Wtyczka ta dodaje do naszej strony pamięć podręczną (cache). Dobrze skonfigurowana pozwoli znacznie przyspieszyć ładowanie się strony.
Dzięki wtyczce tworzącej pamięć cache odwiedzający sklep internetowy użytkownicy wyświetlają “gotowe szablony HTML” stron przygotowane przez W3 Total Cache. Zatem wtyczka znacznie zmniejsza liczbę zapytań do bazy danych MySQL. Jeśli masz wiedzę techniczną, możesz podjąć się skonfigurowania tego pluginu na własną rękę, jednak zdecydowanie rekomendowanym rozwiązaniem jest zlecenie tego zadania firmie zajmującej się utrzymaniem twojej witryny lub obsługującemu cię software house’owi.
Kody trackujące i zewnętrzne skrypty dodawaj przez Google Tag Manager
Zwykle strona jest wczytywana synchronicznie, a to oznacza, że wszystkie skrypty są ładowane jeden po drugim. Google Tag Manager działa asynchronicznie, tj. ładuje kilka skryptów jednocześnie. Dlatego znacznie przyspiesza ich ładowanie, a co za tym idzie ładowanie strony.
Ponadto, jeśli na swojej stronie dodałeś kilka skryptów np. pixel trackujący Facebooka, kod Google Analitycs, skrypt do reklam, skrypt Hotjara, skrypt do FB Messengera oraz skrypt Live Call, ładują się one kolejno, jeden po drugim. Natomiast jeśli dodałeś je przez GTM, na Twojej stronie załaduje się tylko jeden skrypt. Logiczne zatem jest, że pobieranie jednego skryptu będzie znacznie szybsze niż sześciu.
Minifikacja kodu
Istnieją dedykowane do tego wtyczki, a nawet niektóre pluginy cache’ujące mają funkcję minifikacji kodu. Niestety w bardzo niewielu przypadkach automatyczna minifikacja kodu pomaga. Co więcej, błędnie skonfigurowana wtyczka i automatycznie przeprowadzona minifikacja może doprowadzić do licznych błędów na stronie. Dlatego w tej kwestii warto zaufać doświadczonym partnerom.
Na czym to polega? Minifikacje to inaczej oczyszczanie kodu JS oraz CSS i łączenie go w jeden plik tak, by reguły i linijki kodu się nie powtarzały i nie nadpisywały. W konsekwencji pliki stają się lżejsze (zawierają mnie linijek kodu) i szybciej się wczytują.
Umiejscowienie skryptów
Pozostając jeszcze w tematyce skryptów JS – ich umiejscowienie w kodzie również ma znaczenie. Jak się pewnie domyślasz, po zakodowaniu sklepu ingerencja w jego kod może być ryzykowna, dlatego warto już na samym początku postawić na firmę wysoko ocenianą przez klientów.
Jeśli skrypty w kodzie strony rozmieszczone są w niewłaściwych miejscach, wyświetli się biała strona lub jedynie niektóre elementy WWW. Natomiast przeglądarka nadal będzie ładowała stronę. Pozostała część załaduje się dopiero po dłuższej chwili. Dzieje się tak ze względu na wspomniane synchroniczne ładowanie skryptów (jeden po drugim). Kiedy ładują się skrypty, inne elementy WWW czekają w kolejce.
Zatem gdzie powinniśmy umieszczać skrypty, aby uniknąć takiej sytuacji? Na początku kodu strony umieszczamy tylko i wyłącznie te najbardziej niezbędne, pozostałe takie jak skrypt czata czy LiveCall umieszczamy nisko w kodzie. Dzięki temu najpierw wyświetli się strona dopiero później czat.
Postaw na AMP
AMP, a konkretnie Accelerated Mobile Pages to nowoczesny sposób budowania stron internetowych opartych na statycznych treściach. Treści te mają się renderować bardzo szybko, w niektórych przypadkach niemal natychmiast. Na AMP się składają:
- AMP HTML – zalecenia dla kodu HTML.
- AMP JS – biblioteki JavaScript pozwalające na błyskawiczne ładowanie się treści
- AMP CDN – element odpowiedzialny za dostarczanie stron HTML opartych o AMP.
Warto postawić na AMP, ponieważ jest to zbiór rozwiązań (zasad i bibliotek kodu), których zastosowanie pozwala nam uzyskać zoptymalizowaną pod kątem mobile witrynę. Zbiór ten stworzył Google, a zatem witryny stosujące się do tych zasad są lepiej oceniane i bardziej promowane przez giganta z Mountain View. Co więcej, witryny wykorzystujące tę technologię można zgłosić przez Google Search Console do Google, który zastosuje własne metody cache’ujące.
Niestety to również może być wada, ponieważ nasz sklep może być cache’owany niezależnie od nas, przez co w tej kwestii utracimy nad nim kontrolę. Przed wdrożeniem tego rozwiązania warto porozmawiać z software house’em.
Zainwestuj w porządny hosting
Jeśli powyższe metody nie pomogły, nasze oczy powinny zwrócić się w kierunku hostingu. Po wcześniejszej weryfikacji i stwierdzeniu, że przyczyną wolnego ładowania się sklepu jest hosting powinniśmy się rozejrzeć za nowym dostawcą. Jak go wybrać? Postaw na sprawdzony i niezawodny hosting. Niezawodny, czyli taki, który zapewni SLA na poziomie 99,5% w skali roku i w razie problemów technicznych będziesz mógł liczyć na szybką reakcję ze strony dostawcy. Popularne duże firmy hostingowe gwarantują wysokie SLA, jednak komunikacja i wsparcie techniczne pozostawiają wiele do życzenia. Dlatego warto rozważyć mniejszego dostawcę o stabilnej i ugruntowanej pozycji takiego jak thecamels.org lub zenbox.pl.
Uwaga: Należy unikać serwerów gwarantujących 100% SLA. Taka gwarancja jest niemożliwa do spełnienia, dlatego z gruntu podejrzana. Nie ma ludzi i maszyn nieomylnych, zawsze zdarzają się sytuacje, na które nie mamy wpływu, jak np. zalanie serwerowni. Firma gwarantująca taką usługę twierdzi, że jest w stanie przewidzieć wszystko.
Serwery nie są z gumy i nawet najwydajniejsza maszyna może poddać się pod naporem wchodzących klientów do sklepu. Jeżeli planujemy większą sprzedaż, promocje lub spodziewamy się większego ruchu (np. z okazji Black Friday), dobrze jest poinformować o tym firmę hostingową. Pomoc techniczna powinna doradzić, czy obecne rozwiązania stosowane w sklepie internetowym są wystarczające do przyjęcia ruchu, czy konieczna będzie zmiana rozwiązań (np. większy pakiet hostingowy, serwer VPS lub serwer dedykowany) lub wykonanie optymalizacji po stronie kodu samego sklepu.