Jak optimalizovat svůj web pro mobilní uživatele?

Je váš web skutečně přizpůsobený pro mobilní zařízení?

Víte, že Google uplatňuje novou politiku zvanou Mobile-First?

Stále více uživatelů internetu upouští od tradičních počítačů a raději prohlíží a nakupuje prostřednictvím svých mobilních telefonů a tabletů.

Responzivní webdesign sice umožňuje vytvářet stránky, které se stejně dobře zobrazují na všech zařízeních, nicméně je pouze jedním z mnoha aspektů optimalizace uživatelského zážitku pro mobilní platformy.

Pro dosažení skutečně špičkového výkonu je třeba brát v úvahu i další strategie.

Proto se klade tak velký důraz na vytváření webových stránek, které jsou primárně navrženy pro mobilní zobrazení. Zkrátka a dobře, princip mobile-first znamená, že návrh a obsah jsou optimalizovány s ohledem na mobilní uživatele v první řadě.

Jak už bylo řečeno, tento článek není o kompletním přepracování webu. Spíše se zaměříme na základní principy designu pro mobilní zařízení a věnujeme se technickým aspektům, které zlepšují uživatelský zážitek pro mobilní návštěvníky.

#1: Návrh s ohledem na mobilní zobrazení

Web se dlouho řídil pravidlem, že cílovou skupinou jsou uživatelé desktopových počítačů. Skutečná technologická vyspělost se nejlépe prezentovala na velkých monitorech. Chytré telefony a tablety ale hrají stále větší roli, a proto je nezbytné se přizpůsobit konceptu mobilního designu.

Kromě responzivního designu, které další prvky je nutné zohlednit při tvorbě webů pro mobilní zařízení?

Prioritizace obsahu. Mobilní obrazovky mají omezený prostor. Navíc se obsah zobrazuje vertikálně, na rozdíl od širší horizontální struktury desktopových počítačů. Je tedy nezbytné při návrhu upřednostňovat klíčové prvky. Co je pro uživatele nejdůležitější? Jsou tlačítka s výzvou k akci (CTA) snadno viditelná?
Obsah na prvním místě, barvy až potom. V mobilním designu lze dosáhnout zajímavých výsledků, ale nelze se spoléhat na to, co funguje na desktopu. Zaměřte se na obsah. Zajistěte, aby byl text a další části obsahu snadno čitelné a dostupné. Mobilní obrazovky jsou mnohem citlivější na rušivé vizuální prvky.
Intuitivní navigace. Na mobilu není možné jen tak kliknout kamkoli a vrátit se na hlavní stránku. Pokud ovšem tento způsob navigace nezapracujete. A měli byste! Experimentujte s widgety pro posun na začátek stránky, ale i s hladkými, přilepenými záhlavími.

Nejlepším způsobem, jak ověřit, zda je váš design správný, je použít telefon (sám to dělám neustále!) a navštívit vaše stránky. Pečlivě sledujte, jak se obsah zobrazuje a jak plyne.

Pokud sedíte v kavárně nebo čekáte na letišti, požádejte někoho, ať si prohlédne vaše stránky. Potom si v klidu poslechněte jeho názor. Často budete překvapeni, jak uživatelé vnímají váš web.

#2: Optimalizace zdrojů – obrázky, ikony a další

Jak často používáte vizuální prvky pro vlastní potěšení, a ne pro uživatelský zážitek? Pokud se chcete pustit do kreativních úprav, je důležité porozumět optimalizaci médií.

Vizuální prvky jako fotografie, ilustrace, ikony a videa jsou největšími spotřebiteli datového toku webových stránek.

Průměrná velikost webové stránky v roce 2018, rozdělená podle odvětví a zemí.

I když neexistuje univerzální pravidlo pro velikost webu, je logické, že menší velikost znamená rychlejší načítání.

Jak tedy zmenšit velikost vizuálního obsahu o pár kB nebo i MB?

Změňte rozměry obrázků. Zdá se to jednoduché, že? Už kolikrát jsem narazil na mobilní web, který načítal obrázky o velikosti 1980 x 1200 pixelů. Místo toho by měly být fotografie v plném rozlišení dostupné jako volitelné odkazy. Změna velikosti může zmenšit celkovou velikost obrázku až o 80 %, v závislosti na požadovaných rozměrech. Pro mobilní zařízení ale není nutné překračovat rozsah 600–700 pixelů.
Zmenšete velikost souboru pomocí komprese. Komprese/optimalizace obrázků je proces, při kterém software snižuje počet barev v obrázku. Tím se může výrazně zmenšit velikost souboru, aniž by došlo k výrazné ztrátě kvality. Pokud potřebujete pomoci s kompresí obrázků, využijte náš komplexní nástroj pro kompresi obrázků.
Zvažte alternativní formáty souborů. Formáty PNG a JPEG jsou na webu standardem. Nicméně se objevují nové, efektivnější technologie, jako WebP a formáty SVG. SVG umí například automaticky měnit velikost podle obrazovky, což šetří zdroje potřebné pro načtení vizuálních prvků.

Optimalizace uživatelského zážitku pro mobilní zařízení vyžaduje promyšlený přístup. Impulzivní návrhy neberou v úvahu dlouhodobý dopad. Naopak, pečlivé plánování pomáhá budovat web s ohledem na mobilní uživatele od samého začátku.

Důležitá poznámka: V souladu s konceptem intuitivního mobilního designu není nutné v mobilních návrzích používat stejné vizuální komponenty jako na desktopu. Odstranění několika obrázků na pozadí a jejich nahrazení jednobarevným pozadím – na mobilu – rozhodně nepoškodí uživatelský zážitek. Vždy hledejte způsoby, jak ušetřit byť i malé množství dat.

#3: Předběžné načítání (Pre-loading) a Líné načítání (Lazy-loading)

Je nezbytné načíst všechny mediální soubory na stránce hned na začátku, když to může trvat dlouho? A je možné urychlit zobrazení externích stránek ještě předtím, než je uživatelé navštíví?

Nejprve se podívejme na předběžné načítání, známé také jako "nápovědy pro prohlížeč".

Předběžné načítání umožňuje stránce informovat prohlížeč o potenciálních navigačních možnostech. Uživatel může například přejít ze stránky A na stránku B.

Díky předběžnému načítání může prohlížeč vykreslit stránku B ještě předtím, než uživatel klikne na odkaz na stránce A.

Mějte na paměti, že předběžné načítání nemusí vždy fungovat a finální rozhodnutí je na prohlížeči. Faktory jako typ zařízení a šířka pásma jsou posuzovány individuálně.

Jaké jsou nejběžnější typy předběžného načítání?

Přednačtení. Prohlížeči se sdělí, že další navigační volbou bude pravděpodobně určitá adresa URL. Pokud prohlížeč souhlasí, automaticky uloží do mezipaměti důležité zdroje stránky, což urychlí načítání další stránky.
Předvykreslení. Zatímco přednačtení ukládá do mezipaměti pouze určité zdroje, předvykreslení uloží do mezipaměti celou stránku. Veškerý vykreslený obsah se uloží do paměti zařízení uživatele.
DNS-Prefetch. Předběžné načítání DNS vyřeší zadané DNS a nic víc. Díky tomu se v případě, že uživatel na vašem webu provede určitou akci, zkrátí čas potřebný k navigaci.
Předpřipojení. Stejně jako výše, ale navíc se vytvoří spojení a handshake s TCP a TLS.

Jak vypadají ukázky kódu pro předběžné načítání?

<link rel="dns-prefetch" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com">

<link rel="preconnect" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com">

<link rel="prefetch" href="folder/script.js" as="script">

<link rel="prerender" href="customURL.com/preview.html">

Protože předběžné načítání používá dynamické značky HTML, můžete předběžně načíst obsah jako Google Fonts nebo vytvořit vlastní skript pro předběžné načítání JavaScriptu ve WordPressu.

Mimochodem, pokud používáte WordPress, WP Rocket vám může s optimalizací vašeho webu pomoci.

Teď, když už víte víc o předběžném načítání, pojďme se podívat na další důležitou věc: líné načítání.

Co je líné načítání?

Kdykoli navštívíte novou webovou stránku, prohlížeč načte veškerý obsah stránky a použije ho k zobrazení. Většinou jste nuceni stáhnout celou stránku, i když vidíte jen malou část obsahu.

Při líném načítání prohlížeč načítá pouze obsah, který je v danou chvíli vidět na obrazovce. Pokud jsou na stránce obrázky nebo videa s velkým objemem dat, tyto soubory se načtou až tehdy, když se uživatel posune dolů a dostane se k nim.

Pokud se obáváte problémů se SEO, nemusíte mít strach. Společnost Yoast potvrdila, že Google indexuje stránky využívající líné načítání a vnímá ho jako pozitivní signál pro výkon.

Pro líné načítání doporučuji knihovnu Layzr.js, je jednoduchá a efektivní. Skript je aktivní i na domovské stránce projektu, takže můžete vidět, jak funguje v praxi. Uživatelé WordPressu najdou v repozitáři pluginů desítky pluginů s líným načítáním.

#4: Ukládání do mezipaměti

Ukládání do mezipaměti spočívá v uložení kopie webové stránky, kterou lze kdykoli rychle zobrazit. Stránky se ukládají do mezipaměti při první návštěvě. Když se pak nový uživatel pokusí o přístup na stránku, server místo generování nové verze zobrazí verzi uloženou v mezipaměti.

Cílem ukládání do mezipaměti je zrychlit webové stránky a snížit zatížení serveru. V závislosti na použitém řešení lze nastavit vlastní intervaly a spouštěče pro aktualizaci mezipaměti.

Mezi oblíbená řešení pro webovou mezipaměť patří Varnish, Squid a Memcached. Na trhu je ale mnoho dalších, zejména pokud používáte WordPress.

Můžete také zvážit používání CDN.

Co je CDN (Content Delivery Network)?

Síť pro doručování obsahu využívá celosvětovou síť serverů k zajištění rychlého doručování obsahu. CDN dokáže rychle distribuovat všechny typy obsahu, jako jsou videa, obrázky, skripty JavaScript atd. V současné době většina webového provozu prochází nějakou formou CDN.

Je třeba mít na paměti, že CDN funguje nejlépe u webů s velkou návštěvností. Pokud máte jen několik tisíc návštěvníků měsíčně, zlepšení nemusí být výrazné. Nicméně, CDN je skvělým řešením pro zrychlení webových stránek, snížení nákladů na data, zvýšení dostupnosti obsahu a zlepšení bezpečnosti.

Pokud s CDN nemáte žádné zkušenosti, doporučuji vyzkoušet Cloudflare, které nabízí bezplatný tarif a je skvělou platformou pro začátek. Pokud Cloudflare nesplní vaše očekávání, podívejte se na náš článek o nejlepších poskytovatelích CDN na trhu.

#5: AMP (Accelerated Mobile Pages)

Projekt AMP od Google je optimalizace pro mobily na steroidech! AMP omezí vaše stránky na to nejzákladnější, aby bylo načítání superrychlé a čitelnost obsahu byla prioritou. Jak je rychlost stránky důležitá, dokázali byste se vzdát téměř okamžitého načítání?

Zní to skvěle, ale jak AMP funguje?

AMP je zjednodušená stránka HTML s určitými omezeními pro zobrazování obsahu. Výsledkem je rychlejší načítání a celkový výkon díky omezení spouštění skriptů a podobně.

JavaScript v AMP například nefunguje. Pokud ovšem nepoužijete knihovnu AMP JS z GitHubu. Použití této knihovny vám umožní dosáhnout určitých výsledků, jako je například zabránění blokování reklam. Pokud ale chcete dosáhnout maximálního výkonu, doporučuje se používat čisté AMP.

Zajímavé případové studie pro AMP:

#6: Testování před nasazením

Dnes už nemáte žádnou omluvu pro to, abyste neměli oddělené pracovní prostředí. Většina cloudových hostingů nabízí pracovní prostředí standardně. Informujte se u svého poskytovatele, jestli ho máte k dispozici.

Co je pracovní prostředí?

Nejrychlejší vysvětlení je, že se jedná o kopii vašeho stávajícího webu.

Tomuto webu se říká produkční web. Je to verze veškerého kódu, skriptů a obsahu, na kterém je váš web založen. Pracovní prostředí je kopií vašeho produkčního webu. Jsou to vlastně falešné stránky. V tomto pracovním prostředí můžete provádět změny a přidávat nové funkce bez toho, abyste narušili aktivní web.

Vzpomínám si na článek Ashley Harppové, Neztrácejte čas – testujte změny před nasazením.

Její pohled na to, jak sami sebe "podvádíme" abychom se vyhnuli odpovědnosti za chyby, je ukázkovým příkladem neochoty přijmout zodpovědnost za chyby. Ashleyin článek ale obsahuje i odkazy na užitečné nástroje pro nastavení místního pracovního prostředí.

Testování není tak děsivé, jak se zdá. Je to ale hodně děsivé, když omylem smažete celou databázi na produkčním serveru!

Závěrem

Optimalizace webu pro plynulý mobilní zážitek není nijak složitá. Stačí trochu odhodlání a ochota aplikovat metody, které jsme v tomto článku popsali. Pravděpodobně už víte o věcech, jako je ukládání do mezipaměti a líné načítání, ale co pracovní prostředí a předběžné načítání?

Doufám, že vám tento článek pomohl lépe pochopit současné možnosti optimalizace webových stránek pro mobilní zařízení.