Jak optimalizovat web pro mobilní zařízení

Proč je optimalizace pro mobil zásadní

Více než 60 % globálního webového provozu přichází z mobilních zařízení a v některých odvětvích toto procento přesahuje 80 %. Google v roce 2019 přešel na mobile-first indexování pro všechny nové weby a od března 2021 používá k indexování a hodnocení výhradně mobilní verzi webu. To znamená, že pokud váš web nefunguje dobře na mobilu, nefunguje dobře ani ve vyhledávání Google – bez ohledu na to, jak dokonalá je desktopová verze.

Mobilní uživatelé mají jiná očekávání než uživatelé na desktopu. Očekávají rychlé načítání (53 % uživatelů opustí web, jehož načtení na mobilu trvá déle než 3 sekundy), ovládání jednou rukou, čitelný text bez přibližování, tlačítka a formuláře přívětivé pro dotyk a minimální zadávání údajů. Web, který tato očekávání nesplňuje, ztrácí návštěvníky, konverze i pozice ve vyhledávání.

Mobile-first indexování

Co to znamená v praxi

Mobile-first indexování znamená, že robot Google primárně prochází a indexuje mobilní verzi vašeho webu. Pokud máte obsah viditelný jen na desktopové verzi, ale ne na mobilu, Google ho nezaindexuje. To je klíčové pro weby používající responzivní design s obsahem skrytým na mobilu (display:none) nebo weby se samostatnou mobilní verzí m.domena.cz, která má méně obsahu než desktop.

Jak zkontrolovat mobilní verzi

K sledování mobile-first indexování použijte Google Search Console. V reportu Pokrytí vidíte, zda Google prochází mobilní nebo desktopovou verzi vašeho webu. Nástroj URL Inspection ukazuje, jak Google vidí konkrétní stránku. Report Použitelnost na mobilu zobrazuje problémy jako příliš malý text, překrývající se prvky nebo odkazy umístěné příliš blízko sebe. Google Mobile-Friendly Test (search.google.com/test/mobile-friendly) rychle otestuje, zda je konkrétní stránka optimalizovaná pro mobil.

Responzivní webový design

Základy responzivity

Responzivní webový design je přístup, kdy se rozvržení webu automaticky přizpůsobuje velikosti obrazovky uživatele. Místo samostatných verzí pro desktop a mobil máte jeden web, který plynule přeskupuje prvky. Klíčovými prvky responzivního designu jsou viewport meta tag, který říká prohlížeči, aby přizpůsobil šířku obsahu šířce zařízení, CSS media queries, které aplikují různé styly pro různé velikosti obrazovek, flexibilní obrázky, jež se škálují podle svého kontejneru, a fluidní grid, který používá procenta místo pevných pixelů pro šířky prvků.

Přístup mobile-first při kódování

Nejlepším postupem je kódovat od mobilu k desktopu (mobile-first). Základní CSS styly jsou pro mobil a media queries přidávají styly pro větší obrazovky. To má dvě výhody: mobilní zařízení nemusí stahovat a zpracovávat CSS, které se pak přepisuje (lepší výkon), a nutí vás to upřednostnit obsah a funkce pro nejmenší obrazovku. CSS frameworky jako Tailwind CSS a Bootstrap 5 používají mobile-first přístup s breakpointy pro obrazovky sm, md, lg a xl.

Časté chyby v responzivním designu

Mezi nejčastější chyby patří pevné šířky prvků v pixelech (používejte max-width a procenta), horizontální posuv na mobilu (ověřte, že žádný prvek nepřesahuje šířku obrazovky), příliš malá tlačítka a odkazy (minimální velikost dotykového cíle je podle pokynů Googlu 48x48 pixelů), neoptimalizované obrázky (velký desktopový obrázek se načítá i na mobilu), pop-upy, které zakrývají celou obrazovku mobilu (Google penalizuje rušivá interstitiální okna), a formuláře s příliš mnoha poli (minimalizujte zadávání na mobilu, používejte automatické doplňování).

Optimalizace rychlosti na mobilu

Proč je rychlost na mobilu důležitější

Mobilní zařízení mívají pomalejší internetové připojení (4G/LTE oproti optice), nižší výpočetní výkon pro vykreslování stránky a méně RAM pro zpracování JavaScriptu. Google PageSpeed Insights (nebo náš bezplatný nástroj na test rychlosti) zobrazuje samostatná skóre pro mobil a desktop – mobilní skóre je téměř vždy nižší a je to právě skóre, které silněji ovlivňuje hodnocení.

Optimalizace obrázků pro mobil

Obrázky jsou nejčastějším důvodem pomalého načítání na mobilu. Používejte responzivní obrázky s atributem srcset, který servíruje různé velikosti obrázků pro různé obrazovky – mobil dostane obrázek o velikosti 400 px místo desktopového obrázku o 1600 px. Záleží i na formátu obrázku: formáty WebP a AVIF jsou při stejné kvalitě o 30–50 % menší než JPEG. Lazy loading (atribut loading="lazy") odkládá načítání obrázků, které nejsou na obrazovce viditelné. WordPress přidává lazy loading ke všem obrázkům automaticky od verze 5.5.

Optimalizace JavaScriptu

JavaScript je často hlavním viníkem pomalých mobilních webů. Minimalizujte množství JavaScriptu – každý kilobajt JS vyžaduje stažení, parsování a spuštění, a na mobilním procesoru to trvá mnohem déle než na desktopu. Používejte code splitting k načtení jen toho JS, který je potřeba pro aktuální stránku. Odložte načítání nekritického JavaScriptu pomocí atributů async nebo defer. Vyhněte se velkým JS frameworkům pro jednoduché weby – pokud potřebujete jen slider a hamburger menu, nepotřebujete React ani Angular.

Critical CSS

Technika Critical CSS extrahuje CSS potřebné k vykreslení obsahu nad ohybem (above-the-fold) a vloží ho přímo do HTML, zatímco zbytek CSS se načítá asynchronně. Na mobilu je obsah nad ohybem menší (menší výška viewportu), takže i critical CSS je menší. Nástroje jako Critical, Penthouse a CriticalCSS.com automaticky generují critical CSS. WordPress pluginy jako WP Rocket a Autoptimize mají pro tuto optimalizaci vestavěnou podporu. Více o rychlosti se dočtete v našem průvodci zrychlením webu.

AMP (Accelerated Mobile Pages)

Co je AMP

AMP je framework od Googlu pro tvorbu ultra rychlých mobilních stránek. AMP stránky používají omezenou podmnožinu HTML, inline CSS do 75 KB a minimum JavaScriptu (pouze knihovnu AMP). Google ukládá AMP stránky do mezipaměti ve své CDN síti, což vede k téměř okamžitému načítání. AMP byl obzvlášť populární u zpravodajských webů a blogů, kde je rychlost čtení zásadní.

Zda AMP potřebujete

AMP už není povinný pro karusel Google Top Stories (od června 2021) a není přímým faktorem hodnocení. Pokud má váš web už dobré skóre Core Web Vitals, AMP pravděpodobně nepotřebujete. AMP však může být užitečný pro weby s vysokou mírou okamžitého opuštění na mobilu (AMP drasticky snižuje dobu načítání), zpravodajské weby a blogy s mnoha články, weby se slabou infrastrukturou, kde výrazně pomáhá CDN cache od Googlu, a e-mailový marketing (AMP for Email umožňuje interaktivní e-maily). Pro WordPress automaticky generuje AMP verze vašich stránek plugin AMP od Googlu a XWP.

Core Web Vitals na mobilu

LCP (Largest Contentful Paint)

LCP měří dobu načtení největšího viditelného prvku na stránce – obvykle hero obrázku nebo hlavního nadpisu. Na mobilu je cílem LCP pod 2,5 sekundy. Nejčastějšími problémy jsou velké neoptimalizované obrázky, pomalá doba odezvy serveru (TTFB) a zdroje blokující vykreslení. Přednačtěte LCP obrázek pomocí link rel="preload", použijte optimalizovaný formát (WebP) a vhodnou velikost a minimalizujte CSS a JS blokující vykreslení.

INP (Interaction to Next Paint)

INP nahradil FID jako metriku Core Web Vitals a měří odezvu webu na interakce uživatele. Na mobilu je INP pod 200 milisekund dobrým skóre. Běžnými problémy jsou dlouho běžící úlohy JavaScriptu, které blokují hlavní vlákno, složité manipulace s DOM a příliš mnoho event listenerů. Řešením je rozdělení dlouhých úloh na menší (yield to main thread), debouncing event handlerů a použití web workerů pro výpočetně náročné operace.

CLS (Cumulative Layout Shift)

CLS měří vizuální stabilitu stránky – jak moc se prvky během načítání posouvají. Na mobilu je CLS pod 0,1 dobrým skóre. Nejčastějšími příčinami špatného CLS jsou obrázky bez atributů width a height (prohlížeč neví, kolik místa rezervovat), dynamicky vkládané reklamy, které posouvají obsah, webové fonty, které při načtení mění velikost textu (FOUT), a obsah vkládaný nad existující obsah. Vždy definujte rozměry pro obrázky a video, používejte font-display: swap pro webové fonty a rezervujte místo pro reklamy.

Testování optimalizace pro mobil

• Google PageSpeed Insights: Podrobný report výkonu s konkrétními doporučeními pro mobil i desktop.
• Chrome DevTools Device Mode: Simuluje různá mobilní zařízení v prohlížeči pro testování rozvržení a funkcí.
• BrowserStack a LambdaTest: Testování na reálných mobilních zařízeních v cloudu – různé modely, verze OS a prohlížeče.
• Google Search Console: Report Použitelnost na mobilu identifikuje stránky s problémy na mobilu.
• WebPageTest: Pokročilý nástroj pro testování rychlosti s možnostmi pro mobilní zařízení a pomalá připojení.
• Lighthouse: Nástroj od Googlu pro komplexní analýzu výkonu, přístupnosti, SEO a osvědčených postupů.

Závěr

Optimalizace pro mobil není volitelná – je to požadavek pro každý web, který chce být viditelný ve vyhledávání Google a poskytovat dobrou uživatelskou zkušenost. Responzivní design s mobile-first přístupem, optimalizované obrázky, minimum JavaScriptu a dobré metriky Core Web Vitals jsou základem úspěšné optimalizace pro mobil. U BeoHosting jsou všechny hosting plány optimalizované pro rychlé doručování obsahu na mobilní zařízení díky webovému serveru LiteSpeed, server-side cachi a bezplatné CDN, která zrychluje načítání pro uživatele po celém světě.