# Optymalizacja e-commerce na mobile: Core Web Vitals, kasa i konkretne poprawki, które ruszają konwersję > 70-85% ruchu w e-commerce to mobile. Dziesięć konkretnych obszarów (Web Vitals, cele dotyku, autouzupełnianie formularzy, Apple Pay, strefy kciuka), które zamykają lukę w konwersji między mobile a desktopem, z prawdziwymi narzędziami i wskaźnikami. Ryan Badger - 1 maja 2025 - 8 min czytania ## Dlaczego mobile to cała gra 70-80% ruchu w Twoim e-commerce to mobile. W większości kategorii konsumenckich dochodzi do 85%. Konwersja na desktopie jest zwykle 2-3 razy wyższa niż na mobile, co mówi mniej o tym, że desktop jest lepszy, a więcej o tym, że mobile w większości sklepów jest zepsuty. Dobrze zoptymalizowane doświadczenie mobilne może zamknąć tę lukę, a często ją odwraca: niektóre marki DTC konwertują dziś na mobile na poziomie desktopu lub wyżej. Różnica jest konkretna, mierzalna i dotyczy głównie higieny, a nie innowacji. Ten wpis omawia, co naprawdę rusza konwersję mobilną, z wskaźnikami, narzędziami i konkretnymi rzeczami do poprawy. Nie "projektuj z myślą o mobile first". Konkretne kontrole, które dają skumulowany wzrost. ## 1. Core Web Vitals i dlaczego Google je obserwuje Google używa Core Web Vitals jako sygnału rankingowego i wskaźnika jakości doświadczenia. Poza kątem SEO, same metryki są silnymi predyktorami konwersji. ### LCP (Largest Contentful Paint) Czas do wyrenderowania największego elementu widocznego bez przewijania (zwykle obrazu głównego lub H1). Cel: poniżej 2,5 sekundy na mobilnym 4G. Najczęstsze przyczyny złego LCP: - Obraz główny nieskompresowany lub za duży - Ładowanie czcionek webowych blokuje renderowanie - Wstrzykiwanie skryptów zewnętrznych (widżety czatu, analityka, narzędzia testów A/B) w `` ### INP (Interaction to Next Paint) Czas od interakcji użytkownika (dotknięcia) do następnej aktualizacji wizualnej. Cel: poniżej 200 ms. Najczęstsze przyczyny złego INP: - Strony mocno oparte na JavaScript (sklepy w React/Vue bez dzielenia kodu) - Skrypty analityczne lub czatu odpalane synchronicznie przy interakcji - Opóźnienie dotyku w starszych przeglądarkach mobilnych ### CLS (Cumulative Layout Shift) Elementy skaczące po stronie podczas ładowania. Cel: poniżej 0,1. Najczęstsze przyczyny: - Obrazy bez atrybutów width/height - Reklamy lub zewnętrzne osadzenia ładujące się po treści - Czcionki, które się ładują i zmieniają rozmiar tekstu ### Jak sprawdzić Za darmo: [PageSpeed Insights](https://pagespeed.web.dev/) uruchamia Lighthouse i raportuje wszystkie trzy. Testuj swoją najlepiej zarabiającą stronę produktu, nie stronę główną. Napraw to, co czerwone, zaakceptuj bursztynowe, idź dalej. Płatnie / głębiej: WebPageTest.org do analizy wodospadu, zakładka Performance w Chrome DevTools do lokalnego profilowania. ## 2. Szybkość mobile poniżej 3 sekund (prawdziwy mobile, nie desktop z throttlingiem) "Emulator mobile" w przeglądarce desktopowej używa szybkiego łącza i szybkiego procesora. Prawdziwe telefony mają wolniejsze łącza i wolniejsze procesory. Różnica jest znacząca. Testuj na prawdziwych telefonach w 4G. Jeśli Twoja strona ładuje się 2 sekundy w emulatorze mobilnym Chrome, to na średniej półki Androidzie w 4G prawdopodobnie 4-5 sekund. ### Największe zyski szybkości (w kolejności) 1. **Optymalizacja obrazów:** kompresja do 80% jakości, zmiana rozmiaru na faktycznie potrzebne wymiary, serwowanie WebP lub AVIF. Shoprocket robi to automatycznie przez Cloudflare 2. **Leniwe ładowanie treści poniżej linii zgięcia.** Obrazy, iframe'y, ciężkie skrypty nie powinny ładować się, dopóki użytkownik tam nie przewinie 3. **Odraczaj niekrytyczny JavaScript.** Analityka, widżety czatu, narzędzia testów A/B nie powinny blokować renderowania 4. **Agresywnie cache'uj zasoby statyczne.** Roczny cache dla obrazów, czcionek, CSS, JS z URL-ami z odciskiem 5. **Używaj CDN** (Cloudflare, Fastly albo wbudowany w platformę). Serwuje zasoby z geograficznie bliskich węzłów 6. **Ogranicz skrypty zewnętrzne.** Każdy piksel i tag dodaje ok. 50-200 ms; sprawdź, co naprawdę jest potrzebne ## 3. Rozmiar celów dotyku Wytyczne Apple Human Interface Guidelines określają minimalne cele dotyku na 44×44 pikseli. Google Material określa 48×48. Większość "mobilnych" wersji motywów nie spełnia żadnego z nich. **Poprawki:** - Przyciski co najmniej 44 px wysokości z 8-12 px wypełnienia w środku - Linki w nawigacji co najmniej 44 px wysokości - Pola formularzy co najmniej 44 px wysokości (pomaga też w dostępności) - Odstęp między sąsiednimi celami dotyku co najmniej 8 px Test: otwórz swój sklep na telefonie. Spróbuj trafić kciukiem w nawigację po kategoriach. Czy się mylisz? To problem celów dotyku. ## 4. Specyfika kasy mobilnej Koszyk i kasa na mobile to miejsca, gdzie wycieka najwięcej konwersji. Konkretna lista zadań: ### Formularze jednokolumnowe Formularze dwukolumnowe działają na desktopie, zawodzą na mobile. Ułóż każde pole pionowo. Bez wyjątków. ### Odpowiednie typy pól - Pole e-mail: `type="email"` (wywołuje klawiaturę e-mail ze znakiem @) - Telefon: `type="tel"` (klawiatura numeryczna) - Kod pocztowy: `type="text" inputmode="numeric"` dla krajów z numerycznymi kodami pocztowymi - Numer karty kredytowej: `type="text" inputmode="numeric" autocomplete="cc-number"` (sprawia, że autouzupełnianie działa) Większość platform robi to dobrze natywnie. Warto sprawdzić formularz na telefonie; jeśli wyskakuje zła klawiatura, popraw to. ### Przyjazność dla autouzupełniania Przeglądarki mogą automatycznie wypełnić imię, adres, e-mail, telefon i dane karty, jeśli atrybuty `autocomplete` formularza są poprawne. Klient, który dotknie podpowiedzi autouzupełniania, kończy zakup w 3 sekundy. Bez autouzupełniania ręcznie wpisuje ponad 12 pól. Standardowe wartości autocomplete: `name`, `email`, `tel`, `street-address`, `postal-code`, `country`, `cc-number`, `cc-exp`, `cc-csc`, `cc-name`. ### Przyklejony Dodaj do koszyka na stronach produktów Przewiń mobilną stronę produktu o 3 ekrany i przycisk Dodaj do koszyka jest poza ekranem. Poprawka: dodaj przyklejony dolny pasek z ceną i przyciskiem Dodaj do koszyka, który pojawia się, gdy oryginalny przycisk znika z widoku. ### Apple Pay + Google Pay + Link To największe pojedyncze zyski w kasie mobilnej. Płatność jednym dotknięciem bez pisania; natywne uwierzytelnianie biometryczne. - **Apple Pay:** włącza się automatycznie po zweryfikowaniu domeny w Stripe (Shoprocket to obsługuje) - **Google Pay:** podobnie - **Stripe Link:** wypełnia kartę i adres z tożsamości Link między witrynami Każda kasa mobilna bez tych metod gubi klientów. Włącz wszystkie trzy. ## 5. Ograniczanie pól formularza Każde pole w Twojej kasie mobilnej to punkt tarcia. Przejrzyj pola: **Zwykle potrzebne:** - E-mail - Adres dostawy (imię i nazwisko, ulica, miasto, kod pocztowy, kraj) - Dane płatności (albo Apple/Google Pay) **Często zbierane na wyrost:** - Numer telefonu (tylko jeśli potrzebujesz go do dostawy / przewoźników; wielu nie potrzebuje) - Data urodzenia (prawie nigdy niepotrzebna przy zakupie) - Nazwa firmy (tylko dla B2B) - Zapis do newslettera (zaznaczony domyślnie tam, gdzie to legalne; w innym razie osobne pole wyboru) - "Skąd o nas wiesz?" (przenieś do ankiety po zakupie) Mniej pól = szybsza kasa = wyższa finalizacja. Każde usunięte pole to mniej więcej 5-10% poprawy finalizacji kasy mobilnej, kumulując się. ## 6. Czytelny krój i długość linii na mobile - **Tekst główny:** minimum 16 px (domyślny rozmiar iOS i wytyczna Google Material) - **Długość linii:** 45-75 znaków - **Wysokość linii:** 1,4-1,6x rozmiar czcionki - **Kontrast:** minimum WCAG AA (4,5:1 dla tekstu, 3:1 dla dużego tekstu) Jeśli klienci powiększają gestem opis Twojego produktu, Twoja czcionka jest za mała. Jeśli muszą obracać telefon na bok, żeby przeczytać, linia jest za szeroka albo czcionka za ciasna. ## 7. Obsługa jedną ręką Większość użytkowników mobile trzyma telefon jedną ręką, sięgając kciukiem z prawego dołu (albo lewego dołu u leworęcznych). Ważne interakcje powinny być w strefie kciuka. - Główne wezwanie do działania (Dodaj do koszyka, Do kasy, Kup teraz) blisko dołu - Hamburger nawigacji w lewym lub prawym górnym rogu, w zasięgu kciuka - Przycisk "Wstecz" przewidywalny (wstecz w przeglądarce zwykle bije własne przyciski wstecz) Nie wymagaj dwukrotnego dotykania trudno dostępnych miejsc. Każdy moment gimnastyki kciuka kosztuje klientów. ## 8. Strona produktu dopasowana do mobile Strony produktów na desktopie często pokazują wszystko naraz (galeria po lewej, szczegóły po prawej, opis pod spodem). Ten układ nie przekłada się na mobile; trzeba ułożyć treść w sekwencję. Skuteczna sekwencja strony produktu na mobile: 1. Obraz główny (galeria przesuwana gestem) 2. Tytuł + cena 3. Wybór wariantu (rozmiar, kolor) 4. Dodaj do koszyka (główne wezwanie do działania) 5. Sygnały zaufania (ocena, darmowa wysyłka, zwroty) 6. Opis (zwijany, ucięty po 3 liniach) 7. Specyfikacja / szczegóły (zwijane) 8. Podsumowanie opinii z rozwinięciem "zobacz wszystkie" 9. Produkty powiązane 10. FAQ (zwijane) Treści poniżej linii zgięcia powinny ładować się leniwie. Klient mobilny często podejmuje decyzję o zakupie w pierwszych 3 sekcjach; ładowanie wszystkiego spowalnia tę decyzję. ## 9. Testowanie na prawdziwych urządzeniach Nie DevTools. Nie emulator mobilny w przeglądarce. Prawdziwe telefony w sieci komórkowej. Minimalna rotacja testowa: - iPhone SE (mały ekran, starsze urządzenie) - iPhone 15 Pro (najnowszy iOS, Safari) - Samsung Galaxy ze średniej półki (Android, Chrome) - Starszy Android w 4G (ujawnia problemy z wydajnością) Bonus: poproś 3 znajomych z różnymi telefonami, żeby spróbowali coś kupić w Twoim sklepie. Obserwuj ich. To, z czym się męczą, to Twoja lista poprawek. ## 10. Unikanie wzorców zabijających mobile Typowe błędy, które niszczą konwersję mobilną: ### Wyskakujące okna na pełny ekran Popup "Zapisz się i dostań 10% zniżki!" zasłaniający ekran na stronie docelowej mobile. Google karze to w mobilnych wynikach wyszukiwania. Klienci trafiają na nie i wychodzą. Używaj zapisów w treści strony. ### Autoodtwarzane wideo z dźwiękiem Marnuje transfer, irytuje użytkowników, iOS i tak często to blokuje. Autoodtwarzanie bez dźwięku jest akceptowalne dla wideo w nagłówku; autoodtwarzanie z dźwiękiem jest wrogie użytkownikowi. ### Stany hover na ekranach dotykowych "Najedź, żeby zobaczyć szczegóły" nie działa na dotyk. Jeśli Twój motyw nadal ma wzorce hover-to-reveal na mobile, są faktycznie zepsute. ### Maleńkie klikalne przyciski "zamknij" w oknach modalnych 16-pikselowy X w rogu jest nietrafialny kciukiem. Zrób przyciski zamykania 44×44 albo użyj przycisków "Zamknij" na całą szerokość na dole okna modalnego. ### Przewijanie poziome w siatkach produktów Na mobile poziomo przewijane karuzele produktów chowają 80% produktów poniżej linii zgięcia. Pionowa siatka (2 kolumny na mobile) konwertuje lepiej. ## Co Shoprocket obsługuje na mobile Większość podstaw jest od razu: - **Automatyczna optymalizacja obrazów:** zmiana rozmiaru + kompresja + WebP + leniwe ładowanie na każdym zdjęciu produktu - **Wysuwany koszyk (nie koszyk na całą stronę)** jest domyślny na mobile - **Przyklejony mobilny Dodaj do koszyka** obsługiwany w sklepach z motywami - **Responsywna kasa mobilna** z poprawnymi typami pól, autouzupełnianiem i układem w stos - **Apple Pay + Google Pay + Stripe Link**: płatność jednym dotknięciem przez Stripe - **Responsywny widżet czatu na żywo** - **Dostawa przez CDN** Cloudflare dla każdego zasobu - **Core Web Vitals zoptymalizowane od razu** dla hostowanego sklepu ```
``` Użytkownicy osadzenia widżetu: kontrolujesz szybkość i wygląd otaczającej strony. Widżet Shoprocket ładuje się leniwie i nie zablokuje renderowania Twojej strony, ale ogólna szybkość strony jest Twoją sprawą. > **Wskazówka:** Raz na kwartał uruchom PageSpeed Insights na trzech najlepiej zarabiających stronach produktów na mobile. Zapisz trzy wyniki Core Web Vitals. W następnym kwartale porównaj. Trend spadkowy to cichy zabójca konwersji; wyłap go kwartalnie, a nie po szkodzie. ## W skrócie - **Mobile to 70-85% ruchu.** Większość sklepów traktuje go jako dodatek; nie rób tego - **Core Web Vitals to trzy liczby do śledzenia:** LCP, INP, CLS. Poniżej 2,5 s / 200 ms / 0,1 - **Testuj na prawdziwych urządzeniach w 4G,** nie w emulatorze przeglądarki - **Specyfika kasy:** formularze jednokolumnowe, poprawne typy pól, autocomplete, Apple/Google Pay, przyklejone przyciski wezwania do działania - **Mniej pól formularza** = wyższa finalizacja. Sprawdź, co naprawdę jest potrzebne - **Cele dotyku minimum 44×44.** Odstęp między celami minimum 8 px - **Strefa kciuka ma znaczenie.** Główne wezwania do działania blisko dołu; hamburgery w lewym/prawym górnym rogu - **Unikaj zabójców mobile:** okna na pełny ekran, autoodtwarzany dźwięk, stany hover, maleńkie przyciski zamykania [Rozpocznij bezpłatny okres próbny](https://app-v3.shoprocket.io/signup) i dostań automatyczną optymalizację obrazów + Apple Pay + natywną kasę mobilną od pierwszego dnia. 14 dni, bez karty. --- - HTML version: https://v3.shoprocket.io/pl/blog/optymalizacja-ecommerce-na-mobile-core-web-vitals-kasa-i-poprawki-ktore-ruszaja-konwersje - Language: Polski (pl) - Also in: [العربية](https://v3.shoprocket.io/ar/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Deutsch](https://v3.shoprocket.io/de/blog/mobile-ecommerce-optimierung-core-web-vitals-checkout.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [English](https://v3.shoprocket.io/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Español](https://v3.shoprocket.io/es/blog/optimizacion-ecommerce-movil-core-web-vitals-checkout-y-arreglos-que-mueven-la-conversion.md), [Français](https://v3.shoprocket.io/fr/blog/optimisation-ecommerce-mobile-core-web-vitals-paiement.md), [עברית](https://v3.shoprocket.io/he/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/optimasi-ecommerce-mobile-core-web-vitals-checkout-dan-perbaikan-konversi.md), [Italiano](https://v3.shoprocket.io/it/blog/ottimizzazione-ecommerce-mobile-core-web-vitals-checkout.md), [日本語](https://v3.shoprocket.io/ja/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/mobilioji-el-prekyba-core-web-vitals-atsiskaitymas-ir-konkretus-pataisymai-didinantys-konversija.md), [Norsk](https://v3.shoprocket.io/nb/blogg/mobiloptimalisering-nettbutikk-core-web-vitals-kasse.md), [Nederlands](https://v3.shoprocket.io/nl/blog/mobiele-webshop-optimalisatie-core-web-vitals-checkout-conversie.md), [Português](https://v3.shoprocket.io/pt/blog/otimizacao-ecommerce-mobile-core-web-vitals-checkout-conversao.md), [Română](https://v3.shoprocket.io/ro/blog/optimizare-ecommerce-mobil-core-web-vitals-plata.md), [Русский](https://v3.shoprocket.io/ru/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [ไทย](https://v3.shoprocket.io/th/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Türkçe](https://v3.shoprocket.io/tr/blog/mobil-eticaret-optimizasyonu-core-web-vitals-odeme-ve-donusumu-artiran-duzeltmeler.md), [中文](https://v3.shoprocket.io/zh/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md)