Konferencje

Jak przyspieszyć swój sklep internetowy?

Coraz więcej raportów i analiz pokazuje, że w większości, osoby odwiedzające witryny internetowe to użytkownicy kanału mobilnego. Raport e-point i Google mówi też, że odznacza się to również w samej wyszukiwarce Google. Dane wskazują, że w ubiegłym roku liczba zapytań z telefonu była dwa razy większa niż z komputera. Niestety nie wszyscy przedsiębiorcy biorą to pod uwagę przy projektowaniu swoich serwisów. 

Podczas Mobile Trends Conference 2022 wystąpiło dwóch specjalistów z branży mobile, którzy są twórcami audytu 50 polskich sklepów internetowych. Piotr Kowalski z Google omówił 5 rekomendacji dla ulepszenia user experience mobilnej witryny internetowej, natomiast Michał Szklarski z e-point podpowiada 5 sposobów na przyspieszenie ładowania swojego portalu.

Może Cię zainteresować: Co zrobić, aby ulepszyć UX sklepu internetowego?

We wstępie dokumentu możemy przeczytać, że Google zleciło badanie francuskiej firmie badawczo-konsultingowej IPSOS. Wynikiem tego są dane, wedle których Polacy znajdują się średnio w ponad siedmiu procesach zakupowych naraz. Jest to cecha szczególna, gdyż oznacza to, że robimy zakupy wszędzie: w trakcie jazdy tramwajem, postoju w kolejce, w łóżku czy w pracy. Tak optymistyczne dla sprzedawców informacje trzeba jednak skonfrontować z rzeczywistością, gdyż ok. 70 proc. polskich klientów porzuca koszyk zakupowy bez dokonania ostatecznej konwersji. Sporym winowajcą tego jest doświadczenie użytkownika, ale też ograniczenia technologiczne telefonów komórkowych. Smartfony mają bowiem nawet sześciokrotnie mniejszy obszar powierzchni roboczej, co znacznie utrudnia nawigację. Poważnym utrudnieniem projektowym jest także mniejsza moc obliczeniowa takich urządzeń, wynikające ze słabszych procesorów, kart graficznych czy pamięci operacyjnej. Niekiedy zawodna jest łączność sieciowa, a dodatkowych frustracji dostarczają źle zaprojektowane skrypty stron czy złe ustawienia ładowania poszczególnych elementów wersji mobilnej sklepu. 

Popraw CLS

Jeśli mowa o poprawie CLS to odpowiedzmy sobie na pytanie czym w ogóle jest ten wskaźnik. Cumulative Layout Shift jeden z elementów Core Web Vitals odpowiedzialny za stabilność wizualną strony podczas jej załadowywania. Według SEO-wców jest to jeden z ważniejszych wskaźników, gdyż ma on realny wpływ na ocenę serwisu w narzędziu Google PageSpeed Insights. Narzędzie to sprawdza optymalność ładowania danej witryny. Poza aspektami technicznymi warto uświadomić sobie, że za brakiem zoptymalizowanego CLS nie kryje się tylko oblanie testu w narzędziu. Po drugiej stronie ekranu znajdują się zdenerwowani konsumenci, którzy mogą już nigdy więcej nie mieć ochoty na skorzystanie z naszego sklepu. Jak wskazuje invette.pl wskaźnik ten nie powinien przekroczyć poziomu 0,1, wymaga od nas Google. 

Co w praktyce oznacza praca nad CLS-em? Mając na myśli optymalizację, musimy zdefiniować konkretny rozmiar naszych obrazów w kodzie HTML. Michał Szklarski przekonuje, że ustawienie precyzyjnej i zdefiniowanej na poziomie znaczników HTML szerokości i wysokości elementów obrazu <img> pozwala zmniejszyć przesunięcia układu i ładowanie się znaczników. Otrzymujemy więc sytuację, w której na telefonie ładują się najpierw największe elementy, po których wczytaniu pojawiają się mniejsze. Następnie elementy te są dopasowywane do ekranu urządzenia.


Według badań wychodzi, że większość polskich sklepów nie posiada zdefiniowanych precyzyjnych rozmiarów, co powoduje nierównomierne ładowanie się strony, w szczególności jej elementów graficznych. Aby to poprawić należy zdefiniować oraz nadpisać parametry szerokości (‘width’) i wysokości i (‘height’) we właściwych zbiorach graficznych.

Problem pod kątem CLS miało aż 82 proc. przebadanych sklepów internetowych. 

Pozbądź się starego Javascript 

Osoba odpowiedzialna za sporządzenie dokumentu użyła tutaj bardzo pasującego słowa, a mianowicie – rewidowanie. Według PWN jest to dokonywanie rewizji pomieszczeń, osób itd. Rewizja jest to wyszukiwanie dowodów czynów przestępczych w danej sprawie. Nie inaczej jest w tym przypadku. Google nie lubi niepotrzebnych śmieci na swoim poletku. Audytorzy zalecają usunięcie albo inny rodzaj optymalizacji nieużywanego kodu JavaScript. Ma to zmniejszyć ilość przesyłanych danych w relacji klient-serwer. 

Jest to szczególnie istotne, gdyż brak takiej optymalizacji powoduje kolejny uszczerbek w ładowaniu się witryny internetowej, co nieraz może kosztować użytkownika dodatkowe kilkadziesiąt sekund irytacji. Rekomenduje się zastanowienie nad koniecznością dalszego korzystania z przestarzałych skryptów JavaScript, a także kompresję wszystkich zasobów JavaScript. Dodatkowym wyjściem z sytuacji może być też optymalizacja ruchu w trakcie działania, dzięki rozwiązaniom klasy CloudFlare.

Problem z przestarzałymi JavaScript miało aż 75 proc. zbadanych witryn e-commerce.

Dłużej Cache’uj

Pamięć podręczna cache umożliwia szybki dostęp do danych zapisanych na urządzeniu, oddzielając je od pamięci RAM, mówi Morele.net. Witryna harbingers.io uświadamia nas, że pamięć cache odpowiedzialna jest za przechowywanie danych potrzebnych przy przeglądaniu strony przez przeglądarkę. Jest to istotne ze względu na fakt, że dzięki tej pamięci opartej na bardzo szybkich (i bardzo drogich) nanotechnologicznych półprzewodnikach, urządzenie nie musi za każdym razem ściągać tych samych danych z sieci. Przeglądarka jest bowiem w stanie pobrać je z pamięci podręcznej. Kolejnym wskazaniem dla poprawienia szybkości ładowania naszej witryny internetowej jest przedłużenie okresu przechowywania zasobów w pamięci podręcznej. Wiąże się to z o wiele większą dostępnością danych dla strony. Specjaliści zapewniają, że stałe elementy portalu internetowego mogą być bez problemu przechowywane na urządzeniu użytkownika. Rezultatem będzie brak potrzeby ciągłego odczytywania strony przy każdej następnej wizycie. Poza skróceniem czasu ładowania, wiąże się to z oszczędnością danych mobilnych potrzebnych na transfer informacji. 

Audyt serwisów wykazał, że spora część zasobów ładuje się z maksymalnym czasem cache’owania od 0 do kilku dni, co nie jest obligatoryjne przy mało zmiennych zasobach strony. Poleca się zatem zwiększyć czas cache’owania stałych zasobów do nawet 12-stu miesięcy lub nawet dłużej. 

Z krótkim okresem cache’owania spotkano się przy 65 procentach badanych e-commerce’ów.

Uwidocznij tekst w trakcie ładowania czcionki

Wbrew pozorom, czcionki to najczęściej duże pliki, a ich ładowanie może trochę potrwać. Są przeglądarki, które do momentu załadowania się czcionek nie pokazują użytkownikowi żadnego tekstu. Mamy wówczas do czynienia ze zjawiskiem FOIT i FOUT. Czynnik ten nie powodował problemów z ładowaniem strony, ale diametralnie wpływał na CLS, poprzez “rozbicie uwagi użytkownika”, informuje raport.  JAk możemy się domyślać, może to wpłynąć na dość niski poziom pozytywnego customer experience. Rekomendowane jest zastąpienie starych fontów w formatach TrueType Font nowymi fontami w formatach Web Open Font Format. Co więcej, właściciele sklepów internetowych powinni zastanowić się nad wdrożeniem funkcji CSS „font-display”, która pozwala widzieć tekst już w trakcie jego ładowania. 

Problem ze starymi czcionkami miało ponad 60 proc. audytowanych sklepów. 

Optymalizacja JS

Badacze przypominają, że zbyt duże nagromadzenie rozwiązań na stronie może przeciążać jej serwery, co znacznie wpływa na szybkość jej ładowania. Oczywiście w dobie konkurencji i budowania przewagi technologicznej posiadanie systemu marketing automation, wirtualnych asystentów czy rankingów może okazać się kluczowe dla pozyskania i zatrzymania nowych klientów. Nie trzeba jednak wylewać dziecka z kąpielą. Optymalnym rozwiązaniem nie pozbawiającym naszej witryny jakże potrzebnych udogodnień może być skrócenie czasu parsowania, kompilowania i wykonywania kodu JS. Może być to ważne też dlatego, że wiele ze skryptów JavaScript nie jest stale wykorzystywanych i przetestowanych. 

Wysokowydajna obsługa skryptów JS wpływa na całkowitą długość załadowania strony internetowej i znacznie obniża komfort korzystania z niej poprzez przedłużający się proces. Kilkanaście sekund dłużej według audytu drastycznie obniża możliwości potencjalnej konwersji. Twórcy postulują, aby pochylić się nad skryptami JS trochę mocniej. Należy przeanalizować potrzeby i zoptymalizować posiadane Javascript pod kątem użyteczności i prawidłowego działania. Dobrą praktyką może okazać się podzielenie skryptów na mniejsze fragmenty, które będą bardziej elastyczne w ładowaniu. Pod tym kątem nie radzi sobie ponad 55 proc. zbadanych firm prowadzących internetową sprzedaż.

Rynek m-commerce nie jest łatwy. Ogromna ilość konkurujących podmiotów, wciąż czyhające zza rogu algorytmy i klienci, których oczekiwania rosną z dnia na dzień. Wysiłki wkładane w marketing i dopracowanie swojej oferty mogą okazać się niemiarodajne, gdy nasza strona nie będzie spełniać oczekiwań wizualnych naszego klienta lub po prostu nuży go oczekiwanie na jej załadowanie. W końcu u konkurencji strona ładuje się trzy sekundy krócej. UX i użyteczność witryny to dzisiaj obszary działań równie istotne, co marketing, sprzedaż czy logistyka. Na wzrost konwersji wpływa przede wszystkim dobre pierwsze wrażenie, ergonomia witryny, a także rozwiązania ułatwiające korzystanie z niej. Szczególnie istotne jest to dla osób z niepełnosprawnościami, które nie muszą widzieć naszego sklepu lub móc poruszać palcem. Głównym wnioskiem płynącym z badań jest fakt, że użytkownicy żądają od sklepu, by treści pojawiały się na ekranie z efektem natychmiastowym, a interakcje nie sprawiały żadnego problemu. Im więcej zrobimy, by zoptymalizować nasze zasoby internetowe, tym mniej klientów stracimy, a być może więcej zyskamy.

Całość audytu dostępna jest na stronie e-point, tutaj! – https://www.e-point.pl/raporty/google-mcommerce.

Udostępnij

Zobacz także