Zwiększ konwersję w swoim sklepie dzięki wydajności.

Stare porzekadło „czas to pieniądz” ma duże znaczenie w branży e-commerce. Każda sekunda, czy wręcz jedna tysięczna sekundy, stracona na załadowanie pojedynczej strony internetowej przekłada się na wiele straconych możliwości biznesowych.

Dowodów na istnienie takiego scenariusza dostarczają dane dostępne na rynku, na przykład:

Najlepszym sposobem sprawdzania tego, czy Twoja strona internetowa nie ładuje się za długo, jest wykorzystanie narzędzi monitorujących prędkość. Najlepsze z nich to WebPagetest, Pingdom Website Speed Test, PageSpeed Insights, GTmetrix oraz wtyczka Developer Toolbar do przeglądarki Google Chrome (wciśnij „F12”, aby uzyskać dostęp do strony, przejdź do zakładki „Sieć” i załaduj ponownie stronę, aby dokonać pomiaru).

Wyniki testów przeprowadzonych za pomocą narzędzia WebPageTest wskazują na interesujące wskaźniki, które mogą przydać się detalistom, takie jak: First Byte Time; Load Time; Start Render; Bytes In; Keep-Alive Enabled; Compress Transfer; Compress Images; Cache Static Content; Effective Use of CDN.

To, co na ogół ładuje się najdłużej na stronie sklepu internetowego to elementy niestandardowe. Oznacza to, że sposób, w jaki strona została dostosowana do indywidualnych potrzeb, tj. liczba obrazów i tagów HTML, JavaScript i CSS, odpowiada za różnice w wydajności między naszą witryną e-commerce a innymi tego typu rozwiązaniami.

Na przykład nadmierna liczba ad-trackerów, elementów remarketingu, analiz, heatmap, mechanizmów rekomendacji oraz interakcji z klientami może opóźnić całkowite załadowanie się strony internetowej. Co więcej, wiele z takich tagów jest aktywowanych przez osoby trzecie w celu zwiększenia liczby zasobów na danej stronie internetowej. Choć niektóre z nich mogą być naprawdę niezbędne, często takie dodatkowe funkcje nie są tego warte. Z tego względu każdy sprzedawca powinien przeanalizować to,
w jaki sposób każda z aplikacji wpływa na konwersję. Jeśli wynik będzie pozytywny, można zachować te aplikacje.

Ponadto istnieją inne zasoby, takie jak zapisywanie w pamięci podręcznej lub wykorzystanie sieci CDN (Content Delivery Network). W takich sytuacjach klient VTEX nie odczuje różnicy, gdyż infrastruktura oferowanej platformy obsługuje wszystkie rozwiązania i robi to w taki sam sposób w przypadku każdego z nich. Na przykład zarówno CDN, jak i ustawienie czasu korzystania z pamięci podręcznej to w naszym systemie elementy natywne.

Istnieją jeszcze inne, bardziej złożone pod względem technicznym kwestie, które zasługują na to, by dokładniej im się przyjrzeć:

Liczba obrazów wgranych na wirtualną platformę w niczym nie przeszkadza. To ich wymiary oraz ilość miejsca zajmowanego przez te pliki sprawiają, że możemy mieć problem z wydajnością.

Na przykład obraz zajmujący ponad 100 kb jest za duży – zwłaszcza, gdy rozważamy sytuację, w której w e-sklepie ładowanych jest wiele obrazów. Idealna wielkość powinna mieścić się w przedziale między 50 kb a 80 kb.

Jeśli zaś chodzi o rozmiar, problem pojawia się wtedy, gdy np. zdjęcie produktu wyświetla się w pomniejszonym formacie na stronie głównej, lecz w rzeczywistości jest dużo większe.

Podejdźmy do tego bardziej praktycznie. Oto kolejny przykład: wyobraźmy sobie zdjęcie blendera na stronie głównej sklepu internetowego z AGD, które wyświetla się użytkownikowi w wymiarach 220 x 220 pikseli. Póki co, całkiem nieźle. Niedobrze by było, gdy pierwotnie ten sam obraz miał wielkość 1000 x 1000 pikseli. Przeglądarki przeprowadzają procesy, pobierają oryginalne zdjęcie i zmieniają jego wielkość, na ogół za pomocą języka CSS, aby pasowało do rozmiaru ustalonego albo przez sprzedawcę, albo jego zespół deweloperów.

Wspomnieliśmy wcześniej o obciążeniu wywoływanym procesami aktywowanymi przez osoby trzecie podczas ładowania strony sklepu internetowego. W tym przypadku poważnym problemem jest kolejność uruchamiania tagów.

Rozważmy na przykład korzyści płynące z zainstalowania funkcji chatu umożliwiającego obsługę klienta, który działa w taki sposób, że użytkownik nie musi zbyt długo pozostawać na stronie, albo zalety aktywowania mechanizmu rekomendacji, który nie zmusza odwiedzających nawet do tego, by przewinąć stronę z produktami.

Nie trzeba uruchamiać wszystkich aplikacji podczas ładowania strony głównej. Jeśli jednak tak się dzieje, proces ładowania bez wątpienia zwalnia.

Jednym z elementów, który odpowiada za spowolnienie i który jest popularny wśród sprzedawców to przeglądanie produktów w pionie.

Często sprzedawca woli zaprezentować 12 produktów w tym samym wierszu zamiast wyświetlić jednocześnie tylko 4 z nich. Nieodłączną wadą takiego rozwiązania jest to, że 8 z nich pozostanie w ukryciu i pokaże się tylko wtedy, gdy użytkownik kliknie odpowiednie miejsce. Jednak ze względu na to, że odwiedzający mają większą skłonność do przewijania stron wciąż można dużo powiedzieć o wybieraniu produktów w pionie.

Gustavo Rios wyjaśnił to zagadnienie w ramach swojego webinaru, stwierdzając, że użytkownicy wolą poruszać się po stronie raczej w pionie niż w poziomie. Zatem może nie trzeba będzie stosować takich nowych rozwiązań (większa liczba zdjęć i przewijanie w pionie), chyba że okaże się, że świetnie się sprawdzają w Twoim sklepie.

Istnieje szereg dobrych praktyk, które pomagają detalistom w zwiększeniu wydajności ich działalności e-commerce i tym samym gwarantują konsumentom bardziej przyjazne doświadczenia zakupowe. Poniżej wypunktowano najważniejsze metody uwzględniające porady prezentowane w webinarze:

Zdjęcie mające 500 kb może zostać skompresowane do wielkości nieprzekraczającej 100 kb bez znaczącej utraty jakości. Jest to możliwe dzięki wykorzystaniu pewnych programów i narzędzi. Jedną z możliwości jest Adobe Photoshop, ale istnieją też inne, prostsze aplikacje, takie jak Riot, oraz strony internetowe w rodzaju TinyJPG, Kraken (skorzystaj z opcji „Lossy”) czy Compress PNG.

W większości przypadków da się zredukować wielkość plików graficznych
o co najmniej 50%, co z punktu widzenia strony internetowej stanowi znaczną różnicę.

Zmiana wymiarów zdjęć jest łatwiejsza niż ich kompresowanie. Zadowalający efekt można osiągnąć, korzystając z takich programów jak Paint, Photoshop lub Riot.

W Internecie dostępne są strony internetowe i narzędzia, na przykład Fotor, iLoveIMG czy ImageResizer, które ułatwią to zadanie.

Idealne, standardowe wymiary zdjęć nie istnieją. Zależą one od miejsca, w którym obraz będzie wyświetlany. Na przykład jeśli obrazy widnieją na stronie głównej, można je wgrać w wymiarach, w jakich będą wyświetlane, o ile nie będą powiększane po najechaniu na nie kursorem myszy. Na stronach z produktami obrazy mogą być nieco większe, bo choć są wyświetlane w mniejszych wymiarach, konsument może powiększyć je, aby  przyjrzeć się produktowi w wyższej rozdzielczości.

Skompresowanie kodów tego typu stanowi bardziej techniczne zadanie. Na ogół spoczywa ono na deweloperach i zespole programistów opiekujących się Twoją platformą.

Minimalizowanie liczby aplikacji korzystających z języków Java, HTML i CSS polega na usunięciu, zmodyfikowaniu lub ograniczeniu liczby spacji, komentarzy, znaków, podziałów na wiersze oraz nazw niektórych zmiennych. chodzi o to, by kod był bardziej kompaktowym, czyli składał się z najmniejszej możliwej liczby wierszy. Dzięki temu będzie działał szybciej i pozwoli zaoszczędzić zasoby, a przy tym przyspieszy czas reakcji serwerów.

Do optymalizacji kodów można wykorzystać kilka narzędzi, takich jak Adobe Dreamweaver (skupiający się na udoskonalaniu kodu HTML), Minify (CSS i Java) czy YUI Compressor (CSS i Java).

Jak wspomniano wcześniej, organizacja produktów prezentowanych na stronie głównej i stronach z kategoriami może wpływać na czas ładowania strony.

Ciekawym rozwiązaniem będzie zatem wypróbowanie układu, który wyeliminuje wszelkie formy przewijania pionowego i pozwoli skoncentrować się na przewijaniu w poziomie.

Produkty, które dotychczas pozostawały ukryte mogą pojawić się w nowym wierszu. Można też zmniejszyć liczbę produktów, sprawiając tym samym, że przeglądarka nie będzie musiała wczytywać tylu aplikacji.

Dzięki narzędziom monitorującym szybkość strony internetowej można zidentyfikować aplikacje wczytywane przez twój e-sklep. Analizując wyniki, warto ocenić wpływ każdego ze skryptów na wydajność oraz, przede wszystkim, na konwersję na stronie. Dzięki temu będzie można łatwiej określić, czy faktycznie każdy z nich jest potrzebny.

Dodatkowo należy koniecznie sprawdzić, czy w tych wynikach lub w strukturach HTML, CSS i JavaScript Twojej strony internetowej nie znalazły się zduplikowane fragmenty kodów bądź żądania.

Kolejna ciekawa rada Gustavo Riosa dotyczy wykorzystania wtyczki Ghostery w przeglądarce Google Chrome. Dzięki niej można zidentyfikować wszystkie trackery i aplikacje pochodzące od osób trzecich, które są uruchamiane na stronie.

W przypadku wykrycia zduplikowanych tagów lub elementów, które na stronie pełnią takie same lub podobne funkcje spróbuj zablokować lub wyłączyć te aplikacje za pomocą Google Tag Managera lub innego narzędzia do zarządzania tagami.

Kolejna metoda zarządzania wykorzystaniem aplikacji polega na przeorganizowaniu obciążenia, jakie stanowią one dla strony. W tym przypadku najlepiej będzie, jeśli pewne skrypty zostaną uruchomione zgodnie z przebiegiem interakcji użytkownika ze stroną.

Sprzedawca może sobie z tym poradzić, korzystając z Google Tag Managera. Dzięki tej aplikacji można na przykład sprawić, że tag remarketingowy będzie aktywowany wyłącznie wtedy, gdy gość spędzi na stronie więcej
niż 30 sekund.

Kolejnym użytecznym narzędziem jest LazyLoad, które usprawnia ładowanie stron internetowych, uruchamiając pliki obrazów tylko wtedy, gdy znajdują się w polu widzenia użytkownika.

Podsumowując, powyższe usługi pomogą Twojej stronie szybciej wgrywać najważniejsze treści, co umożliwi skrócenie czasu oczekiwania na to, aż strona stanie się w pełni interaktywna (parametr Time to Interactive).

Back-end Twojego e-sklepu może mieć olbrzymi wpływ na szybkość strony internetowej. W przypadku VTEX infrastruktura jest jednakowa dla wszystkich klientów, punkt wyjścia jest taki sam. Tym samym sprzedawcy detaliczni zaczynają z zasobami, które pozwalają im osiągać lepsze wyniki.

Jednym z nich jest wspomniana wcześniej natywna sieć CDN. Ponadto sprzedawcy detaliczni mają także dostęp do narzędzia WebP, które jest w stanie skompresować obrazy w formatach PNG, JPG i JPEG do  rozmiaru, który stanowi 30%-40% oryginalnej wielkości pliku – nawet jeśli był on już wcześniej poddawany kompresji.

VTEX pomaga także swoim klientom w implementacji protokołu HTTP2 u sprzedawców, którzy przeprowadzają migrację swojej witryny e-commerce do protokołu HTTPS na platformie. Taka formuła zapewnia wyższy poziom bezpieczeństwa transakcji przeprowadzanych przez klientów oraz umożliwia szybsze otwieranie stron internetowych niż w przypadku tradycyjnego protokołu HTTP 1.1.

Ponadto na pulpicie każdego klienta, w widoku głównym, umieszczamy wykres monitorujący historię średnich czasów ładowania strony sklepu i porównujemy je z innymi witrynami internetowymi z obszaru e-commerce znajdującymi się w bazie VTEX.

W wirtualnym sklepie prędkość ładowania i konwersja są ze sobą silnie powiązane. Z tego względu sprzedawcy detaliczni powinni znać wydajność swoich stron internetowych oraz zachowywać ostrożność podczas dostosowywania stron do indywidualnych potrzeb. Koniec końców, personalizacja jest tym właśnie elementem, który odróżnia najszybsze rozwiązanie e-commerce od najwolniejszego.

W przypadku VTEX różnica jest jeszcze wyraźniejsza, gdyż infrastruktura jest taka sama dla wszystkich klientów. Wszyscy sprzedawcy powinni mieć tego świadomość, ponieważ obrazy i kody, które nie zostały zoptymalizowanie, a także nieproduktywne tagi, mogą spowalniać działania podejmowane przez konsumentów.

Konieczne jest zatem monitorowanie pracy aplikacji, kompresowanie obrazów i kodów oraz zachowanie tylko tych skryptów, które mają korzystny wpływ na konwersję. Istnieją także pewne procedury, które sprawią, że Twój sklep będzie działał szybciej i tym samym stanie się bardziej dochodowy.