Mobilní web se neposuzuje podle vzhledu, ale podle tření
Na desktopu si uživatel často „pomůže“ myší, větší obrazovkou a vyšší tolerancí k chybám. Na mobilu je ale každý špatně umístěný prvek vidět okamžitě: tlačítko je malé, text se překrývá, formulář vyžaduje příliš mnoho klepnutí nebo se stránka při načítání posouvá. Výsledek? Nižší konverze, horší engagement a v SEO i slabší signály kvality.
Google už dlouho hodnotí web primárně mobile-first, takže mobilní zkušenost není doplněk, ale základ. U výkonu se navíc opírá o Core Web Vitals, kde jsou na mobilu typicky největší problémy s LCP a INP. V praxi to znamená, že i vizuálně pěkný web může na mobilu selhávat, pokud uživatel musí čekat, lovit nebo přibližovat.
Nejčastější slabiny: malé prvky, špatná hierarchie a zbytečné kroky
V auditní praxi se stále opakují stejné problémy. Nejčastější bývá příliš malý tap target – tlačítko nebo odkaz nemá dostatečnou plochu pro prst. Google doporučuje minimálně přibližně 48 × 48 px pro interaktivní prvky, a to ne proto, že by to bylo „hezčí“, ale protože menší plochy výrazně zvyšují chybovost kliknutí.
Další častý problém je přetížený header. Mobilní menu, vyhledávání, jazykové mutace, login, košík, notifikace a CTA v jednom prostoru vytvářejí chaos. Uživatel pak neví, co je prioritní. Na mobilu musí být jasné, co je hlavní akce stránky – kontakt, poptávka, nákup nebo čtení dalšího obsahu.
- Malá tlačítka a odkazy blízko sebe
- Překryvy mezi sticky lištami a obsahem
- Formuláře s příliš mnoha poli nebo bez správných typů inputů
- Pop-upy, které zakryjí obsah hned po načtení
- Slabá vizuální hierarchie, kdy není jasné, kam klepnout jako první
Praktický příklad: e-shop přidá na mobil sticky lištu s filtrem, košíkem a chatem. Na první pohled to vypadá uživatelsky přívětivě, ale ve skutečnosti zakryje část produktové mřížky a zmenší použitelnou plochu. Po úpravě na jedno dominantní CTA a zbytek do rozbalovací nabídky často roste CTR i počet zobrazených produktů na session.
Výkon na mobilu: rozdíl mezi 2,2 a 4,5 sekundy je často rozdíl mezi konverzí a odchodem
Mobilní uživatelé mají nižší toleranci k prodlevám, zvlášť na horším připojení. Z dat Google vyplývá, že pravděpodobnost opuštění stránky roste s každou další sekundou načítání. V praxi se velmi často ukazuje, že LCP nad 2,5 s už začíná bolet, a pokud se dostanete nad 4 s, výkon webu bývá viditelně slabý i bez hlubší analýzy.
Co mobil nejvíc zpomaluje? Nejčastěji jsou to velké hero obrázky, neoptimalizované fonty, blokující JavaScript, příliš mnoho třetích skriptů a špatně nastavený caching. Pokud běží web na WordPressu, bývá problémem také kombinace builderu, několika pluginů a těžké šablony. U moderních frontendů zase často selže nadměrné množství JS bundle nebo špatně rozdělený hydration.
Pro měření používejte kombinaci:
- PageSpeed Insights pro rychlý přehled a Core Web Vitals
- Lighthouse pro diagnostiku problémů na úrovni frontendu
- Chrome DevTools Performance pro detailní profilování
- WebPageTest pro testy na simulovaném mobilním připojení
- Search Console – Core Web Vitals pro reálná data z Google
Jestli chcete rychlý zásah s vysokým efektem, začněte obrázky. Převod do WebP nebo AVIF, správné rozměry, lazy loading pod foldem a preload kritického hero obrázku často přinesou lepší výsledek než složité refaktoringy. Druhý krok je odlehčení JavaScriptu: odstraňte nepotřebné skripty, omezte tag management chaos a zkontrolujte, zda některé funkce neběží zbytečně na každé stránce.
Formuláře a checkout: místo, kde mobil nejčastěji ztrácí peníze
Na mobilu je formulář testem trpělivosti. Každé pole navíc zvyšuje šanci na nedokončení. Každý špatně nastavený input znamená více oprav a více frustrace. U lead generation webů i e-shopů proto platí jednoduché pravidlo: méně polí, méně překážek, méně rozhodování.
U formulářů sledujte hlavně tyto detaily:
- správný typ pole: email, tel, number
- automatické vyvolání správné klávesnice na mobilu
- jasné labely, ne jen placeholdery
- validaci až po odeslání nebo průběžně srozumitelně
- minimum povinných polí
- viditelnou chybovou hlášku přímo u problému
V checkoutu bývá problém ještě výraznější. Pokud uživatel musí na mobilu vyplňovat adresu, firmu, IČ, poznámku, dopravu a platbu na několika obrazovkách, ztrácíte ho na každém kroku. Osvědčený přístup je co nejvíce zkrátit proces, nabídnout autofill, uložené údaje, rychlé platby a minimalizovat přesměrování mezi kroky.
V e-commerce často pomůže i jednoduchý A/B test: zkrácení formuláře z osmi polí na pět může podle typu byznysu zvýšit dokončení o jednotky až desítky procent. Nejde o univerzální číslo, ale o velmi častý trend, který potvrzují i data z analytiky.
UX detail, který rozhoduje: prsty, palce a mikrointerakce
Mobilní ovládání je ergonomie. Lidé drží telefon jednou rukou, používají palec a očekávají, že důležité akce budou v dosahu bez přehmatávání. Proto má smysl umístit klíčové CTA do spodní části obrazovky nebo do zóny, kam uživatel přirozeně dosáhne. U dlouhých stránek zase funguje sticky CTA, ale jen pokud nepřekáží obsahu.
Velkou roli hrají i mikrointerakce. Tlačítko má při klepnutí reagovat okamžitě, navigace má být jasná, animace má být krátká a účelná. Pokud uživatel nevidí, že se něco stalo, klepne znovu. Tím vznikají duplicitní akce, špatné odeslání formuláře nebo frustrace. Z pohledu výkonu i UX je proto důležité řešit INP, tedy odezvu na interakci.
Kontrolujte také, zda se při načítání nemění layout. CLS je na mobilu obzvlášť citlivý, protože každý posun obsahu nad prstem vede k omylům. Typický problém je reklama, cookie lišta nebo pozdě načítaný obrázek bez vyhrazeného prostoru. Rezervujte rozměry, používejte správné aspect ratio a nenechávejte stránku „skákat“.
Jak mobilní problémy odhalit rychle a systematicky
Nejlepší postup je kombinovat technický audit, behaviorální data a reálné testování na zařízení. Nestačí jen projít web v emulátoru. Mobilní chyby se často ukážou až na skutečném telefonu, s pomalejším připojením a prstem místo myši.
Začněte v Google Search Console – sekce Core Web Vitals a Mobile Usability rychle odhalí systémové problémy. Pak otevřete GA4 a sledujte rozdíly mezi mobilem a desktopem: bounce rate, scroll depth, engagement rate, konverzní poměr a drop-off ve funnelu. Pokud mobile dramaticky zaostává, máte jasný signál, že problém není v nabídce, ale v použitelnosti.
Pro praktický audit doporučuji tento postup:
- otestovat hlavní stránky na reálném telefonu i v emulaci
- zapsat všechny prvky, které překáží při klepnutí nebo čtení
- změřit LCP, INP a CLS na mobilu
- porovnat rychlost a konverze mezi zařízeními
- upravit nejdřív prvky s největším dopadem: hero sekci, menu, formuláře, CTA
Pokud spravujete větší web, vyplatí se vytvořit mobilní checklist pro každou novou šablonu nebo landing page. Obsahuje rozměry tlačítek, pořadí sekcí, limity pro počet polí ve formuláři, pravidla pro obrázky a kontrolu posunů layoutu. Tím se z mobilní optimalizace stane proces, ne jednorázová oprava.
Mobilní web obvykle nepadá proto, že by byl „špatně navržený“ v abstraktním smyslu. Padá na detailech, které se na desktopu ztratí, ale na mobilu bolí okamžitě. Kdo tyto drobnosti změří, opraví a průběžně hlídá, získá náskok v SEO, UX i konverzích bez nutnosti kompletního redesignu.
