Zajistili jste, aby byl váš web optimalizovaný pro mobily?
Věděli jste, že Google zavedl novou zásadu s názvem Mobile-First?
Stále více uživatelů webu se odklání od stolních počítačů a místo toho prohlíží a nakupuje pomocí svých mobilních zařízení.
Responzivní web design umožnil vytvářet weby, které fungují na všech platformách na stejné úrovni. Ale i tak je responzivní design jen zlomkem strategií optimalizace uživatelského prostředí pro mobilní zařízení.
Pokud chcete skutečnou optimalizaci výkonu, budete muset zvážit i jiné alternativy.
To je důvod, proč je kladen tak velký důraz na vytváření vašich stránek jako a první zkušenost s mobilem. Jednoduše řečeno, mobile-first znamená, že váš design a obsah jsou nejprve optimalizovány pro mobilní uživatele.
Jak již bylo řečeno, tento příspěvek není o navrhování zcela nového webu. Místo toho se podíváme na některé základní principy designu především pro mobilní zařízení. A věnujte nějaký čas zaměření na technické aspekty pro optimalizaci uživatelského dojmu pro vaše mobilní uživatele.
Table of Contents
#1: Navrhování s ohledem na mobilní zařízení
Web je postaven z velké části na principu obsluhy desktopových uživatelů. Skutečný web, skutečný pokrok v technologiích, se nejlépe zobrazí na krásném celoobrazovkovém displeji. Chytré telefony a další mobilní zařízení jsou však věc a je čas začít se přizpůsobovat konceptu mobilního designu.
Jaké další designové prvky byste měli implementovat ve svých webových návrzích zaměřených na mobily kromě rozumného responzivního designu?
- Stanovení priorit. Mobilní obrazovky jsou omezeny dostupným zobrazovacím prostorem. Mobilní obrazovky také prezentují obsah vertikálním způsobem, na rozdíl od mnohem širší – horizontální – struktury pro stolní počítače. To znamená, že musíte navrhovat pomocí stanovení priorit. Které prvky jsou pro uživatele nejdůležitější? Pokud existují tlačítka CTA, jak snadno je uvidí mobilní uživatel?
- Obsah na prvním místě. Druhá barva. S mobilním designem můžete dělat zajímavé věci, ale rozhodně ne v rámci desktopového designu. Dejte tedy přednost obsahu. Udělejte svou kopii a další části obsahu snadno čitelné a přístupné. Mobilní obrazovka je mnohem méně tolerantní k rušivým vizuálním prvkům.
- Snadná navigace. Na mobilním zařízení nemůžete jen tak nikam kliknout a vrátit se na domovskou stránku. Pokud ovšem tento typ navigace neplánujete předem. A měli byste. Experimentujte s widgety Scroll-to-Top, ale také s hladkými nalepovacími záhlavími, kdykoli je to možné.
Nejlepší způsob, jak zkontrolovat, zda to děláte správně, je použít telefon (já to dělám pořád!) a navštívit vaše stránky. Důkladně prozkoumejte, jak se věci cítí a plynou spolu.
Pokud sedíte v kavárně nebo čekáte na let na letišti, šťouchněte někoho do ramene a zdvořile ho požádejte, aby za vás zkontroloval vaše stránky. Pak se pohodlně usaďte a poslouchejte jejich zpětnou vazbu. Většinou sami sebe překvapíte tím, jak lidé vnímají uživatelský dojem z vašeho webu.
#2: Optimalizace zdrojů; obrázky, ikony atd.
Jak často se vám stává, že používáte vizuály pro osobní preference a ne pro UX? Stává se to, a pokud se chystáte jít kreativně, vyplatí se pochopit, jak optimalizace médií funguje.
Vizuální prvky, jako jsou fotografie, ilustrace, ikony a videa, jsou největšími spotřebiteli šířky pásma na webových stránkách.
Průměrná velikost webové stránky v roce 2018. Seřazeno podle odvětví a různých zemí.
I když není stanovena velikost webové stránky, kterou musí splňovat každý, je selský rozum, že menší velikost webové stránky znamená rychlejší načítání.
Jak tedy můžete ze svého vizuálního obsahu zkrátit pár kB nebo dokonce MB navíc?
- Změňte velikost obrázků. Zní to jednoduše, že? Nemohu počítat s tím, kolikrát jsem procházel mobilní web, jen aby se mi na pozadí načetly obrázky 1980 x 1200. Místo toho by měly být v případě potřeby uvedeny jako alternativní odkazy fotografie v plné velikosti. Změna velikosti může snížit až 80 % celkové velikosti obrázku, v závislosti na požadovaných rozměrech. U mobilních zařízení však nikdy není důvod překračovat rozsah maximálně 600–700 pixelů.
- Snižte velikost souboru pomocí komprese. Komprese/optimalizace obrazu je proces použití softwaru třetí strany ke snížení počtu barev přítomných v obraze. Toho lze dosáhnout do té míry, že vaše fotografie neztratí svou přirozenou kvalitu, ale může se drasticky zmenšit velikost souboru. Pokud potřebujete pomoc s komprimací obrázků, nehledejte nic jiného než náš komplexní soubor nástrojů pro kompresi obrázků.
- Prozkoumejte alternativní formáty souborů. Každý slyšel o souborových formátech PNG a JPEG. Jsou to totiž de facto obrazové standardy na webu. Ale ne na dlouho. Nejnovější a nejlepší technologie v poskytování digitálního obrazu se točí kolem WebP a formáty souborů SVG. SVG například umí automaticky měřítko na velikost obrazovkycož snižuje počet zdrojů potřebných k načtení konkrétních vizuálních komponent.
Optimalizace uživatelského dojmu pro mobily je jen důmyslná věc. Navrhování impulzivně znamená, že nezvažujete dlouhodobé účinky svých rozhodnutí. Zatímco ohleduplný přístup vám pomůže od základu budovat s ohledem na mobilní uživatele.
bystrý: V souladu s konceptem intuitivního mobilního designu nemusíte ve svých mobilních návrzích znovu používat stejné vizuální komponenty. Odstranění několika obrázků na pozadí a jejich nahrazení barevným pozadím – na mobilu – nepoškodí uživatelský dojem. Vždy hledejte způsoby, jak ušetřit i to nejmenší množství šířky pásma.
#3: Pre-loading a Lazy-loading
Je nutné načíst všechny mediální zdroje na stránky, jejichž čtení zabere značné množství času? A může pomoci vykreslit externí stránky dříve, než je uživatelé navštíví?
Podívejme se nejprve na preloadery, známé také jako tipy pro prohlížeč.
Preloadery jsou způsoby, jak může stránka informovat prohlížeč o potenciálních možnostech navigace. Uživatel může například navštívit stránku B ze stránky A.
Díky předběžnému načítání může uživatel vykreslit stránku B před kliknutím na navigační odkaz na stránce A.
Mějte na paměti, že předběžné načítání ne vždy funguje a konečné 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 preloaderů?
- Přednačtení. Tento typ naznačuje, že další navigační volbou bude s největší pravděpodobností konkrétní adresa URL. A pokud prohlížeč vyhoví požadavku, automaticky uloží do mezipaměti důležité zdroje stránky, což zase urychlí načítání další stránky.
- Předvykreslení. Zatímco výše uvedený typ načítá pouze určité zdroje, předběžné vykreslení uloží do mezipaměti celou stránku. Veškerý vykreslený obsah je uložen v paměti zařízení uživatele.
- DNS-Prefetch. Předběžné načítání DNS vyřeší zadaný DNS a nic jiného. V důsledku toho, pokud uživatel na vašem webu provede konkrétní „otočku“, v podstatě zkrátíte čas potřebný k navigaci.
- Předpřipojení. Stejné jako výše, ale také vytváří spojení a handshake s připojeními TCP a TLS.
Jaké jsou příklady kódu pro preloadery?
<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 preloadery používají dynamické značky HTML, můžete předem načíst obsah jako Google Fonts nebo vytvořte vlastní skript pro předběžné načítání aktiv JavaScriptu ve WordPressu.
BTW, pokud používáte WordPress, pak WP raketa vám může pomoci s tím, že přebije váš web.
Nyní, když víte více o preloaderech, pojďme si promluvit o dalším horkém tématu: líné načítání.
Co je líné načítání?
Kdykoli navštívíte novou webovou stránku, ať už jde o příspěvek na blogu nebo statický web, prohlížeč načte celý obsah stránky a poté jej použije jako nativní procházení. Ve většině případů jste nuceni stáhnout celou stránku, aniž byste viděli dále než nad okrajem.
Zatímco při líném načítání je prohlížeči řečeno, aby načetl (vykreslil) obsah, který je pouze v rámci zobrazované oblasti uživatele. Pokud jsou tedy na určitou stránku přidány fotografie nebo videa citlivá na velikost, tyto soubory se zobrazí pouze tehdy, když obrazovka prohlížeče dosáhne této části webu.
A pokud se obáváte potenciálních problémů se SEO, nemějte obavy. Yoast to potvrdil Google vykresluje stránky, které využívají líné načítánía vidí to jen jako další signál zlepšení výkonu.
Moje doporučení pro knihovnu k použití je Layzr.js — jednoduché a efektivní líné načítání vašich obrázků! Skript je aktivován také na domovské stránce projektu, takže můžete vidět, jak funguje v reálném čase. Uživatelé WordPressu mohou ve veřejném úložišti pluginů najít desítky pluginů s líným načítáním.
#4: Ukládání do mezipaměti webu
Webové ukládání do mezipaměti je založeno na konceptu zkopírování verze stránky, která pak může být kdykoli prezentována uživateli. Stránky se ukládají do mezipaměti při první návštěvě stránky webu. Když se pak nový uživatel pokusí o přístup na tuto stránku, webový server místo poskytování živé verze zobrazí verzi uloženou v mezipaměti.
Cílem jakéhokoli ukládání do mezipaměti je zlepšit výkon webových stránek a snížit potřebné back-endové zdroje. V závislosti na vašem řešení ukládání do mezipaměti můžete nakonfigurovat vlastní intervaly a další události založené na spouštěči.
Některá z nejpopulárnějších jmen ve webové mezipaměti jsou Varnish, Squid a Memcached. Ale buďte si jisti, že na trhu je spousta dalších řešení, zvláště pokud jste uživatelem WordPressu.
Můžete také zvážit přihlášení k CDN.
Co je to CDN (Content Delivery Network)?
Síť pro doručování obsahu využívá globální cluster distribuovaných serverů k poskytování neuvěřitelně rychlého doručování obsahu. A CDN dokáže rychle přenést všechny oblíbené typy obsahu na webu: video, fotografie, JavaScript atd. V dnešní době většina webového provozu prochází nějakou formou CDN.
Jedna věc, kterou je třeba si pamatovat u sítí pro doručování obsahu, je, že fungují nejlépe, když jsou použity na vysoce poptávaných webových stránkách. Pokud tedy obsluhujete jen několik tisíc návštěvníků měsíčně, vidět znatelné zlepšení může být obtížné. Přesto je CDN skvělým řešením pro zlepšení doby načítání vašich webových stránek, snížení nákladů na šířku pásma, zvýšení dostupnosti obsahu a posílení celkové bezpečnosti.
Pokud nemáte předchozí zkušenosti s CDN, doporučujeme vyzkoušet mračna — poskytují bezplatný plán a je to skvělá platforma, se kterou se můžete začít učit. A pokud Cloudflare nesplní vaše očekávání, podívejte se na náš příspěvek pro nejlepší bezplatné poskytovatele CDN na trhu.
#5: AMP (Accelerated Mobile Pages)
Google projekt AMP je mobilní optimalizace na steroidech! AMP v podstatě omezí vaše stránky na to nejnutnější, aby poskytoval superrychlé načítání, ale také aby byla čitelnost obsahu prioritou. Vzhledem k tomu, jak důležitá je rychlost stránky, dokážete sebrat odvahu říci ne téměř okamžitým dobám načítání?
Dobře, všechny ty hlášky zní skvěle, ale jak funguje AMP?
AMP je jednoduchá stránka HTML s určitými omezeními pro to, jaký druh obsahu lze zobrazit. To vede k mnohem rychlejší době načítání a celkovému výkonu kvůli omezení pro provádění skriptů a podobně.
JavaScript například nefunguje s AMP. Pokud samozřejmě nepoužijete Knihovna AMP JS dostupná na GitHubu. Použití knihovny JS vám umožní dosáhnout určitých výsledků, jako je vyhnout se blokování reklam, ale pokud chcete skutečný výkon, pak jsou nezpracované AMP tou správnou cestou.
Zajímavé případové studie pro AMP:
#6: Před provedením test
V dnešní době neexistuje žádná omluva, proč nemáte pro svůj projekt samostatné pracovní prostředí. Většina cloudových hostingových platforem nabízí ve výchozím nastavení pracovní prostředí, takže se u svého poskytovatele informujte, zda k nějakému máte přístup.
Co je to inscenační prostředí?
No, nejrychlejší způsob, jak to vysvětlit, je podívat se na váš aktuální živý web.
Tento web je to, čemu říkáte produkční web – verze veškerého kódu, skriptů a obsahu, na kterých je váš web založen, v reálném čase. Pracovní prostředí je v tomto kontextu kopií vašeho produkčního webu. Falešné stránky, chcete-li. A v tomto pracovním prostředí můžete provádět změny nebo přidávat nové funkce, aniž byste narušili svůj aktivní web.
Vždy si vzpomenu na příspěvek Ashley Harpp, Neztrácejte čas – před provedením otestujte změny.
Její názor na to, jak se „podvádíme“, abychom se vyhnuli určitým věcem, je ukázkovým příkladem toho, že nechceme nést odpovědnost, když uděláme chybu. Přesto Ashleyho příspěvek obsahuje i odkazy na užitečné nástroje pro nastavení lokálního stagingového prostředí.
Testování není tak děsivé, jak to zní. Ale je to sakra děsivé, když omylem smažete celou databázi na produkčním serveru!
Závěrečné prohlášení
Optimalizace vašeho webu pro bezproblémový mobilní zážitek není tak složitá. Vše, co potřebujete, je trochu odhodlání a ochotně aplikovat metody nastíněné v tomto příspěvku. Je pravděpodobné, že už znáte věci jako ukládání obsahu do mezipaměti a líné načítání, ale co pracovní prostředí nebo preloadery?
Doufejme, že tento příspěvek vnesl trochu světla do současného stavu optimalizace webových stránek pro mobily.