Papírová koláž telefonu a počítače s grafy rychlosti webu

Analýza výkonu webové stránky přináší poměrně různorodé výsledky podle toho, zda měříte mobilní nebo desktopovou verzi. Stránka s výborným skóre na desktopu může na mobilu selhat a naopak. Proč obě prostředí vychází tak odlišně, kde konkrétně vznikají rozdíly ve výsledcích a jak výstupy z obou analýz správně interpretovat a použít?

Mobil a desktop nejsou jen různé velikosti obrazovky

Rozdíl mezi mobilní a desktopovou analýzou výkonu nesouvisí primárně s rozlišením nebo layoutem stránky. Jde o zásadně odlišné hardwarové a síťové podmínky, ve kterých web běží.

Desktop obvykle mívá výkonný procesor, dostatek operační paměti a rychlé připojení přes Wi-Fi nebo ethernet. Prohlížeč na desktopu zpracovává JavaScript, renderuje stránku a stahuje zdroje za podmínek, které jsou podstatně příznivější než na průměrném smartphonu.

Mobilní zařízení zase pracuje s procesorem optimalizovaným pro nízkou spotřebu energie, takže maximální výkon od něj nečekejte. Navíc běží na bateriovém napájení, kde operační systém záměrně omezuje výkon při nízkém stavu baterie. Síťové připojení se mění v závislosti na poloze uživatele a pohybuje se od rychlé 5G sítě po pomalé 3G v budovách nebo na venkově.

Jak nástroje tento rozdíl simulují

Google PageSpeed Insights a Lighthouse při analýze mobilní verze aplikují tzv. CPU throttling, tedy záměrné zpomalení procesoru na zlomek desktopového výkonu. Zároveň simulují pomalejší síťové připojení odpovídající průměrnému mobilnímu tarifu. Tentýž web pak ve výsledku dostane na mobilu výrazně nižší skóre než na desktopu, přestože se jedná o identický kód.

Papírová koláž dvou ukazatelů skóre s odlišnými hodnotami

Kde vznikají největší rozdíly ve skóre

JavaScript je většinou hlavní viník na mobilu

JavaScript je na desktopu zpracován rychle a jeho vliv na celkový výkon stránky bývá méně patrný. Na mobilním zařízení se zpracování stejného množství JavaScriptu prodlouží čtyř až šestinásobně. Stránka s rozsáhlými JS knihovnami, analytickými skripty a chatovacími widgety, která na desktopu načte za 1,5 sekundy, se na mobilu načítá 6 až 9 sekund.

Toto je nejčastější příčina dramatického rozdílu mezi mobilním a desktopovým skóre. Správci webů optimalizují stránku na desktopu, kde ji primárně testují, a přehlížejí, že mobilní uživatelé vidí zcela jiný zážitek.

LCP a jeho mobilní specifika

LCP (Largest Contentful Paint) měří čas do zobrazení největšího viditelného prvku stránky. Na mobilních zařízeních je tento prvek obvykle jiný než na desktopu, protože responzivní design mění rozložení stránky. Na desktopu může být největším prvkem rozsáhlý hero banner, na mobilu totéž místo zabírá nadpis H1 nebo menší obrázek.

Různé největší prvky mají různou dobu načítání. Web optimalizovaný pro desktopové LCP proto nemusí mít dobré mobilní LCP, protože prvek, který Google na mobilu měří, nebyl součástí optimalizace.

CLS a mobilní layout

CLS (Cumulative Layout Shift) měří neočekávané posuny obsahu během načítání. Na mobilu jsou tyto posuny citlivějším problémem než na desktopu ze dvou důvodů. Za prvé, mobilní obrazovka je úzká a posun bloku o 20 pixelů přesunutý obsah na desktopu způsobí přesunutí celé sekce na mobilu mimo viditelnou oblast. Za druhé, mobilní uživatelé drží telefon v ruce a posun layoutu ve chvíli, kdy se chystají klepnout, způsobí klepnutí na nesprávný prvek.

Jak správně provést analýzu pro obě prostředí

Vždy testujte obě verze odděleně

Analýza pouze desktopové verze poskytuje neúplný obraz. Google hodnotí weby v první řadě podle mobilní verze v rámci Mobile First Indexing. Organické pozice ve vyhledávání jsou tedy určeny výkonem mobilní verze. Správce webu, který testuje jen desktop, tím pádem optimalizuje pro prostředí, které Google při rankingu nezohledňuje jako primární.

Používejte terénní data, nejen laboratorní

PageSpeed Insights zobrazuje dva typy dat: laboratorní (simulace v kontrolovaném prostředí) a terénní (reálná data od skutečných uživatelů shromážděná přes Chrome User Experience Report). Terénní data jsou cennější, protože zachycují skutečné podmínky uživatelů webu: jejich zařízení, připojení i geografickou polohu.

Web navštěvovaný převážně uživateli v regionech s horším mobilním pokrytím bude mít horší terénní data než web stejného technického provedení, jehož uživatelé jsou v oblastech s rychlým připojením. Laboratorní data tuto nuanci nezachycují.

Testujte opakovaně a v různých podmínkách

Jednorázová analýza zachycuje stav webu v jeden konkrétní moment. Výsledky ovlivňuje aktuální zatížení serveru, dostupnost CDN nebo právě probíhající aktualizace pluginů.

Průběžná analýza výkonu webové stránky v pravidelných intervalech odhalí trendy: zda se výkon po aktualizaci CMS zhoršil, zda přidání nového marketingového nástroje zpomalilo načítání nebo zda sezónní nárůst návštěvnosti ovlivnil dobu odezvy serveru.

Co dělat s výsledky analýzy

Řešte nejdříve mobilní problémy

Protože Google indexuje primárně mobilní verzi, problémy identifikované v mobilní analýze mají vyšší prioritu než identické problémy na desktopu. Pokud máte omezené kapacity pro technické úpravy, začněte vždy mobilní verzí.

Dělte problémy podle kategorie

Výsledky analýzy výkonu rozdělte do tří kategorií podle náročnosti řešení.

  • Rychlé výhry jsou změny proveditelné bez zásahu vývojáře: komprese obrázků, odstranění nepoužívaných pluginů, nastavení cache. 
  • Středně náročné úpravy vyžadují zásah do šablony nebo konfigurace serveru: odložené načítání JavaScriptu, implementace lazy loadingu, nastavení HTTP hlaviček.
  • Komplexní optimalizace jsou pak například refaktorování kódu, migrace na rychlejší hosting nebo implementace CDN.

Znalost toho, co SEO a výkonnostní testy online dokážou odhalit a kde jsou jejich limity, vám pak pomůže správně nastavit očekávání od výsledků automatické analýzy. Přesněji se pak rozhodnete, kdy je třeba přistoupit k hlubšímu manuálnímu auditu.

Jak odlišný výsledek mobilu a desktopu využít strategicky

Velký rozdíl mezi mobilním a desktopovým skóre představuje hodnotnou informaci. Ukazuje, že web byl pravděpodobně vyvíjen a testován primárně na desktopu bez souběžné optimalizace pro mobilní prostředí. Tento stav je běžný u webů starších pěti let nebo u webů spravovaných týmy bez dedikovaného vývojáře.

Naopak vyrovnané skóre obou verzí na nízké hodnotě znamená systémový problém: přetížený server, špatně nastavená cache nebo fundamentální architektonická chyba, která se projeví za každých podmínek. Tato situace vyžaduje hlubší technický zásah než cílená mobilní optimalizace.