Jak przyspieszyć sklep e-commerce w 10-ciu krokach?

Wdrożenie treści dzisiejszego artykułu z pewnością będzie wymagało od Was pomocy programisty. 90% tego, o czym będziemy pisali, nie zrobicie niestety samodzielnie. Jest to jednak bardzo ważne zadanie – być może najważniejsze, które możecie zlecić. Szybkość ładowania Waszego sklepu bezpośrednio przekłada się na konwersję sklepu, liczbę powracających Klientów, a tym samym – na sukces sklepu. Zobacz, co możesz zrobić i jak przyspieszyć sklep e-commerce.

Jeżeli jesteś stałym czytelnikiem naszego bloga, na pewno wiesz o tym, jak bardzo szybkość działania sklepu przekłada się na konwersję. Zostało to wykazane w wielu różnych badaniach. Wg KISSMETRICS:

1. 40% internautów opuszcza strony, jeżeli ładują się dłużej niż 3 sekundy.
2. 1 sekunda opóźnienia w ładowaniu strony zmniejsza współczynnik konwersji o 7% (czyli jeżeli Twoja średnia konwersja w sklepie wynosi 2%, to opóźnienie o 1 sekundę zamienia to w 1,86%, jeżeli sklep ładuje się 2 sekundy dłużej, to jest to 1,72%, a jeżeli 3 sekundy – 1,58%. Zobacz, jak 3 sekundowe opóźnienie spowodowało, że straciłeś prawie 25% szans na złożenie zamówienia przez tego Klienta.
3. Zakładając, że dziennie Twój sklep zarabia 1000 zł, to 1 sekundowe opóźnienie w ładowaniu rocznie oznacza 25 550 PLN straconych pieniędzy. Jeżeli czytasz ten artykuł, to prawdopodobnie Twoim problemem nie jest 1 sekunda, tylko kilka sekund. Ile jesteś więc w stanie stracić rocznie? Zobacz na poniższy wykres:

Co możesz więc zrobić?

Systemy cache

Upewnij się, że Twój sklep jest wyposażony w system cache’ujący. Co to takiego?

Najłatwiej pokazać to na przykładzie. Wyobraźcie sobie, że prowadzicie winiarnię. Przychodzi do Was Klient, który chce kupić wino chateauneuf du pape. Żeby to zrobić, musicie podejść do regału i przynieść je do kasy. Jeżeli taka sytuacja powtarzałaby się kilka razy dziennie, to zapewne trzymalibyście butelkę przy kasie, żeby nie musieć chodzić do regału i jej szukać. Dokładnie tak działa cache. Jest to system, który rejestruje pliki i zdjęcia (w pewnym sensie “zrzut” sklepu) dla pierwszego Klienta, a wszystkim innym pokazuje jego kopię.

Część z systemów e-commerce jest już wyposażona w takie systemy. Często można jednak zainstalować dodatkowe rozwiązania takie jak Full-Page cache, albo Varnish, które pozwalają lepiej decydować o tym, co powinno być przetrzymywane przy kasie. 

 

Systemy CDN (Content Delivery Network)

Wróćmy do przykładu z poprzednich akapitów. Jeżeli dane wino byłoby produkowane we Francji, ale można by je było zamówić też ze sklepu w Polsce – to gdzie byś to zrobił? CDN czyli Content Delivery Network oznacza właśnie sieć serwerów, gdzie przechowywane są dane – w szczególności zdjęcia i inne pliki typu media. Dzięki temu, jeżeli na stronę wchodzi użytkownik A, to dane te pobierane są z jednego miejsca, a dla użytkownika B z innego – w zależności od jego lokalizacji. Dzięki temu upewniamy się, że pliki muszą pokonać możliwie najkrótszą drogę, zanim wyświetlą się użytkownikom.

Minifikacja kodu JS/CSS

Tutaj chcielibyśmy omówić dwa elementy. Zanim to jednak zrobimy, to wprowadźmy dwa pojęcia:

1. Pliki JS (inaczej javascript) – są to skrypty, które odpowiadają za zachowanie strony po stronie przeglądarki. Przykładowo, jeżeli kliknąłeś w przycisk i wyświetliło się menu, to prawdopodobnie był to kod javascript.
2. Pliki CSS – te pliki odpowiadają za style Twojego sklepu. Innymi słowami – za jego wygląd. W CSS ustalasz, że przycisk ma być niebieski, a tło szare. W css ustalasz też jakiej wielkości powinien być font oraz to jak wygląda menu.

Na czym polega więc minifikacja tych plików? Łatwiej wytłumaczyć to na plikach stylów.

Informacja o tym, jak ma wyglądać dany przycisk, może być zawarta albo w samym kodzie przycisku, albo na początku strony w zbiorczym pliku. Co więcej, w takim zbiorczym pliku może znajdować się wiele różnych reguł, gdzie jedna będzie nadpisywać drugą (np. ogólnie przyciski mają być niebieskie, ale przycisk na koszyku ma mieć ciemniejszy kolor i mieć ramkę).

Minifikacja polega na oczyszczeniu tego kodu, żeby:

• nie nadpisywał sam siebie,
• nie powtarzał tych samych definicji stylu w różnych miejscach,
• był połączony w jeden plik.

Dzięki temu sam plik jest lżejszy, mniejszy, szybciej się wczytuje i można przyspieszyć sklep e-commerce. Ta sama zasada obowiązuje skrypty javascript – również są one łączone w jeden plik i usuwane są duplikaty. Może się też okazać, że nie wszystkie kody są potrzebne na wszystkich podstronach.

Umiejscowienie skryptów

Skoro już jesteśmy przy skryptach JS, to ważnym elementem jest to, gdzie są dodawane. Żeby to zrozumieć musicie wiedzieć, jak działają przeglądarki. Wyobraźcie sobie, że do wyświetlenia strony musicie pobrać wiele różnych danych, np.:

1.  skrypty,
2.  style CSS,
3.  kod HTML,
4.  obrazki,
5.  video,
6.  informacje o ciasteczkach

Przeglądarka ma ograniczenie w każdym z tych elementów – ile z nich może pobierać jednocześnie. Z tego powodu czasami widzimy, że strona już się pobiera, ale nie doładowują się pozostałe elementy, ponieważ czeka na któryś z elementów. To częsty przypadek przy skryptach JS, które są dodane na początku strony / sklepu. Weźmy jako przykład skrypt funkcji chatu na stronie. Jeżeli zostanie on niewłaściwie umieszczony, to witryna może potrzebować chwili, zanim skomunikuje się z zewnętrznym systemem, pobierze wszystkie pliki, a dopiero później wyświetli treść strony. Dla użytkownika będzie to oznaczało, że strona ładuje się wolniej.

Optymalizacja obrazów

To jeden z elementów, o który przynajmniej częściowo możesz zadbać sam. Każdy obrazek, który jest wrzucany na stronę Twojego sklepu, niezależnie od tego, czy jest to obrazek produktu, czy banner na stronie głównej – powinien zostać zoptymalizowany.

Jak o to zadbać? Po pierwsze upewnij się, że jest we właściwej rozdzielczości. Bez sensu będzie wrzucać zdjęcie o szerokości 4000 pikseli, jeżeli banner ma tylko 800 pikseli szerokości. Wszystko ponadto będzie tylko opóźniało działanie sklepu. W dużym uproszczeniu: większe zdjęcie = większy plik = przeglądarka będzie go dłużej pobierać.

Zanim zaczniesz jednak zmniejszać wszystkie obrazki, upewnij się, że otrzymałeś od programisty właściwe wymiary. Trzeba np. wziąć pod uwagę ekrany retina, które wymagają 2 x większych obrazów. Tutaj jednak znowu w grę wchodzi programista. To on musi w kodzie umieścić odpowiednie skrypty, które powiedzą przeglądarce, czy ma pobrać standardowe zdjęcie, czy 2 x większe. Inaczej zawsze będziesz pobierał za duże zdjęcia, co jak już ustaliliśmy – opóźni ładowanie sklepu.

Wielkość zdjęć to jednak nie wszystko. Zobacz na zdjęcia poniżej. Wydają się takie same? A jednak nie są. Zdjęcie po lewej “waży” 1.5 MB, a to po prawej tylko 379 KB. Prawie czterokrotna różnica. Skoro wyglądają identycznie – po co przepłacać? Nie chcielibyśmy wchodzić tutaj w szczegóły, jak uzyskiwana jest kompresja tych obrazów. Ważne jest to, że są narzędzia, które pozwalają to osiągnąć. Jeżeli wrzucasz do sklepu nowe zdjęcie, to koniecznie najpierw dodaj je do strony optimizilla.com – ona skompresuje to zdjęcie i pozwoli Tobie pobrać zoptymalizowaną wersję.

 

Co zrobić jednak ze zdjęciami, które już są w sklepie? Jeżeli masz na to czas, to można je ręcznie zoptymalizować w ten sam sposób (przy okazji dodając im alt-tagi i porządne nazwy). Jednak jeżeli chcesz zaoszczędzić trochę czasu, to poproś programistów o integrację z systemem typu tinypng.com. On automatycznie pobierze, skompresuje i wstawi poprawione zdjęcia.

 

Mniejsze obrazki i Sprite

To jednak nie koniec zabawy z obrazkami. Do tej pory mówiliśmy o zdjęciach produktowych i bannerach. Na Twoim sklepie jest jednak jeszcze spora liczba ikon np. koszyka, mojego konta, flaga języka, a także stałe elementy takie jak logo czy metody płatności.

Tak jak wspomnieliśmy powyżej – przeglądarka może pobierać jednocześnie tylko kilka plików. Żebyśmy nie musieli czekać w kolejce na pobranie wszystkich, można stworzyć jeden wspólny plik (tzw. Sprite), w którym znajdą się wszystkie ikony / drobne grafiki strony. Dzięki temu przeglądarka pobiera tylko jeden plik, a my jej wskazujemy, w którym miejscu jest dane zdjęcie – np. pobierz zdjęcie z obszaru w prawym górnym rogu. Tym samym strona ładuje się odrobinę szybciej.

Serwer

Tutaj musisz się zdać na wiedzę swojej agencji internetowej, ew. zatrudnić eksperta do pomocy – każdy sklep będzie wymagał innych serwerów. Od małego sklepu, który spokojnie poradzi sobie na pojedynczym serwerze, do sklepów obsługujących duży ruch, gdzie serwerów jest kilka (albo kilkanaście) i podział ról dzielony jest między nimi. Przykładowo, możliwe jest zastosowanie dwóch serwerów odpowiedzialnych za wyświetlanie sklepu użytkownikowi, a tzw. load-balancer będzie ustalał, z którego serwera mają być pobrane dane dla danego użytkownika. Kiedy jeden nie będzie wyrabiał, to system automatycznie rozdzieli ruch na dwa serwery.

Inną ważną kwestią jest lokalizacja serwerów – zasadniczo dobrze, jeżeli jest on jak najbliżej Klientów – jednak jest to dużo bardziej złożone. Pamiętajmy jednak, że ładowanie się sklepu będzie podzielone na kilka faz. Pierwszą z nich jest odpowiedź serwera – chcemy, żeby była możliwie najkrótsza. Zależy to od lokalizacji, ale też od danej serwerowni.

Ostatnią ważną kwestią jest typ dysków, jaki jest używany. Ogólnie dyski typu SSD są znacznie (kilkukrotnie) szybsze od dysków HDD. Jeżeli chcesz więc przyspieszyć działanie swojego sklepu, warto zainwestować w takie dyski (oczywiście w przenośni – robi to serwerownia). Nie oznacza to jednak, że wszędzie potrzebujemy dysków SSD. Przykładowo, jeżeli mamy serwer, na którym trzymamy backup, to nie jest tam zupełnie potrzebne (są one droższe).

Najlepiej zrobisz, jeśli zapytasz swojego programistę / agencję internetową, czy do przyspieszenia Twojego sklepu konieczna jest zmiana architektury IT, czy może wystarczy optymalizacja kodu.

AMP

Accelerated Mobile Pages to nowatorska metoda, pierwotnie stworzona na potrzeby blogów, ale obecnie znajdująca też zastosowanie w e-commerce. Jest to zbiór rozwiązań stworzonych przez Google, które pozwalają stronom mobilnym ładować się wyjątkowo szybko. W największym uproszczeniu jest to zbiór zasad i bibliotek kodu, których zastosowanie pozwala nam stać się zoptymalizowaną witryną. Takie witryny można zgłosić do Google’a, który stosuje swoje własne mechanizmy cache’ujące, które zapewniają bardzo szybkie ładowanie się stron mobilnych.

Dodatkową wartością dostosowania się do wymagań AMP, jest to, że Google bardzo promuje witryny, które wprowadzają te rozwiązania – dzięki temu możemy liczyć na wyższą pozycję w wyszukiwarkach. Niestety wykorzystanie AMP ma też swoje wady – np. zakłóca zbieranie danych w Google Analytics, ale też tracisz pełną kontrolę nad swoim sklepem – jest on cache’owany na serwerach Google. Zapytaj swojej agencji, czy to dobre rozwiązanie dla Ciebie.

Zapytania do bazy danych

To jest już bardzo techniczna kwestia, będzie ona zależała od systemu, na którym pracujesz, ale też od tego, jak dobrych masz programistów. W dużym uproszczeniu, kiedy jakiś system IT odwołuje się do bazy danych, np. po to, żeby zebrać pliki, które są potrzebne do wyświetlenia danej strony, często zbiera więcej informacji, niż potrzebuje w rzeczywistości. Oczywiście oznacza to, że musi zrobić więcej zapytań i że mogą one zajmować więcej czasu.

Wracając do przykładu winiarni z początku artykułu: łatwiej będzie zebrać wszystkie chateauneuf du pape, a potem wybrać z nich rocznik 2015, niż zebrać wszystkie wina z rocznika 2015, żeby z nich wybrać tylko chateauneuf du pape. Mamy nadzieję, że ten przykład dobrze zobrazuje Wam, na czym polega optymalizacja zapytań do bazy danych.

Google Tag Manager

Można by zapytać co ma Google Tag Manager do szybkości ładowania strony? Okazuje się, że jednak dosyć dużo. Znany jest przypadek, gdzie zmiana wynosiła aż 25% czasu ładowania. Dlaczego tak się dzieje?

Znowu wracamy do pobierania kilku plików jednocześnie i ich kolejkowania – taki sposób działania nazywa się w IT synchronicznym. Google Tag Manager działa jednak w asynchroniczny sposób, dzięki czemu może pobierać wiele skryptów w tym samym czasie. Dodatkowo GTM pozwala na dokładne zarządzanie tym, gdzie mają się wyświetlać które skrypty. Przykładowo – być może nie chcemy, żeby chat pokazywał się na stronie kasy, albo żeby na koszyku pokazywał się popup zatrzymujący użytkownika – wszystko to możemy ustawić w systemie Google Tag Manager.

Pamiętajcie też, że Google Tag Manager to tylko jeden skrypt, który musi zostać pobrany. Pobieramy jeden skrypt, a on pod sobą może ukrywać 40 innych. Jeżeli próbowalibyście dodać 40 skryptów na stronie pojedynczo, to oczywiście drastycznie by ona zwolniła.

 

Końcowe uwagi

Mamy nadzieję, że artykuł okazał się ciekawy. Nawet jeżeli większości z rozwiązań nie możecie wprowadzić sami, może posłuży jako przewodnik “o co pytać programistę“, żeby przyspieszyć sklep e-commerce. Należy pamiętać, że jest to jeden z najważniejszych, jeżeli nie najważniejszy element, który możemy poprawić. Nie tylko wpływa na konwersję, ale Google też bardzo mocno patrzy na czas ładowania strony i poprawienie tej kwestii, może wpłynąć na naszą pozycję SEO.

Zostawiamy Was z kilkoma darmowymi narzędziami, które pomogą sprawdzić, co należy zmienić u Was żeby przyspieszyć sklep e-commerce:

1. Google Pagespeed insights – to oficjalne narzędzie Google. Wartości powyżej 80 są dobre, powyżej 60 wymagają poprawy, poniżej – czeka Was dużo pracy.
2. https://tools.pingdom.com/ – proste narzędzie, które też zapewni Wam trochę informacji o tym, co można poprawić w witrynie
3. https://www.webpagetest.org/ – warte uwagi narzędzie, które zrobi za Was 3 testy. Dzięki temu zobaczycie, jak strona zachowuje się przy pierwszym wejściu, ale też po zapisaniu części danych w przeglądarce. Ma to szczególne znaczenie, jeżeli używacie mechanizmów cache’ujących.

Dziękujemy za przeczytanie całego artykułu. Są oczywiście inne elementy, które można wprowadzić – każdy sklep i platforma e-commerce będzie inna, więc inne metody w niej zadziałają. Jedna rzecz, o której warto jeszcze wspomnieć to to, że liczy się odczucie Klienta. Ludzki umysł łatwo można oszukać – np. stosując loadery albo placeholdery. Wtedy użytkownik po sekundzie widzi, że coś się ładuje i zaczyna podświadomie czas liczyć od nowa. To dobry trick, który pozwoli Ci “zachować twarz”, nawet jeżeli Twój sklep ładuje się dłużej, niż być chciał.