Porzucanie koszyków w mobilnym e-commerce sięga 85,65%, a na komputerach wskaźnik jest niższy. Spora część tej różnicy da się usunąć dobrymi decyzjami projektowymi. Ten artykuł wyjaśnia, co sprawia, że sklep jest naprawdę przyjazny dla urządzeń mobilnych, i jak do tego dojść strona po stronie.
Czym różni się sklep przyjazny mobilnie od zoptymalizowanego mobilnie?
Sklep przyjazny mobilnie nie rozsypuje się na małym ekranie. Tekst się zawija, obrazy się skalują, a przyciski da się nacisnąć. To minimalny standard. Google uznaje go za konieczny do indeksowania.
Sklep zoptymalizowany mobilnie jest zaprojektowany tak, by sprzedawać na telefonie. Układ, hierarchia informacji, wielkość elementów dotykowych, proces finalizacji zamówienia i szybkość strony są dopasowane do tego, jak ludzie robią zakupy na smartfonach. Sklep może być przyjazny mobilnie, a nie być zoptymalizowany. Wiele takich jest.
Ta różnica ma znaczenie, bo przyjazność mobilna wpuszcza Cię do gry. Optymalizacja mobilna przynosi przychód. Sklep, który nie psuje się na telefonie, ale ładuje się 8 sekund i ma formularz zamówienia zaprojektowany pod myszkę i klawiaturę, jest technicznie przyjazny mobilnie. Nie jest jednak zoptymalizowany. Każde usprawnienie ponad poziom "nie jest zepsute" poprawia Twój współczynnik konwersji.
Dlaczego indeksowanie mobile-first w Google zmienia wszystko
Google stosuje indeksowanie mobile-first, czyli ocenia Twój sklep na podstawie jego wersji mobilnej. Nie wersji na komputer. Jeśli wersja mobilna ma uboższe treści, mniej linków wewnętrznych albo obrazy, które się nie ładują, obraz Twojego sklepu w Google opiera się na tych brakach.
Ma to bezpośredni wpływ na pozycje w wyszukiwarce. Sklep, który na komputerze wygląda kompletnie, a na telefonie jest odchudzony, będzie oceniany według tego, co pokazuje wersja mobilna. Jeśli opisy produktów są na telefonie skrócone, Google zaindeksuje skróconą wersję. Jeśli linki nawigacji są ukryte w zwiniętym menu, Google może je gorzej przeszukiwać.
W praktyce oznacza to, że wydajność mobilna to nie tylko kwestia wygody użytkowników. To także kwestia SEO. Poprawa wersji mobilnej poprawia pozycje w wyszukiwarce. Każda poprawka robi podwójną robotę.
Core Web Vitals i ich wpływ na pozycje
Core Web Vitals to zestaw wskaźników wydajności, których Google używa jako sygnałów rankingowych. Largest Contentful Paint mierzy, jak długo ładuje się główna treść strony. Interaction to Next Paint mierzy, jak szybko strona reaguje na działania użytkownika. Cumulative Layout Shift mierzy, jak bardzo układ strony przesuwa się niespodziewanie podczas ładowania.
Wszystkie trzy mają znaczenie na telefonach, gdzie prędkość sieci i moc obliczeniowa są niższe niż na komputerze. Wynik akceptowalny w przeglądarce na komputerze może okazać się słaby na średniej klasy telefonie z połączeniem 4G. A z takich telefonów korzysta spora część Twojego ruchu.
Słabe wyniki Core Web Vitals niezależnie od siebie obniżają pozycje i konwersję. Według badań każda dodatkowa sekunda ładowania strony mobilnej obniża współczynnik konwersji o 4,42%. Strona ładująca się 5 sekund zamiast 2 może stracić połowę potencjalnych konwersji, zanim ktokolwiek zobaczy Twoje produkty.
Projekt mobilny według typu strony
Każdy typ strony w sklepie ma na telefonie inne priorytety. Traktowanie wszystkich tak samo oznacza, że żadna nie jest dobrze zoptymalizowana.
Strona główna
Na telefonie strona główna musi w pierwszym ekranie przekazać, co sprzedaje sklep i dokąd przejść. Strony główne na komputery często mają szerokie sekcje hero z wieloma elementami. Na telefonie taka sekcja zajmuje cały ekran. Jeśli od razu nie pokazuje wartości i nie zachęca do działania, odwiedzający przewija stronę albo wychodzi.
Utrzymaj główną nawigację w zasięgu kilku dotknięć. Menu hamburgerowe to standard, ale pozycje w nim powinny ograniczać się do kategorii, których naprawdę potrzebuje osoba odwiedzająca sklep pierwszy raz. Ukryta nawigacja na telefonie jest niewidoczna.
Strony kategorii
Strony kategorii na telefonie muszą równoważyć liczbę produktów z wygodą korzystania. Siatki dwukolumnowe sprawdzają się przy większości produktów. Listy jednokolumnowe są lepsze tam, gdzie liczy się szczegół zdjęcia. Obie opcje są lepsze niż siatki trzykolumnowe, w których zdjęcia produktów są zbyt małe, by cokolwiek na nich zobaczyć.
Filtry i sortowanie są na stronach kategorii kluczowe, a na telefonie trudne. Panel filtrów otwierany jako nakładka na cały ekran, zamiast paska bocznego, sprawia, że filtrowanie jest wygodne na małym ekranie. Więcej o strukturze takich stron znajdziesz w przewodniku czym jest strona kategorii i jak ją zaprojektować.
Strony produktów
Strona produktu na telefonie musi szybko odpowiedzieć na trzy pytania. Co to jest? Ile kosztuje? Czy łatwo to kupić? Główne zdjęcie powinno ładować się od razu i dać się przesuwać palcem. Cena, wybór wariantu i przycisk dodawania do koszyka powinny być widoczne bez przewijania.
Umieść przycisk dodawania do koszyka na górze ekranu albo przynajmniej użyj przycisku przyklejonego, który podąża za użytkownikiem podczas przewijania opisu. Osoba, która musi wracać na górę, żeby dodać coś do koszyka, ma dodatkową okazję, żeby się rozmyślić.
Finalizowanie zamówienia
To tutaj porzucanie koszyków na telefonach jest największe. Im mniej kroków i pól, tym lepiej. Zakupy bez zakładania konta usuwają barierę, przez którą wiele osób na telefonie rezygnuje. Szczegółowe wskazówki znajdziesz w przewodniku jak zaprojektować stronę finalizacji zamówienia, która ogranicza porzucanie.
Strefy kciuka i ergonomiczny projekt
Ludzie obsługują telefony kciukami, a kciuk wygodnie sięga tylko do niektórych obszarów ekranu. Najłatwiej dosięgnąć dolnego środka ekranu. Najtrudniej górnych rogów. To nie drobiazg. To ergonomiczny fakt, który bezpośrednio wpływa na to, czy klienci użyją kluczowych elementów Twojego sklepu.
Najważniejsze przyciski, takie jak dodaj do koszyka, przejdź do kasy i zastosuj filtr, umieść w dolnym środku, gdzie kciuk naturalnie spoczywa. Paski nawigacji na dole ekranu są na dużych telefonach dostępniejsze niż paski na górze. Górny pasek to konwencja z komputerów, która słabo sprawdza się przy obsłudze jedną ręką.
Małe elementy dotykowe to częsty problem z użytecznością mobilną. Przyciski i linki łatwe do kliknięcia kursorem myszy trudno dokładnie nacisnąć opuszką palca. Google zaleca elementy dotykowe o rozmiarze co najmniej 48 na 48 pikseli, z odpowiednim odstępem od sąsiednich. Zbyt małe elementy prowadzą do pomyłek, irytacji i wyjść ze strony.
Finalizowanie zamówienia na telefonie i optymalizacja formularzy
Formularze to jedno z największych źródeł tarcia podczas zakupów na telefonie. Formularz zaprojektowany pod klawiaturę i myszkę jest wolny i podatny na błędy, gdy wypełnia się go na ekranie dotykowym z wtrącającą się autokorektą. Kilka konkretnych zmian wyraźnie ułatwia jego wypełnienie na telefonie.
Używaj właściwych typów klawiatury
Typy pól HTML mówią przeglądarce mobilnej, jaką klawiaturę pokazać. Pole e-mail z typem email wyświetla klawiaturę z wyeksponowanym znakiem @. Pole telefonu z typem tel pokazuje klawiaturę numeryczną. Pole z domyślnym typem tekstowym pokazuje pełną klawiaturę do wszystkiego, także do numerów telefonu i kodów pocztowych.
Zły typ pola dodaje niepotrzebne tarcie. Klient musi ręcznie przełączać klawiaturę albo pisać na niewłaściwym układzie. Naprawa to zmiana jednego atrybutu w każdym polu. To jedno z usprawnień o najwyższym zwrocie z wysiłku w mobilnym finalizowaniu zamówienia.
Ogranicz liczbę pól
Każde pole w formularzu zamówienia to na telefonie punkt tarcia. Przejrzyj formularz i usuń każde pole, które nie jest niezbędne do sfinalizowania transakcji. Osobne pola na imię i nazwisko zwykle można połączyć. Pola z tytułem rzadko są potrzebne. Kilka linii adresu często można zastąpić jedną wyszukiwarką adresu.
Jeśli potrzebujesz dodatkowych informacji do celów marketingowych lub analitycznych, zbieraj je po zakupie, a nie podczas finalizowania zamówienia. Ankieta po zakupie da te same dane bez ryzyka porzucenia koszyka.
Obsłuż autouzupełnianie
Nowoczesne przeglądarki mobilne i menedżery haseł potrafią automatycznie uzupełnić pola zamówienia, jeśli formularz jest dobrze zbudowany. Atrybut autocomplete w każdym polu mówi przeglądarce, jakiego typu są to dane. Pole z właściwą wartością autocomplete zostanie uzupełnione automatycznie, jeśli klient zapisał swoje dane. Autouzupełnianie może wyraźnie skrócić czas składania zamówienia na telefonie, a to realnie wpływa na to, czy klient dokończy zakup.
Oferuj mobilne metody płatności
Mobilne metody płatności, takie jak portfele cyfrowe, pozwalają sfinalizować zakup za pomocą uwierzytelnienia biometrycznego zamiast ręcznego wpisywania danych karty. Dla osoby z telefonem w ręku brak konieczności wpisywania 16-cyfrowego numeru karty, daty ważności i kodu bezpieczeństwa to realna oszczędność wysiłku. Sklepy oferujące te metody obok zwykłych płatności kartą mają wyższą konwersję mobilną, bo znika tarcie w najbardziej wrażliwym kroku.
Szybkość strony na telefonie
Szybkość strony wpływa na sklepy mobilne mocniej niż na te na komputerach, bo połączenia mobilne są wolniejsze, a procesory słabsze. Strona, która ładuje się 2 sekundy na łączu stacjonarnym, może potrzebować 6 sekund na mobilnej transmisji danych. Badania pokazują, że 53% odwiedzających na telefonach oczekuje załadowania strony w mniej niż 3 sekundy. Ci, którzy tego nie dostaną, wychodzą.
Kompresuj obrazy
Obrazy to największy pojedynczy składnik czasu ładowania strony mobilnej. Każde zdjęcie produktu, baner i fotografia lifestyle powinny być skompresowane, zanim trafią do przeglądarki. Nowoczesne formaty obrazów dają znacznie mniejsze pliki niż starsze przy tej samej jakości wizualnej.
Leniwe ładowanie (lazy loading) odkłada wczytywanie obrazów poniżej widocznej części ekranu do chwili, gdy klient zbliży się do nich podczas przewijania. Widoczna część strony ładuje się od razu. Reszta wczytuje się dopiero wtedy, gdy jest potrzebna. Ta technika poprawia odczuwalną szybkość nawet wtedy, gdy łączny rozmiar strony się nie zmienia.
Ogranicz skrypty
Skrypty zewnętrzne, takie jak narzędzia analityczne, widgety czatu, piksele marketingowe i narzędzia do opinii, wydłużają ładowanie każdej strony. Każdy skrypt trzeba pobrać, przetworzyć i wykonać. Na telefonie trwa to dłużej niż na komputerze. Przejrzyj skrypty działające w sklepie i usuń te, które nie wnoszą realnego wkładu w przychód ani w doświadczenie klienta.
Skrypty, które są niezbędne, często można ładować asynchronicznie, czyli po głównej treści strony, a nie przed nią. Dzięki temu strona jest używalna, zanim skrypty skończą się ładować, co poprawia wyniki Core Web Vitals i komfort klienta.
Testuj na prawdziwych urządzeniach
Narzędzia deweloperskie w przeglądarce zawierają symulator mobilny, który pozwala zobaczyć sklep tak, jakby oglądało się go na telefonie. Symulator przydaje się do sprawdzenia układu, ale nie odtwarza dokładnie wydajności prawdziwego urządzenia w prawdziwej sieci. Średniej klasy telefon z łączem 4G zachowa się inaczej, niż pokazuje symulator na szybkim komputerze.
Testuj regularnie na prawdziwych urządzeniach. Problemy niewidoczne w symulatorze, takie jak opóźnienia zdarzeń dotyku, kłopoty z renderowaniem czcionek i niektóre błędy układu, od razu widać na prawdziwych urządzeniach. Jeśli nie masz dostępu do różnych modeli, w sieci są darmowe narzędzia, które pokazują Twój sklep na prawdziwym sprzęcie w prawdziwych sieciach.
SEO mobilne poza szybkością
Szybkość i Core Web Vitals to najczęściej omawiane aspekty SEO mobilnego, ale na pozycje sklepu w wynikach mobilnych wpływa też kilka innych czynników.
Unikaj wyskakujących okien zasłaniających główną treść na telefonie. Pop-upy i nakładki blokujące stronę zaraz po załadowaniu są karane przez mobilny algorytm wyszukiwania Google. Jeśli używasz pop-upu do zbierania adresów e-mail albo banera zgody na pliki cookie, nie powinien on zasłaniać głównej treści, zanim odwiedzający zdąży zobaczyć stronę.
Upewnij się, że cała treść widoczna w wersji na komputer jest dostępna także na telefonie. Jeśli treść jest ukryta za przełącznikiem "czytaj więcej", Google może zaindeksować zwiniętą wersję zamiast pełnego tekstu. W opisach produktów i treściach kategorii, które wpływają na pozycje, pełny tekst powinien być dostępny na telefonie bez dodatkowych dotknięć.
Linkowanie wewnętrzne powinno być spójne na komputerze i na telefonie. Jeśli wersja na komputer ma widoczną sekcję powiązanych produktów z linkami do innych kategorii, wersja mobilna też powinna je zawierać. Linki nawigacyjne, z których Google rozpoznaje strukturę sklepu, nie powinny znikać na telefonie.
Jak WEMASY radzi sobie z urządzeniami mobilnymi
System e-commerce WEMASY domyślnie tworzy responsywne strony sklepu, które dopasowują się do każdego rozmiaru ekranu. Strony produktów, kategorii i finalizowania zamówienia są zaprojektowane zgodnie z wymaganiami indeksowania mobile-first w Google. Proces zamówienia obsługuje mobilne metody płatności i poprawnie typowane pola formularzy. Wydajność Core Web Vitals jest wbudowana w hosting i infrastrukturę dostarczania treści, więc nie wymaga ręcznej optymalizacji. Co zawiera każdy pakiet, sprawdzisz na stronie z cennikiem.
Najczęstsze pytania
Jak sprawdzić, czy mój sklep jest przyjazny mobilnie?
Google Search Console zawiera raport Użyteczność na urządzeniach mobilnych, który wskazuje konkretne problemy na stronach, takie jak zbyt mały tekst, elementy do kliknięcia leżące zbyt blisko siebie albo treść szersza niż ekran. PageSpeed Insights podaje wyniki Core Web Vitals osobno dla telefonów i komputerów. Oba narzędzia są darmowe i dają konkretne, praktyczne wyniki zamiast ogólnego zaliczył lub nie. W kreatorze stron WEMASY możesz skonfigurować to bezpośrednio w swoim sklepie.
Czy projekt mobilny wpływa na moje pozycje w Google?
Tak, bezpośrednio. Google stosuje indeksowanie mobile-first, więc sklep jest oceniany na podstawie wersji mobilnej. Wyniki Core Web Vitals, na które wpływają czynniki mobilne, takie jak szybkość ładowania i stabilność układu, to potwierdzony sygnał rankingowy. Sklep, który dobrze działa na telefonach, ma przewagę w rankingu nad tym, który działa gorzej, nawet jeśli wersje na komputer są równorzędne.
Jaki jest najczęstszy problem z mobilnym finalizowaniem zamówienia?
Najczęstszym problemem są formularze. Formularze zaprojektowane pod myszkę i klawiaturę wymagają zbyt dużo wysiłku na ekranie dotykowym. Najskuteczniejsze poprawki to: właściwe typy pól, żeby pojawiała się odpowiednia klawiatura, mniej pól, włączone autouzupełnianie i mobilne metody płatności, które eliminują ręczne wpisywanie danych karty. Poprawienie tych czterech rzeczy zwykle daje mierzalną poprawę odsetka sfinalizowanych zamówień na telefonach.
Jak szybkość strony mobilnej wpływa na sprzedaż?
Zależność jest bezpośrednia i dobrze udokumentowana. Badania pokazują spadek konwersji o około 4% na każdą dodatkową sekundę ładowania. Sklep ładujący się w 1 sekundę konwertuje wyraźnie lepiej niż ten sam sklep ładujący się 4 sekundy. W sklepach mobilnych, gdzie warunki sieci bywają różne, a odwiedzający szybciej rezygnują z wolnych stron, poprawa szybkości często daje najszybszy zwrot spośród wszystkich inwestycji technicznych.
Czy lepiej zbudować osobny sklep mobilny, czy użyć projektu responsywnego?
Projekt responsywny, w którym jeden sklep dopasowuje układ do rozmiaru ekranu, to standard i rozwiązanie zalecane przez Google. Osobne wersje mobilne zwiększają nakład pracy, mogą powodować niespójności w indeksowaniu i trudniej je synchronizować przy aktualizacji produktów i treści. Jeśli nie ma konkretnego powodu operacyjnego, by prowadzić osobne doświadczenie mobilne, właściwym wyborem jest projekt responsywny pod jednym adresem URL.
Jak ograniczyć porzucanie koszyków na telefonach?
Na porzucanie koszyków na telefonach wpływają tarcie i rozproszenie uwagi. Najskuteczniejsze działania to: uproszczone finalizowanie zamówienia z jak najmniejszą liczbą kroków i pól, zakupy bez konta, mobilne metody płatności eliminujące ręczne wpisywanie karty i szybko ładująca się strona zamówienia. Skuteczne jest też przypominanie e-mailem o porzuconym koszyku, by odzyskać sesje, w których klient nie dokończył zakupu podczas jednej wizyty.