Stav českého mobilního webu

17. červenec 2015 —

Není dost českých webů, které by se dobře používaly na mobilu.

Tato informace se ke mně dostává už delší dobu, a z různých zdrojů. Bohužel zatím nikdy nebyla podpořena reálnými daty, a tak není jisté, jestli je to opravdu tak, nebo si to jenom kolektivně myslíme, a zda to náhodou v okolních státech není úplně stejné.

Protože je to pro mě dost zásadní otázka,¹ rozhodl jsem se udělat si vlastní minivýzkum.²

Jeho výsledky, metodologii i software, který mi při něm pomáhal, dávám k dispozici zde.

Obsah

Výsledky

Český mobilní web na tom je opravdu špatně. V poměru webů z top 500, které jsou uživatelsky příjemné i pro mobilní návštěvníky, nejenže zaostává za Velkou Británií (která ve webových technologiích většinou patří mezi světovou špičku, takže se to dá čekat), ale má velmi daleko i k Německu nebo Polsku. Ze zkoumaných států se můžeme srovnávat jen s Řeckem — a i tam jsme na tom výrazně hůř.³

Nutno podotknout, že ani 81 %, kterými se může chlubit Británie, není žádný ideální stav. Zvláště když si uvědomíme, že se bavíme o těch největších webech, a že jsme v roce 2015.

Pokud se na weby díváme podle kohort dle oblíbenosti, vidíme klesající tendenci u všech států. To se dá předpokládat: velké weby mají více prostředků a větší motivaci inovovat.

ČR má problém po celém spektru. V prvních desítkách největších webů ještě relativně konkuruje (TOP100 = 68% v ČR, versus 64% v Řecku), ale pak už klesá a drží se na chvostu sledovaných států.

Data

K dispozici je tabulka, ze které vznikly grafy. Můžete v ní komentovat. Všechna podkladová data, včetně CSV, jsem nahrál do sdíleného adresáře.

Prohlédnout si samotná zdrojová data (tj. screenshoty) si můžete pro jednotlivé země na následujících odkazech. Pozor, některé weby (a tím pádem i screenshoty) obsahují nahotu.

• Česká republika (.cz)
• Německo (.de)
• Polsko (.pl)
• Rumunsko (.ro) (přidáno až 25. září, ale data jsou ze stejné doby jako ostatní)
• Řecko (.gr)
• Velká Británie (.uk)

Kdo by měl zájem, může si také stáhnout „plakáty“, na kterých je vyobrazeno vždy všech 500 webů ke každé zemi.

Metodologie

Výzkum byl limitovaný časem i prostředky,⁴ a jeho cílem bylo dostat základní představu o stavu českého mobilního webu (ve srovnání se světem). Metodologie je tedy ve znamení kompromisu a použití toho, co je okamžitě k dispozici.

Právě proto níže předkládám vše co nejotevřeněji a nejpodrobněji, abyste si udělali vlastní obrázek, a případně použili mnou vytvořené nástroje na obsáhlejší nebo přesnější výzkum.

Nicméně pevně věřím, že i kdyby byl výzkum dělán mnohem pečlivěji, na výsledcích se to projeví jen kosmeticky.

Výběr stránek

Parametry výběru:

• Zaměřil jsem se na nejnavštěvovanější stránky v dané zemi. Bylo by teoreticky možné dívat se na náhodný výběr webů, nicméně v takovém souboru by se velmi pravděpodobně nevyskytnula ani jedna z top internetových destinací (Seznam, Google, atd.). Vzhledem k tomu, že nám jde o zkušenost průměrného uživatele (více než o status průměrného webu nebo schopnosti průměrného majitele webu), volíme nejnavštěvovanější stránky.
• Hodnotím pouze prvních 500 nejnavštěvovanějších stránek. Myslím, že pro reálný obrázek by stačilo i prvních 100 (a ostatně i prvních 10 webů v dané zemi⁵ dá dohromady nemalou část veškeré internetové návštěvnosti), ale zvolil jsem kompromis mezi proveditelností a zastoupením. Návštěvnost klesá podle pořadí v žebříčku exponenciálně.⁶
• Návštěvnost stránek měříme podle aktuální desktopové návštěvnosti. Dá se předpokládat, že všechny dnešní desktopové weby budou dříve nebo později muset být přívětivé k mobilním prohlížečům. Snažíme se měřit průměrnou uživatelskou zkušenost tak, jak by vypadala, kdyby dnes všichni začali pro prohlížení webu používat výlučně mobil. To je samozřejmě nereálné, ale odpovídá to tomu, co chceme měřit: připravenost webů (obecně) na mobilní prohlížeče. (Použít současnou mobilní návštěvnost by nedávalo smysl — ta tvoří s mobilní připraveností úzce spjaté proměnné. Měřili bychom v kruhu.)

Implementace:

• Seznam nejnavštěvovanějších webů (domén) jsem získal od společnosti Alexa. Má tu výhodu, že funguje napříč státy (stejná metodologie pro celý svět), nefunguje na principu nasazení měřícího kódu (tedy měří všechny weby, nejen ty, které se aktivně zúčastňují měření) a je veřejně k dispozici. Přesnost je samozřejmě vždy diskutabilní, ale po krátkém prohlédnutí jsem nenašel žádné do očí bijící nesrovnalosti (které by nebyly vyváženy obdobnými nesrovnalostmi napříč zeměmi). Nejde nám o přesné řazení, pouze o 500 velkých webů pro každou měřenou zemi.
• Využil jsem CSV soubor jednoho miliónu globálně nejnavštěvovanějších webů ze 17. července 2015. (Alexa nabízí i API pro stáhnutí webů dle geograficky omezené návštěvnosti, ale to je placené a vyžaduje implementaci klienta.)
• Protože jde o globální návštěvnost, filtroval jsem pro každou zemi pouze s lokální doménou nejvyššího řádu (.cz pro ČR, .uk pro Británii, atd.). Pro vybrané země to je dobrý filtr pro lokální weby navštěvované místními uživateli. Není to samozřejmě dokonalé — například pro Spojené státy (.com) nebo Britské indickooceánské území (.io) by to moc dobře nefungovalo. A jistě lze najít lokální weby pro lokální uživatele, které mají zahraniční TLD.
• Celá metodologie výběru stránek by šla udělat mnohem lépe. Nicméně vzhledem k tomu, že srovnáváme napříč zeměmi a metodologie je pro každou z nich stejná, věřím, že se případné odchylky poměrně dobře vykryjí. Nejde nám totiž o to, jestli je mobilně optimalizovaných webů v ČR 50% nebo 60%, ale o to, jak si stojíme.

Zaznamenávání

Vybrané stránky jsem navštěvoval automatickým skriptem, zaznamenával průběh jejich načítání a dělal screenshoty. (Skript je k dispozici.)

Jak vidíte na videu, stránky jsou otevírány v desktopovém Chromu ve vývojářském módu, který simuluje návštěvu z mobilního zařízení.

Parametry:

• Preset „Google Nexus 5“
  • rozlišení: 360x640
  • pixel ratio: 3
  • zoom to fit
  • User-Agent: Mozilla/5.0 (Linux; Android 4.4.4; en-us; Nexus 5 Build/JOP40D) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2307.2 Mobile Safari/537.36
• Simulace pomalého připojení „Regular 2G“
  • maximální rychlost: 250 Kbps
  • minimální round-trip time (RTT): 300ms

Nexus 5 je rozlišením stále ještě nadprůměrné mobilní zařízení, ale dlouho doufejme nebude.

Teoretické rychlosti českých mobilních sití (a samozřejmě wifi) jsou průměrně vyšší než nastaený preset (250 Kbps). Nicméně, prakticky se stránky načítají mnohdy ještě pomaleji, i když má člověk 3G nebo LTE. To je dáno mnoha různými důvody (nedokonalé pokrytí, interference, vytížený mobilní procesor). Po chvilce testování mi vybrané nastavení nejvíce připomínalo reálný provoz na mém mobilu a připojení.

Laptop, na kterém zaznamenávání probíhalo, byl připojený velmi rychlým připojením a v průběhu zaznamenávaní neměl žádnou další zátěž (nahrávaní videa výše proběhlo mimo). Takže pomalost by měla být uniformní.

Zaznamenávání probíhalo 16. a 17. července 2015.

Hodnocení stránek

Původně jsem chtěl stránky prohnat Mobile Friendly testem nebo jiným podobným nástrojem. Nicméně tento nástroj neukazuje všechny informace, které jsem chtěl, a navíc se stránkám hlásí jako Googlebot, což ovlivňuje způsob, jakým se stránky prezentují. (Viz například centrum.cz, jak jej tento nástroj vidí.)

Postupně jsem zavrhl i všechny další automatické způsoby rozpoznání mobilní přívětivosti. Nejkvalitnější kategorizace je stále ještě manuální.

Rozhodnout, zda je stránka připravená pro mobil je těžký úkol i pro člověka. Mobilní přívětivost je škála, nebo spíš vektor, ne booleanovská kategorie. Některé stránky, které jsou technicky vzato mobilní, jsou z praktického hlediska na mobilu zcela nepoužitelné. Jiné stránky, které vznikly ještě před příchodem chytrých telefonů, a nikdy pro ně nebyly optimalizované, jsou například zase natolik primitivní, že se na mobilu z podstaty používají skvěle.

V důsledku jde tedy o subjektivní hodnocení. Proto jsem všechna hodnocení dělal sám (abych měl stejný „mustr“). Na každou stránku jsem měl maximálně několik vteřin a rámcově jsem se držel následujících kritérií:

• Text je čitelný.
• Odkazy a ovládací prvky jsou dostatečně veliké, aby se do nich člověk strefil prstem na mobilu.
• Je vidět celá šířka stránky (tj. nemusím scrollovat do stran, abych si přečetl nadpis).

Pár pravidel, na které jsem došel až v průběhu hodnocení:

• Pokud se načetla desktopová stránka, a ta se pak zeptala, zda chce člověk přepnout na mobilní verzi, označil jsem ji jako nepřívětivou.
• Některé weby se vůbec nenačetly nebo se načetly do stavu, ze kterého není jasné, zda jsou mobilní či ne. Tyto jsem dal do speciální kategorie „Broken“. Z dat jsem je nevyřadil (protože si dokáži představit, že u některých z nich⁷ by mohla být informace o tom, že se vůbec nenačetly, důležitá) ale ze statistik jsou pochopitelně vyčleněny.
• Pokud přišel redirect, hodnotil jsem stránku, na které uživatel přistane. Ve chvíli, kdy byl redirect na stránku, kterou jsem již hodnotil, označil jsem stránku jako „Broken“, abych zabránil duplicitě.

Obecně jsem byl na weby „hodný“, tj. pokud byla vidět snaha, ale například některý odstavec byl příliš malým písmem, označil jsem web za mobilně přívětivý.

Rychlost načítání jsem do samotného hodnocení o přívětivosti nezahrnoval (tj. pokud webu trvalo načtění 10 vteřin, ale byl například responzivní, ohodnotil jsem jej „zeleně“). Tato data se ukládají bokem a v budoucnu je můžu použít pro zpřesnění definice mobilní přívětivosti.

Software

Protože jsem musel sám ohodnotit 2500 webů, rozhodl jsem si práci usnadnit jednoduchým softwarem na míru. Nebylo by praktické screenshoty získané automatizací procházet manuálně a pak si někde psát tabulku.

Během asi tří hodin vznikl jednoduchý (a extrémně neuhlazený) nástroj, který ukazuje web po webu a umožňuje jejich hodnocení jednoduchými stisknutími kláves. Viz video.

Nástroj je pro zájemce k dispozici.⁸ Kód tohoto programu a všech různých dalších skriptíků, které jsem si napsal pro tvorbu tohoto výzkumu, jsem umístil na svůj github.

Závěry

Proč by nám na připravenosti webu na mobily mělo záležet?

Sem jsem chtěl původně napsat pár odstavců v odpověď na výše položenou otázku, ale neudělám to. O tématu bylo na českém webu napsáno již dost. (Stejně tak se o tom povídá už mnoho let na každé oborové konferenci.)

Někteří lidé mohou namítnout, že mobilní web „dnes již není nutný“, protože lidé stejně budou více používat nativní mobilní aplikace. Je pravda, že uživatel mobilu tráví většinu času v aplikacích, ne ve webovém prohlížeči. Nicméně když se na ty statistiky podíváte blíže, zjistíte, že naprostou většinu tohoto času stráví uživatel v několika málo aplikacích (email, sociální sítě, čtečky, hry). Chce-li ale něco udělat mimo tyto aplikace (například nákup), nejde si hned nainstalovat novou aplikaci — použije web. Long tail stále patří webu, a pravděpodobně tomu tak ještě dlouho bude.⁹

Proč je ČR na chvostu?

Česká republika na tom v technologiích zpravidla bývá dobře — rozhodně lépe než Polsko nebo Řecko. Proč se zde nedaří webu optimalizovanému pro mobily?

Chceme-li na sebe být hodní, můžeme přijít s následujícím vysvětlení:

• Desktopový web je u nás obecně silný (napřed před Polskem i Řeckem). Právě proto, že tak dobře funguje a je tak dobře (a déle) zakořeněný, obtížněji se aktualizuje (je menší motivace „sahat na něco, co už funguje“).

Různých dalších hypotéz by se dalo vymyslet mnoho. Důležité ale je, co s tím.

Jak z toho ven?

O tom, že mobilní web je opravdu („opravdu opravdu opravdu“) důležitý už slyšeli všichni, kdo s vývojem webu mají cokoliv společného. Mluví se o tom roky na konferencích pro šéfy firem, ukazuje se to na firemních školeních a každý webový vývojář hodný své pozice už mobilní web (aspoň teoreticky) umí vytvářet.

Jak se říká: prvním krokem je uvědomit si, že máme problém.

Další krok je zjistit, co konkrétně nefunguje. Navštěvujete na mobilu často web, který není responzivní? Napište o tom jeho majiteli. Pracujete ve firmě, která nemá mobilní verzi webu nebo ta verze nedosahuje kvalit desktopové verze? Zjistěte, kdo to může změnit, a napište mu. Nevíte, jak na mobilní web? Jděte na školení nebo si pusťte záznam přednášky na YouTube. Víte, jak na mobilní web? Řekněte o tom ostatním. Používáte webový framework, který na mobilní web nemyslí? Dejte vědět jeho autorům nebo uvažujte o změně.

— Filip Hráček
Text i data jsou CC-BY
Diskutujte prosím na Twitteru nebo na Google+