Konferencje

Jak przyspieszyć mobilny sklep internetowy – kolejne rekomendacje od e-point i Google

Firma e-point wraz z Google przygotowała kolejną edycję badania polskiego rynku m-commerce. Efektem współpracy jest ponad 530 rekomendacji dotyczących mobile. TOP 5 rekomendacji UX sprawdzisz tutaj. Rekomendacje dotyczyły też wzrostu szybkości witryny. Co rekomendują audytorzy m-commerce w tym aspekcie?

Badanie przeprowadzone na zlecenie serwisu JakWybracHosting.pl pokazało, że 83% internautów uważa szybkie ładowanie się stron internetowych za bardzo ważne. Polacy, w ponad połowie przypadków (51%) deklarują, że są mniej skłonni do powrotu na daną witrynę. Prawie połowa, bo 45% mniej chętnie coś kupi czy skorzysta z usługi, a 39% mniej chętnie poleci wolno ładującą się stronę innym.

Co więc w sytuacji, w której mowa o urządzeniach mobilnych, których użytkownicy są bardziej rozproszeni i oczekują jeszcze większej responsywności od stron internetowych i aplikacji?

Telefon ma ograniczenia!

Smartfon to urządzenie znacznie mniejsze od komputerów. Z racji swojej konstrukcji ma więc mniejsze podzespoły, które decydują o jego niższej przepustowości w porównaniu do urządzeń desktopowych. Audytorzy wskazują, że urządzenie mobilne ma średnio 6 razy mniejszy ekran, 4 razy wolniejszy procesor, o wiele mniej pamięci RAM oraz wolniej działające połączenie z internetem. Mobile First powinno przyświecać handlowcom niczym mantra „om” powtarzana w głowach buddyjskich mnichów. Jednym z kluczowych wskaźników płynności procesu zakupowego jest szybkość witryny. Jak wobec ograniczeń sprzętowych urządzeń mobilnych poprawić parametr szybkości ładowania się stron i elementów na nich?

Zmniejsz rozmiary i zrób rewizję JavaScript

JavaScript blokujący renderowanie sprawia, że przeglądarka musi pobrać, przetworzyć, skompilować i ocenić skrypt, zanim wyrenderuje stronę.

Zastosowanie asynchronicznego JavaScript sprawia z kolei, że kod konkuruje o przepustowość z innymi zasobami podczas pobierania.

Zatem oba rodzaje JS mają znaczący wpływ na obniżenie wydajności witryny. Nieużywany JavaScript nie dość, że spowalnia szybkość ładowania strony, to marnuje jeszcze dane na transfer dla urządzeń mobilnych, które mają ograniczoną transmisję danych, a wysyłanie nieużywanego kodu przez sieć marnuje dużo ich zasobów.

Zmień cache’owanie

Audytorzy zalecają optymalizację HTTP cache. Optymalizacja polega na ustawieniu interesujących nas parametrów w przeglądarce, mówiące o długości przechowywania i sposobie buforowania danych zasobów w lokalnej kopii urządzenia, zamiast ponownie pobierać ją z sieci. Zabieg ten sprawia, że przy każdych następnych odwiedzinach, czas ładowania strony skraca się. Jest to efektem posiadania coraz większych zasobów przez pamięć urządzenia w lokalnej wyszukiwarce.

Zmień formaty grafik na WebP

Obrazy w formatach JPG i PNG to przeżytek, jak pokazuje badanie. Najwydajniejsze dla mobile okazują się pliki w WebP, które mają lepsze właściwości kompresji i są lepszej jakości niż jej starsi bracia. Obrazy tego formatu szybciej się ładują i zużywają mniej danych komórkowych.

Zmniejsz rozmiar i strukturę DOM

Duże drzewo DOM, czyli model struktury strony internetowej często spowalnia wydajność strony. Jeśli DOM zawiera wiele węzłów, zwiększa to koszty danych dla użytkowników i spowalnia ładowanie strony. W wersjach mobilnych, gdy użytkownicy i skrypty wchodzą w interakcję ze stroną, przeglądarka stale rekompiluje pozycję i styl węzłów. Gdy reguły stylu są skomplikowane, strona będzie wolno się renderować. W przypadkach, gdy JavaScript używa ogólnych selektorów zapytań (np. document.querySelectorAll), strona będzie przechowywać referencje do wielu węzłów, co może przeciążyć pamięć urządzeń użytkowników i zmniejszyć wydajność strony.

Zmień obsługę styli CSS

Nieużywany CSS spowalnia budowę drzewa renderowania przez przeglądarkę. To struktura podobna do DOM. Zawiera jednak style dla każdego z węzłów. Aby wyrenderować stronę, przeglądarka musi przejść przez całe drzewo DOM i sprawdzić, które reguły CSS mają zastosowanie do każdego węzła. Powoduje to sytuacje, że w przypadku nieużywanych reguł, przeglądarka potrzebuje więcej czasu aby obliczyć styl dla każdego węzła. Specjaliści oprócz przebadania reguł i ich wykorzystania przez wyszukiwarkę, rekomendują też minifikację plików CSS, czyli zmniejszenie rozmiaru kodu CSS. Poprawi to wydajność ładowania strony.

Jaki efekt zanotowały firmy, które wdrożyły powyższe rekomendacje?

Firmy, które zastosowały rady dotyczące szybkości, zanotowały prawie 12% wzrostu szybkości witryny, a niemal 5% zanotowało spadek szybkości, gdy nie zastosowały się do rekomendowanych działań. 

Nie ignoruj potrzeb klientów mobilnych!

Jest to ważne, gdyż klient, który za długo oczekuje na załadowanie witryny, szybko zrezygnuje z dalszego zakupu na platformie.

Warto też pamiętać o User Experience, aby zapewnić kompleksową obsługę na poziomie zapewniającym klientowi pozytywne skojarzenia z naszą platformą.

W dzisiejszych czasach, nie chodzi już tylko o powracalność klientów. Tu rodzi się kwestia dostosowania treści do algorytmów, które pokazują je użytkownikom. SEO i SEM rodzą więc kolejne wydatki, które spełzną na niczym, jeśli klient nie dokona u nas zakupu.

Brak zastosowania ulepszeń dla klientów na platformie m-commerce rodzi pewność, że zakupów w witrynie będzie ich dokonywało coraz mniej. Ci mając obraz konkurencji, która lepiej dba o ich doświadczenie zakupowe oraz mnogość innych ofert, zrezygnują z naszych usług bez żadnego wahania.

Udostępnij

Zobacz także