W 2018 roku w Polsce liczba wyszukiwań poprzez przeglądarkę na urządzeniach mobilnych zaczęła przerastać urządzenia desktopowe. Był to przełomowy moment, bowiem od tamtej pory różnica między ilością użytkowników zaczęła rosnąć dwukrotnie. Podobne zmiany można było zaobserwować w okolicznych krajach Europy, gdzie w tym samym roku to ruch mobilny stanowił większość całego ruchu w sieci. Należy więc śmiało powiedzieć, że od 2018 wkroczyliśmy w erę mobilności.
Można by się spodziewać, że ogromny ruch z urządzeń mobilnych idzie w parze z wysoką konwersją, jednak nic bardziej mylnego. Współczynnik konwersji jest często 2-3 razy mniejszy niż na urządzeniach desktopowych, na co przekłada się wiele czynników. Głównie są to: zbyt długi czas ładowania witryny, nieprzyjazny UX oraz reklamy Google Ads na samej górze wyników. Tego ostatniego nie jesteśmy w stanie poprawić, ale dwa pierwsze czynniki są całkowicie zależne od nas – właścicieli oraz twórców stron. Dlatego też po uczestnictwie w CEE Mobile Web Days przychodzimy do Was ze wskazówkami, jak zadbać o dwa najważniejsze czynniki wpływające na konwersję z urządzeń mobilnych.
Kilka dni temu na naszym blogu mieliście już okazję zapoznać się z wpisem Piotrka, który bardzo szczegółowo opisał temat związany z UX w e-commerce i jego wpływie na podniesienie konwersji. Dzisiaj natomiast poznacie skuteczne i sprawdzone sposoby na optymalizację prędkości ładowania stron mobilnych oraz dowiecie się, dlaczego jest to takie ważne. Zapraszamy do lektury.
Dlaczego czas ładowania jest taki ważny?
Stale zwiększający się ruch na urządzeniach mobilnych powinien stać się najlepszą motywacją do dbania o optymalizację mobilnej wersji strony. Dlaczego? Ponieważ aż 75% użytkowników deklaruje, że to właśnie czas ładowania jest dla nich najważniejszy podczas przeglądania. Ciekawie to przedstawił Pan Piotr Kowalski podczas swojej prezentacji, początkowo niejako zmuszając uczestników do oczekiwania na załadowanie się kolejnego slajdu, by później właśnie na tym przykładzie odnieść się do uczuć. Okazało się, że czas oczekiwania na załadowanie się strony potrafi być bardziej stresujący niż oglądanie horrorów. Nic więc dziwnego, że współczynnik konwersji nie jest zadowalający, skoro jeszcze zanim załaduje się strona, użytkownik jest do niej negatywnie nastawiony.
Google postanowiło wziąć sprawę w swoje ręce i po kilku latach od rozpoczęcia ery mobilności ustanowiło czas ładowania stron jednym ze swoich czynników rankingowych. Na tę decyzję na pewno wpłynęło wiele pośrednich czynników, jednak głównym mógł być fakt tworzenia coraz bardziej obszernych stron, wykorzystujących ciężkie zasoby w postaci wysokiej jakości zdjęć czy niezoptymalizowanych skryptów.
Skąd wziął się problem?
Jeszcze w 2011 roku strony były o wiele lżejsze i ich czas ładowania był znacznie krótszy względem dzisiejszych, mimo braku optymalizacji. W wielu przypadkach wynika to ze sprzecznych zadań przypisanych webmasterowi, zajmującemu się stroną, przez różne działy firmy. Z jednej strony kładzie się nacisk na optymalizację czasu ładowania witryny, a z drugiej pojawia się chęć zamieszczenia na stronie głównej nowego spotu reklamowego w wysokiej rozdzielczości. Brak synchronizacji i zrozumienia między różnymi działami w firmach doprowadza do chaosu, który skutkuje wolno ładującą się stroną. To nie jest jednak jedyny powód problemów.
Najczęstsze przyczyny regresji czasu ładowania stron:
- brak doświadczenia – zadania optymalizacji przypisane są do zespołów, które nigdy wcześniej nie miały z nimi do czynienia bądź występują problemy z optymalizacją nowych zasobów, które trafiają na stronę w późniejszym czasie,
- niezgodność organizacyjna – brak ciągłego nadzorowania zespołów odpowiedzialnych za wydajność strony bądź programiści odczuwający większy nacisk na swoje działania z konkretnej strony (dotyczące konkretnego zadania),
- niewiedza – oczekiwania związane z tym, że samo utworzenie kodu powinno automatycznie wpływać na świetną wydajność strony bądź brak punktu odniesienia, który pozwoliłby zrozumieć wyzwania związane z poprawianiem prędkości ładowania,
- odporność na zmiany – developerzy nie chcą wyjść ze swojej strefy komfortu bądź obawiają się swojej ewentualnej niekompetencji związanej z optymalizacją stron.
Osiągnięcie sukcesu w kwestii optymalizacji strony mobilnej już na etapie jej tworzenia jest możliwe tylko przy zachowaniu równowagi między celami biznesowymi oraz wydajnościowymi. Idealnym rozwiązaniem jest praca zespołowa nad wyglądem projektu już od samego początku, jej odpowiednie rozplanowanie oraz trzymanie się ram.
Jak zaplanować ramy pracy nad wydajnością?
Poprawienie prędkości ładowania strony mobilnej w każdej organizacji wymaga odpowiedniego rozplanowania. Wystarczą jednak 4 kroki, aby osiągnąć założony cel.
1. Stwórzcie wspólną wizję optymalizacji
Wspólnie przygotujcie plik, gdzie zanotujecie dlaczego optymalizacja strony jest taka ważna dla Waszego biznesu. Rozpiszcie w nim biznesowe problemy, a nie techniczne zagadnienia, ponieważ za poprawą prędkości ma iść zwiększenie konwersji, a co za tym idzie także zysków. Najważniejsze jest przede wszystkim zrozumienie wpływu prędkości strony na biznes oraz ustalenie ram działania projektu, które zostaną przedstawione wszystkim pracownikom.
2. Ustawcie budżet zadaniowy
Budżet musi być realistyczny i skupiony na wymiernych oraz kluczowych celach biznesowych. Warto pamiętać o tym, aby był osiągalny i możliwy do realizacji – nie powinno się przeznaczać na cel optymalizacji budżetu przekraczającego możliwości firmy bądź graniczące z opłacalnością całego przedsięwzięcia.
3. Egzekwujcie budżet
Tworzenie nowych założeń, wykorzystywanie nowych technologii bądź innych, niezbędnych do optymalizacji narzędzi powinno zawierać się w budżecie. Tylko ciągła kontrola wydatków jest w stanie zapanować nad przewyższeniem planowanego budżetu. Należy również pamiętać, że projekt uważa się za zakończony dopiero w momencie, kiedy spełnione zostaną założone cele wydajności strony.
4. Często raportujcie wykonane prace
Regularne raporty progresu prac oraz pozostałych do wykonania zadań pozwalają na ocenę postępu projektu, a także oszacowanie czasu związanego z jego zakończeniem. Jednocześnie pozwala to sprawować kontrolę nad osobami odpowiedzialnymi za konkretne części optymalizacji, które powinny trzymać się wyznaczonego im czasu.
Weryfikacja skali problemu ładowania strony mobilnej
Dostępnych jest wiele narzędzi, które umożliwiają weryfikację prędkości ładowania strony mobilnej. Każdy o nieco innym stopniu zaawansowania, co pozwala dobrać rozwiązanie dopasowane do swoich umiejętności. W zależności od tego, jakie dane chce się uzyskać, można wykorzystać w tym celu różne narzędzia.
Dane na bazie obliczeń maszyny:
- Lighthouse – darmowe narzędzie, dostępne w przeglądarce. Generuje raport zarówno dla wersji mobilnej, jak i desktopowej. Zwraca dane o wydajności strony, przystępności dla użytkownika, optymalizację pod SEO oraz najlepsze praktyki pod optymalizację,
- Web Page Test – narzędzie zwracające informacje między innymi o Core Web Vitals, ale także o czasie ładowania każdego elementu składającego się na daną podstronę,
- PageSpeed Insight – narzędzie od Google oceniające w punktach prędkość ładowania witryny, ale również ukazujące wartości podstawowych wskaźników internetowych.
Dane na bazie doświadczeń użytkowników:
- Google Analytics – narzędzie analityczne od Google, które posiada wbudowaną funkcję odczytu ładowania każdej z podstron znajdującej się w obrębie witryny. Można to sprawdzić w zakładce Zachowanie -> Szybkość witryny -> Czas ładowania,
- Chrome UX Report – raport o wrażeniach użytkowników zawiera rzeczywiste dane dotyczące czasu ładowania po wyliczeniu średniej z różnych miejsc na świecie,
- PageSpeed Insight – często i w tym narzędziu, od razu pod wynikiem punktowym witryny, można znaleźć informacje o czasie ładowania doświadczonym przez użytkowników.
Każde z tych narzędzi warto wykorzystać podczas analizy chociażby ze względu na możliwość porównania wyników, ale również dlatego, by mieć szerszy pogląd na problem z mobilną wersją witryny. Warto pamiętać o tym, by wziąć pod uwagę nie tylko sam czas ładowania, ale i wartości Core Web Vitals.
Core Web Vitals – czym są i dlaczego mają tak duże znaczenie?
Pewien czas temu na naszym blogu pojawiła się pierwsza informacja o tym, czym są Core Web Vitals i jak o nie zadbać, by nie stracić wypracowanych dotychczas pozycji podczas najnowszej zmiany algorytmu. W związku z faktem, że jest ona już za nami można śmiało powiedzieć, że w indeksie powiało grozą. Można było zaobserwować wielką sinusoidę przez cały okres czerwca – liczne wzrosty i spadki widoczności oraz pozycji, które dopiero teraz się stabilizują. Jest to jedynie potwierdzenie zapowiedzi, że najnowszy algorytm wywoła wielkie zamieszanie i zmobilizuje właścicieli stron do dbania o prawidłowe wartości Core Web Vitals.
Na Core Web Vitals składają się 3 podstawowe czynniki:
- Largest Contentful Paint – dokonuje pomiaru wydajności ładowania,
- First Input Delay – dokonuje pomiaru interaktywności,
- Cumulative Layout Shift – odpowiada za pomiar stabilności wizualnej.
Każdy z nich ma ogromny wpływ na odbiór strony przez użytkowników, a w ostatnim czasie również na ocenę robotów, co tylko wzmocniło potrzebę optymalizacji. Google utworzyło więc specjalne wytyczne, które jasno określają, jaki powinien być czas ładowania każdego z trzech czołowych wskaźników.
Test Core Web Vitals
Podczas dokonywania analizy Core Web Vitals każde narzędzie bierze pod uwagę kilka elementów składowych. Należą do nich:
- przeglądarka (silnik oraz wersja przeglądarki),
- urządzenie (parametry sprzętu, rodzaj i wydajność urządzenia),
- lokalizacja (może wpłynąć na czas odpowiedzi serwera),
- metoda (sposób działania narzędzia pomiarowego),
- pomiar (mimo tego samego sprzętu oraz narzędzia poszczególne pomiary mogą się od siebie nieco różnić).
Weryfikacja wskaźników Core Web Vitals może być nieco skomplikowana, bowiem nie każdy test zwróci takie same wyniki. Zależne są one od wielu czynników, które mogą poprawić bądź pogorszyć ostateczny czas ładowania.
Testowe czynniki wariancji:
- sieć lokalna,
- sieć poziomu 1,
- serwer internetowy,
- sprzęt klienta,
- zasoby klienta,
- niedeterminizm przeglądarki,
- niedeterminizm strony.
Różnice między pomiarami nie powinny być bardzo widoczne. Zazwyczaj liczone są w ms, jednak zdarzają się także przypadki, gdzie czas ładowania wykracza poza normę. W takich sytuacjach, aby mieć pewność, że wskaźniki Core Web Vitals są za niskie, najlepiej dokonać pomiaru na kilku urządzeniach podłączonych do innej sieci. Jeśli będą one do siebie zbliżone oznacza to, że są wiarygodne i warto by było rozpocząć proces optymalizacji prędkości strony.
Co ważne, po dokonaniu pomiarów można również znaleźć wskazówki informujące o tym, jakie elementy na stronie należy poprawić, aby uzyskać lepszy wynik w kolejnym teście. Specjalnie dla Was przygotowaliśmy gotowe rozwiązania, przypisane do odpowiadającego im wskaźnika, żebyście mogli wyeliminować również pojedyncze problemy z ładowaniem, które obniżają wynik Waszej witryny.
Optymalizacja prędkości poprzez działania związane z Core Web Vitals
Odkąd podstawowe wskaźniki internetowe stały się częścią algorytmu Google coraz więcej mówi się o ich optymalizacji. Warto zadbać o to, aby każdy z poszczególnych elementów spełniał wyznaczone normy czasu ładowania, bowiem może to pozytywnie wpłynąć na ocenę strony przez roboty. Od czego więc zacząć?
LCP – najważniejsze informacje i sposób optymalizacji
LCP, czyli Largest Contentful Paint to czas ładowania największego elementu na stronie. Zgodnie z wytycznymi od Google nie powinien on przekraczać 2.5 s, czego nie spełnia znaczna część dzisiejszych stron, znajdujących się w sieci. Z czego to wynika? Ze zbyt niskiej wydajności serwera, zbyt dużych elementów wczytujących się na pierwszym ekranie oraz niezoptymalizowanych plików, które muszą załadować się jako pierwsze, aby strona była dostępna dla użytkowników. Można jednak to znacznie usprawnić, wykorzystując poniższe wskazówki optymalizacyjne.
Co należy zrobić, aby uzyskać niższy czas ładowania LCP?
- wdrożyć ładowanie lazy load (sprawdzić, czy nie wpłynie to na wygląd strony),
- zredukować zasoby blokujące renderowanie,
- ulepszyć renderowanie po stronie klienta,
- wykorzystywać “preload” dla najważniejszych elementów na stronie,
- skompresować pliki tekstowe,
- skorzystać z sieci dostarczania treści (CDN),
- wykorzystywać zasoby pamięci podręcznej,
- zoptymalizować działanie usług hostingowych.
To, które z danych rozwiązań pomoże uzyskać lepszy wynik czasu ładowania Waszej strony, najlepiej wskaże PageSpeed Insight, nakierowując na konkretne problemy związane z LCP.
FID – najważniejsze informacje i sposób optymalizacji
FID, czyli First Input Delay to czas szybkości reakcji na obciążenie, związane z interakcją użytkownika ze stroną. Zgodnie z wytycznymi nie powinien on przekraczać 100 ms, co nie jest bardzo trudne do osiągnięcia. Mało które strony posiadają problemy z tym wskaźnikiem CWV, jednak aby pomóc właścicielom witryn borykającym się ze zbyt wysokim czasem ładowania FID przygotowaliśmy kilka cennych wskazówek.
Co należy zrobić, aby uzyskać niższy czas ładowania FID?
- wykonać minifikację plików JS (sprawdzić, czy nie wpłynie to na wygląd strony),
- dzielić kod, aby zredukować liczbę ładowanego wstępnie JS’a,
- unikać ładowania danych po stronie klienta tam, gdzie to możliwe,
- generować statyczny content,
- wdrożyć ładowanie lazy load dla komponentów,
- użyć wzorca modułu, aby umożliwiać automatyczne wypełnianie tylko tam, gdzie jest to konieczne,
- upewnić się, że priorytet ładowania ma kod niezbędny do korzystania ze strony.
CLS – najważniejsze informacje i sposób optymalizacji
CLS, czyli Cumulative Layout Shift to czas upływający do uzyskania stabilności strony po załadowaniu. Jest to najczęstszy i najtrudniejszy problem do wyeliminowania przez twórców stron, wynikający głównie ze stosowania wielu dynamicznych elementów już na pierwszym ekranie. Zgodnie z wytycznymi CLS powinien ładować się nie dłużej niż 0,1 sekundy, co jest trudne do osiągnięcia – nie oznacza to jednak, że jest niemożliwe. Nie zawsze poprawa CLS musi wiązać się z przebudową strony, na dobry początek warto wdrożyć kilka prostszych rozwiązań i ponownie zweryfikować wynik Core Web Vitals, zanim podejmie się skomplikowane działania techniczne.
Co należy zrobić, aby uzyskać niższy czas ładowania CLS?
- przypisać konkretne wymiary wszystkim elementom na stronie,
- unikać wstawiania elementów dynamicznych nad stałą zawartością, bądź wykorzystywać szkieletowy interfejs użytkownika,
- jeśli to możliwe unikać dynamicznego ładowania contentu,
- unikać ładowania czcionek internetowych,
- wykorzystywać preload dla fontów,
- wykorzystać transformację pliku CSS.
Podsumowanie
Często wdrażanie zmian, związanych z usprawnieniem ładowania wersji mobilnej strony, może wiązać się z pracami technicznymi, wpływającymi na działanie witryny. Przed rozpoczęciem optymalizacji warto wykonać kopię zapasową i na bieżąco monitorować działanie i wygląd strony, by w razie pojawienia się problemu szybko go rozwiązać. Trzeba liczyć się także z faktem, że nie każde oprogramowanie pozwoli na wprowadzenie wszystkich z powyżej proponowanych rozwiązań. Wówczas warto przeanalizować co jest możliwe do wprowadzenia i po wykorzystaniu wszystkich dostępnych ulepszeń prędkości skorzystać z analizy UX, by zwiększyć konwersję w nieco inny sposób.
Sama dbałość o prędkość ładowania strony może okazać się niewystarczająca, jeśli całkowicie zaniedbany został UX. Dopiero kiedy czas ładowania strony mobilnej i jej UX idą w parze można mówić o wzroście poziomu konwersji do takiego, który byłby zadowalający dla właścicieli sklepów internetowych. W branży e-commerce urządzenia mobilne są niezwykle ważne, dlatego należy przykładać do nich coraz większą wagę.
Jeśli po tym wpisie nadal nie jesteście przekonani, czy warto inwestować w poprawę prędkości swojej strony mobilnej, to skorzystajcie z narzędzia, które pozwoli oszacować zwiększenie konwersji, jeśli tylko zdecydujecie się na optymalizację! Sprawdźcie TUTAJ!
(13 głosów, średnia: 4,92 / 5)
Loading...
