Otwórz teraz swoją stronę produktu na telefonie. Nie na laptopie. Na prawdziwym telefonie, który trzymasz w dłoni i przewijasz kciukiem.
Co widzisz?
Jeśli tekst jest mały, przycisk trudno stuknąć albo strona ładuje się dłużej niż trzy sekundy, tracisz znaczącą część potencjalnych kupujących, zanim w ogóle przeczytają opis produktu.
Około 70% ruchu e-commerce pochodzi dziś z urządzeń mobilnych. Współczynnik konwersji na mobile, na większości stron małych sprzedawców, wynosi mniej więcej połowę tego z desktopu. Ta luka istnieje nie dlatego, że kupujący na telefonie chcą mniej. Istnieje dlatego, że większość stron produktu projektuje się na komputerze i nigdy porządnie nie testuje na telefonie.
Dlaczego kupujący na mobile zachowują się inaczej
Przeglądanie na komputerze jest spokojniejsze. Ktoś siedzący przy biurku jest w innym stanie niż ktoś na telefonie w drodze, w kolejce albo półgębkiem oglądający coś w tle.
Kupujący na telefonie decydują szybciej. Szybciej przewijają. Szybciej wychodzą. Jeśli coś wydaje się nie tak w pierwszych sekundach, zamykają kartę. Nie powiększają tekstu, żeby go przeczytać. Nie przewijają poziomo, żeby zobaczyć przycisk, który został ucięty. Po prostu znikają.
Konkretne zachowania, które się różnią:
- Czyta wolniej
- Używa myszy, klika precyzyjnie
- Częściej porównuje kilka kart
- Ma większą tolerancję na wolniejsze ładowanie
- Spędza średnio więcej czasu na stronie
- Skanuje, a nie czyta
- Stuka kciukiem, potrzebuje dużych pól dotyku
- Działa w jednej karcie i decyduje od razu
- Wychodzi w 3 sekundy, jeśli strona jest wolna
- Ma krótszą sesję i potrzebuje szybszego haczyka
W praktyce oznacza to jedno: Twoja strona mobilna potrzebuje szybszego haczyka, większych pól dotyku i czasu ładowania poniżej trzech sekund. To nie są dodatki.
Zasada 3 sekund
53% odwiedzających na mobile porzuca stronę, która ładuje się dłużej niż 3 sekundy. Te dane pochodzą z badań Google i od lat pozostają spójne.
Trzy sekundy w realnym życiu wydają się krótkie. Na telefonie to wieczność.
Co najczęściej spowalnia strony:
- Duże, nieskompresowane obrazy, najczęstszy powód
- Zbyt wiele skryptów śledzących ładujących się przed treścią
- Fonty ładowane z zewnętrznych źródeł bez fallbacku
- Wideo ustawione na autoplay
Najczęściej winne są obrazy. Zdjęcie produktu wyeksportowane w pełnej rozdzielczości z aparatu ma często 4-8 MB. Poprawnie skompresowana wersja do webu to 150-300 KB. Taka sama jakość wizualna na ekranie telefonu. Zupełnie inny czas ładowania.
Viktor prowadził stronę sprzedającą personalizowane naklejki. Ruch mobilny stanowił 74% wszystkich odwiedzin. Konwersja na mobile: 1,1%. Na desktopie: 3,8%. Przepuścił stronę przez Google PageSpeed Insights i odkrył trzy obrazy ładujące się po ponad 3 MB każdy. Skompresował je. Czas ładowania na mobile spadł z 6,2 sekundy do 2,4 sekundy. Współczynnik konwersji na mobile wzrósł do 3,1% w ciągu kolejnych trzech tygodni.
Matematyka jest prosta: jeśli Viktor miał 500 mobilnych odwiedzających miesięcznie i konwertuje 3,1% zamiast 1,1%, to daje 10 dodatkowych sprzedaży miesięcznie po jednej godzinie pracy.
Co naprawdę psuje się na mobile
Poza samą szybkością są konkretne problemy układu, które pojawiają się prawie wyłącznie na telefonie i których większość sprzedawców nie wyłapuje, bo testuje wszystko na laptopie.
Tekst zbyt mały, żeby czytać bez powiększania
Rozmiar tekstu poniżej 16 px na mobile wymaga powiększania. Większość ludzi tego nie zrobi. Po prostu wyjdzie. Tekst główny powinien mieć co najmniej 16 px. Śródtytuły powinny być wyraźnie większe. Jeśli nie masz pewności, trzymaj telefon na zwykłą odległość i przeczytaj akapit. Jeśli mrużysz oczy, tekst jest za mały.
Przyciski zbyt małe, żeby wygodnie je stuknąć
Apple w swoich wytycznych rekomenduje minimalny obszar dotyku 44×44 punkty. Google rekomenduje 48×48 dp. W praktyce: przycisk „Kup teraz” powinien być na tyle duży, żeby dało się go stuknąć kciukiem bez celowania. Jeśli leży blisko innych linków albo tekstu, odstępy wokół niego też mają znaczenie. Pomyłkowe kliknięcia frustrują. Kupujący nie dają drugiej szansy.
Poziome przewijanie
Jeśli jakikolwiek element na stronie jest szerszy niż ekran, przeglądarka mobilna włącza poziome przewijanie. Kupujący prawie nigdy nie przewijają strony produktu w bok. To, co jest ucięte, po prostu dla nich nie istnieje. Najczęściej powodują to tabele, szerokie obrazy i bloki kodu.
Tarcie w checkoutcie na mobile
Pisanie na klawiaturze telefonu jest wolniejsze i bardziej podatne na błędy niż na komputerze. Każde dodatkowe pole w checkoutcie to punkt, w którym kupujący może zrezygnować. Im mniej pytasz, tym lepiej. Jeśli przy produkcie cyfrowym każesz wpisywać pełny adres, będziesz tracić ludzi.
Jak przetestować stronę mobilną w 10 minut
Nie potrzebujesz narzędzi ani developera, żeby zrobić podstawowy audyt mobile. Oto praktyczny proces:
- Otwórz stronę na prawdziwym telefonie, nie w przeskalowanym oknie przeglądarki.
- Ustaw stoper. Ile czasu zajmuje pełne załadowanie?
- Przeczytaj pierwszy akapit, trzymając telefon w normalnej odległości. Czy jest wygodnie?
- Spróbuj stuknąć przycisk zakupu kciukiem. Trafiasz za pierwszym razem?
- Przewiń całą stronę. Czy coś jest ucięte albo wymaga przewijania poziomego?
- Wejdź na pagespeed.web.dev i wklej swój URL. Sprawdź wynik mobilny.
- Zajrzyj do sekcji „Opportunities” w raporcie PageSpeed. Kompresja obrazów prawie zawsze jest na szczycie listy.
To wszystko. Jeśli po takim przejściu wszystko wygląda dobrze, Twoje doświadczenie mobilne jest prawdopodobnie solidne. Jeśli znajdziesz problemy, sama kompresja obrazów jest warta zrobienia od razu.
Co audyt mobile wykrył u trzech sprzedawców
Konwersja na mobile 2,1%, na desktopie 5,4%. Audyt wykazał zdjęcia produktów o średniej wadze 4,8 MB i przycisk zakupu o wysokości 32 px z paddingiem 8 px. Po poprawie obrazów i powiększeniu przycisku konwersja mobilna wzrosła do 4,9% w ciągu czterech tygodni.
Ruch mobilny stanowił 81% całości, ale tylko 28% przychodu. Audyt wykazał, że formularz checkoutu wymagał kodu pocztowego, mimo że produkt był cyfrowy. Usunięto to pole. Konwersja na mobile wzrosła z 1,8% do 3,3% w dwa tygodnie.
Mobilny wynik PageSpeed: 34 na 100. Na stronie były trzy klipy wideo z autoplay. Po usunięciu wideo i zastąpieniu ich statycznymi obrazami czas ładowania skrócił się o 4,1 sekundy. Współczynnik odrzuceń na mobile spadł o 40%.
Strony NanoCart a mobile
Jeśli korzystasz z platformy, która nie była budowana z priorytetem dla mobile, te problemy są strukturalne i trudniej je naprawić bez pomocy developera.
Strony produktu NanoCart są responsywne mobilnie domyślnie. Układ, rozmiary fontów, wielkość przycisków i przepływ checkoutu są zbudowane pod nawigację kciukiem. Jeśli chcesz zobaczyć, dlaczego skupiona strona jednego produktu działa lepiej niż pełny sklep, mobile jest dużą częścią odpowiedzi: mniej elementów, szybsze ładowanie, czystsze pola dotyku.
Jedna rzecz pozostaje pod Twoją kontrolą niezależnie od platformy: rozmiar obrazów. Kompresuj zdjęcia produktu przed wrzuceniem. Narzędzia takie jak Squoosh, darmowe i działające w przeglądarce, potrafią zmniejszyć zdjęcie 4 MB do 200 KB w około 30 sekund. Ten jeden nawyk daje więcej niż większość innych optymalizacji razem.
Mobile nie jest kanałem pobocznym. Dla większości małych sprzedawców to dziś kanał główny. Twoi kupujący są na telefonach. Buduj pod to.