Wasz wybór

Powiązane artykuły

Optymalizacja mobilna dla sklepu online: co warto wiedzieć

Ponad połowa ruchu w polskich sklepach internetowych pochodzi dziś ze smartfonów. Mimo to wiele właścicielek i właścicieli sklepów odkrywa, że wskaźnik konwersji na urządzeniach mobilnych jest dwu-, a nawet trzykrotnie niższy niż na desktopie. To nie przypadek — i niemal zawsze wynika z zaniedbania konkretnych obszarów technicznych oraz projektowych. Optymalizacja mobilna dla sklepu to nie jednorazowe zadanie, lecz ciągły proces, który bezpośrednio przekłada się na widoczność w Google i przychody.

Dlaczego Google ocenia sklep najpierw przez pryzmat wersji mobilnej

Od 2019 roku Google stosuje mobile-first indexing jako domyślny tryb indeksowania stron. W praktyce oznacza to, że bot ocenia treść, strukturę i szybkość ładowania przede wszystkim na podstawie wersji mobilnej — desktop jest dopiero drugorzędny. Dla sklepów internetowych ma to konkretne konsekwencje.

Sklep, który na desktopie prezentuje pełne opisy produktów, a na mobile skraca je do dwóch zdań albo chowa za niedziałającym przyciskiem „czytaj więcej”, traci punkty za treść w oczach Google. Podobnie dzieje się z obrazami — jeśli plik graficzny wagi 3 MB jest serwowany bez kompresji na ekran o szerokości 390 pikseli, Googlebot odnotowuje to jako błąd i obniża ocenę Core Web Vitals.

Core Web Vitals a widoczność sklepu w wynikach wyszukiwania

Core Web Vitals to zestaw trzech metryk, które Google uwzględnia przy rankingu. Dla sklepów najistotniejsze są:

  • LCP (Largest Contentful Paint) — czas załadowania największego elementu widocznego w oknie przeglądarki; próg to 2,5 sekundy; typowy winowajca w sklepach to baner główny o dużej wadze
  • INP (Interaction to Next Paint) — czas reakcji strony na kliknięcie; zastąpił FID w 2024 roku; krytyczny przy filtrach kategorii i przyciskach „dodaj do koszyka”
  • CLS (Cumulative Layout Shift) — miara przesunięcia layoutu podczas ładowania; sklepy cierpią na to gdy czcionki, reklamy lub rekomendacje produktowe ładują się z opóźnieniem i „przesuwają” przyciski

Wynik „dobry” dla każdej metryki jest konieczny, żeby sklep w ogóle kwalifikował się do bonusu rankingowego z tytułu Page Experience. Narzędzie Google Search Console pokazuje te dane w sekcji „Wygoda stron” z podziałem na mobile i desktop — to pierwsze miejsce, które sprawdzamy przy każdym audycie.

Audyt mobilny sklepu: od czego zacząć i co sprawdzić

Systematyczny audyt pozwala oddzielić problemy krytyczne od tych, które można odłożyć na później. Dobrze przeprowadzony przegląd skupia się na czterech warstwach: technicznej, wizualnej, treściowej i zakupowej.

Warstwa techniczna — szybkość i ładowanie zasobów

Najważniejszym narzędziem jest PageSpeed Insights — generuje raport osobno dla mobile i desktop i wskazuje konkretne problemy z priorytetem. Najczęstsze błędy wykrywane w sklepach:

  • Brak formatu WebP lub AVIF dla obrazów produktowych (przejście z JPEG często redukuje wagę o 30-50%)
  • Brak lazy loadingu dla zdjęć poniżej linii widoczności
  • Blokujące renderowanie skrypty JavaScript ładowane w sekcji zamiast z atrybutem defer
  • Brak kompresji GZIP lub Brotli na serwerze
  • Nieużywane zasoby CSS z szablonu, które zwiększają czas parsowania

Każdy z tych punktów ma mierzalny wpływ na LCP. W projektach, przy których pracujemy, samo przejście na WebP i włączenie lazy loadingu skracało LCP o 0,8-1,4 sekundy na urządzeniach mobilnych.

Warstwa zakupowa — koszyk i checkout na telefonie

To obszar, który generuje największe straty. Formularz zamówienia zaprojektowany pod mysz i klawiaturę na ekranie 5,5 cala staje się pułapką. Typowe problemy:

  • Pola formularza zbyt małe do precyzyjnego tapowania — minimum 44×44 piksele to zalecenie Wytycznych WCAG
  • Brak atrybutów inputmode i autocomplete — użytkownik musi ręcznie przełączać klawiaturę numeryczną przy polu telefonu
  • Przyciski CTA zbyt blisko siebie — „wstecz” i „kup teraz” dotykane jednocześnie prowadzą do frustracji i porzucenia koszyka
  • Brak natywnych metod płatności (Apple Pay, Google Pay) wymuszający wpisywanie numeru karty na telefonie

Checkout jest miejscem, gdzie kilka sekund ładowania lub jeden niedziałający przycisk kosztuje realną sprzedaż.

Responsywność kontra wersja mobilna — który model wybrać

To pytanie pojawia się przy przebudowie lub wyborze platformy. Responsywny design (jeden kod HTML, CSS dopasowuje układ do szerokości ekranu) i oddzielna wersja mobilna (osobne URL-e, np. m.sklep.pl) to dwa różne podejścia z różnymi konsekwencjami dla SEO i utrzymania.

Oddzielna wersja mobilna wymaga osobnej implementacji canonicali i nagłówków Vary, poprawnej konfiguracji przekierowań oraz synchronizacji treści między dwoma wersjami. Błąd w którymkolwiek z tych miejsc może doprowadzić do duplikacji treści lub wykluczenia mobilnej wersji z indeksu. Dla większości sklepów to rozwiązanie generuje niepotrzebne ryzyko.

Responsywny design jest dziś standardem i preferowanym przez Google podejściem. Nie oznacza jednak, że sama responsywność wystarczy. Szablon „responsywny” może ładować obrazy w rozmiarze desktopowym na mobile, wyświetlać 5-kolumnową siatkę produktów jako jednorządkową karuzelę lub chować elementy przez display: none zamiast rezygnować z ich pobierania — co nie zmniejsza wagi strony.

Przy wyborze platformy e-commerce warto sprawdzić, jak domyślny motyw zachowuje się na wolnym połączeniu 3G w narzędziu Chrome DevTools. Symulacja wolnego łącza ujawnia kolejność ładowania elementów i momenty, w których użytkownik widzi „pustą” stronę. Sklepy oparte na Shopify, WooCommerce czy PrestaShop różnią się między sobą bazową wydajnością mobilną — i różnica potrafi sięgać 2-3 sekund LCP już na poziomie domyślnego motywu.

Optymalizacja treści i nawigacji pod zachowanie użytkownika mobilnego

Użytkownik mobilny przegląda sklep inaczej niż na desktopie. Scroll jest pionowy, uwaga rozproszna, sesja często przerywana. To wymaga przemyślenia architektury informacji.

Menu nawigacyjne to pierwsza pułapka. Hamburger menu skrywający 8 poziomów kategorii to ślepy zaułek — użytkownik nie wie, gdzie szuka. Sklepy, które testowały „mega menu” zastąpione szybkim dostępem do 4-6 głównych kategorii bezpośrednio na stronie głównej, notowały wzrost głębokości sesji mobilnych o 15-20%.

Wyszukiwarka wewnętrzna jest na mobile ważniejsza niż na desktopie. Użytkownik z telefonem chętniej wpisuje frazę niż klika przez 3 poziomy kategorii. Wyszukiwarka powinna być widoczna od razu, obsługiwać literówki i podpowiadać frazy w czasie rzeczywistym. Zbyt wolne odpowiedzi autocomplete (powyżej 300 ms) skutecznie zniechęcają do jej używania.

Opisy produktów na mobile wymagają skróconej wersji „lead” widocznej bez scrollowania, z opcją rozwinięcia. Nie chodzi o ukrycie treści przed Google — robot widzi pełny tekst — ale o priorytetyzację dla użytkownika. Specyfikacje techniczne, tabele rozmiarów i recenzje idealnie nadają się do zakładek lub sekcji z akordeonem, które nie wydłużają strony przy pierwszym ładowaniu.

Zdjęcia produktów powinny wspierać gesty pinch-to-zoom. Sklepy blokujące powiększanie na stronach produktowych tracą użytkowników, którzy chcą ocenić szczegóły materiału lub nadruku przed zakupem. Galeria z poziomym swipe’em jest standardem, który użytkownicy traktują jako oczywistość.

Mierzenie efektów i dalsze kroki po optymalizacji

Optymalizacja mobilna dla sklepu ma sens tylko wtedy, gdy mierzymy jej skutki. Cztery wskaźniki, które śledzimy jako priorytetowe:

  • Współczynnik konwersji na mobile (osobno dla nowych i powracających użytkowników)
  • Współczynnik porzuceń koszyka na urządzeniach mobilnych
  • Czas do interakcji (Time to Interactive) z PageSpeed Insights
  • Pozycje w organicznych wynikach wyszukiwania dla głównych fraz produktowych w wersji mobile SERP

Google Search Console pozwala filtrować dane po typie urządzenia — zarówno kliknięcia i wyświetlenia, jak i dane o Core Web Vitals. To tam najszybciej zobaczymy, czy zmiany przełożyły się na poprawę widoczności.

Audyt mobilny powinien być powtarzany co kwartał, a przy każdej większej zmianie szablonu, instalacji nowej wtyczki lub kampanii generującej skokowy ruch — natychmiast po jej wdrożeniu. Nowe wtyczki i integracje regularnie „psują” wyniki, które wcześniej były zadowalające, dorzucając kilkadziesiąt kilobajtów skryptów do każdego żądania.

Ostatecznie sklep, który wyrzuca ruch mobilny przez słabe doświadczenie, nie tylko traci sprzedaż tu i teraz — traci też pozycje organiczne, bo Google wyciąga wnioski z danych o zachowaniu użytkowników. Widoczność i konwersja na mobile to dziś dwa awers i rewers tej samej monety.

Łukasz Chlebowski
Łukasz Chlebowski
Head Of PPC Łukasz tworzy i optymalizuje kampanie reklamowe tak, żeby każda złotówka z budżetu pracowała na maksymalny zwrot. Dba o to, by marki były widoczne dokładnie tam, gdzie szukają ich potencjalni klienci.
Popularne