Performance w e-commerce. Jakie elementy mają wpływ na szybkość działania strony?

Na to pytanie odpowiada Łukasz Białonoga z software house'u LIKE.agency.

Tworząc sklep internetowy często zapominamy, jak istotna jest prędkość ładowania się strony czy serwisu. W pędzie dodatkowych grafik, animacji oraz dodatkowych funkcjonalności, myśl o optymalizacji witryny często odchodzi na dalszy plan. Może to prowadzić do wzrostu współczynnika odrzuceń, a co za tym idzie, ograniczonej liczby dokonywanych transakcji. Jaki zatem system e-commerce wybrać, jakie elementy wpływają na prędkość ładowania się strony oraz jak można ją przyspieszyć? Ja na te pytania postaram się odpowiedzieć w tym artykule. 

Czym jest współczynnik odrzuceń?

Współczynnik odrzuceń to liczba użytkowników, którzy wchodzą do sklepu, ale z różnych przyczyn od razu go opuszcza. Na pierwszy rzut oka ciężko zweryfikować, czy dla naszego sklepu stanowi to problem oraz jaka jest tego skala. Okazuje się, że z pomocą przychodzi sam Google, które udostępnia usługę Google Analytics. Dzięki prostemu skryptowi, który wprowadzamy do nagłówka strony, możemy sprawdzać ilu użytkowników i na jaki czas wchodzi i pozostaje na naszej stronie. Poniższy screenshot pokazuje, jak wartość współczynnika odrzuceń wzrasta wraz z wydłużającym się czasem ładowania strony.

Wybór systemu e-commerce a prędkość działania sklepu

W XXI wieku praktycznie każdą rzecz można kupić przez internet, nawet jeśli zamawiamy coś z drugiego końca świata. W dobie błyskawicznie rozwijającej się technologii, niemal każda firma z czasem będzie musiała postawić mocniej na ten kanał sprzedaży. Stojąc przed wyborem systemu sklepowego, ważne jest sprawdzenie, jak radzi on sobie z prędkością ładowania. Systemów sklepów -  mniejszych i większych, młodszych i starszych - jest wiele. W tym artykule chcemy skupić się na analizie systemu Shopware, ze względu na dobre wyniki osiągane przez system w porównaniu chociażby do konkurencyjnego systemu Magento 2. 

Jest to jeden z najnowszych systemów, który szybko i dynamicznie się rozwija. Oprócz szerokiej gamy funkcjonalności warto zwrócić uwagę na szybkość działania, która będzie przekładać się na wzrost liczby konwersji. Wyróżnia go także wiele funkcji optymalizujących, które są wdrożone w jego rdzeń. Dla właściciela sklepu oznacza to szybkie działanie bez dodatkowych inwestycji w optymalizację. Na samym końcu rzecz absolutnie kluczowa - system jest darmowy.

Jak przetestować swój sklep?

Jest wiele bezpłatnych lub płatnych aplikacji, które “automatycznie” poddadzą sklep analizie. Oprócz wyniku dostajemy wtedy od kilku do kilkunastu wskazówek, jak możemy stronę przyśpieszyć. Warto wyróżnić w tym przypadku dwa darmowe narzędzia, Pierwszym z nich jest aplikacja dostarczana przez Google - PageSpeed Insights. Poniżej przykładowy wynik analizy witryny, która uzyskała 100/100 punktów w teście prędkości na urządzeniach desktopowych oraz mobilnych.

Drugą aplikację odnajdziemy pod adresem https://gtmetrix.com/. Oprócz bardzo dużej liczby zalet ma też niestety jedną istotną wadę - czas oczekiwania na wynik analizy. Często trwa to od kilku do kilkunastu minut. Poniżej przykładowy efekt analizy strony, która uzyskała maksymalną liczbę punktów.

Pod głównym wynikiem otrzymujemy rozpisane wyniki z każdej kategorii, przez którą strona została testowana, a także jej wpływ na prędkość ogólną serwisu. 

Jak można przyśpieszyć swój sklep?

 

Nie istotne jaki system wybrałeś dla Twojej platformy e-commerce, Część wytycznych jest stosunkowo łatwa do wdrożenia, natomiast część wymaga większych prac po stronie kodu danej strony czy serwisu. Wskazówki optymalizacyjne możemy podzielić na dwie strony - serwera oraz witryny. Część z nich zobaczymy już podczas testów w narzędziu od Google, a część w GTmetrix. 

W poniższej liście nie uwzględniliśmy np. lepszego serwera, optymalizacja zapytań do bazy itp. Sam serwer możecie łatwo zmienić - ale np. optymalizacja zapytań do bazy nie będzie już tak łatwo wykonalna dla przeciętnego posiadacza sklepu.

Marcin Kaczor - backend developer w LIKE.agency (linkiem do www.like.agency/pl)

Checklista optymalizacji systemu e-commerce:

Po stronie serwera

• włączenie kompresji Gzip
• ustawienie cache dla zasobów np. zdjęć, czcionek, styli CSS
• włączenie Keep Alive
• najnowsza wersja PHP
• serwer oferujący protokół HTTP w wersji 2.
• serwer oferujący cache po stronie serwera.
• ogólna ilość zasobów serwerowych dostosowana do ruchu.

Po stronie witryny

• minifikacja kodu html
• minifikacja kodu styli CSS
• minifikacja skryptów JavaScript
• optymalizacja wielkości plików graficznych
• wyświetlanie plików graficznych w nowych formatach np. WebP w formie <picture>
• pliki graficzne ładujące się w trybie Lazy Load
• stosowanie rel=preconnect jeśli korzystamy z zasobów zewnętrznych
• ładowanie skryptów js w trybie defer lub async w zależności od potrzeb
• połączenie wszystkich plików css w jeden
• połączenie wszystkich plików js w jeden
• nie ładuj nieużywanych skryptów JS
• zminimalizować liczbę przekierowań
• kod zgodny z walidatorem W3C

Jak widzicie niektóre elementy możecie zoptymalizować sami, niektóre dostaniecie już na starcie przy wyborze dobrej platformy e-commerce. 

Łukasz Białonoga
CEO
LIKE.agency

Łukasz Białonoga jest założycielem LIKE.agency. W branży webowej pracuje od 2004 roku, w 2008 roku otworzył LIKE.agency. Obecnie jest odpowiedzialny za budowę relacji z kluczowymi klientami oraz gwarantowaniem jakości przy wdrożeniu bardziej skomplikowanych projektów.

 

Pobierz ebook "Ranking Agencji Marketingowych 2025 roku i ebook z poradami o promocji w sieci"