Responzivní design stránek je v současné době pro většinu webů nezbytností. Nejen že pozitivně ovlivňuje uživatelskou spokojenost návštěvníků, kteří na vaše stránky přijdou z mobilních zařízení, snižuje míru okamžitého opuštění stránky a zvyšuje konverzní poměr, ale funguje i jako významný SEO faktor. Přestože se bez responzivního designu neobejdete, pro zajištění úspěchu vaší stránky toho můžete udělat mnohem více.
Podíl uživatelů, kteří přistupují na internet prostřednictvím mobilních telefonů a tabletů, neustále roste. Na tuto situaci zareagoval i Google, který posuzuje stránky podle toho
, jak se chovají na mobilních zařízeních. Toto opatření, známé jako
"Mobile first index" učinilo z responzivního designu a zvýšení rychlosti načítání webu prioritu pro všechny webmastery, kteří to se svými stránkami myslí vážně.
Bohužel, přesto že výkon stránky na mobilních zařízeních je pro hodnocení webové stránky naprosto klíčový, stále se můžete setkat se spoustou stránek, které se načítají velice pomalu.
Podle statistik, více než 70 procent webových stránek potřebuje přes 7 sekund k tomu, aby dokázalo zobrazit obsah. Počet lidí, kteří tak dlouho čekat nevydrží, ale s každou sekundou dramatiky narůstá.
Nejčastější chyby mobilních stránek
- Objemné a pomalé javascripty a soubory kaskádových stylů (CSS)
- Příliš mnoho přesměrování
- Příliš velké grafické soubory a obrázky
- Obtěžující reklamy
Odstranění následujících problémů dokáže významným způsobem zrychlit vaši stránku a zajistit jí větší spokojenost návštěvníků a tím i lepší hodnocení vyhledávačů.
Co je to responzivní web design?
Webové stránky s responzivním web designem využívají
fluidního zobrazení a kaskádových stylů k vykreslování obrázků a prvků na stránce v závislosti na velikosti obrazovky použitého zařízení. To přináší oproti jiným řešením mobilních stránek (jako je například samostatná doména pro mobilní obsah) mnoho výhod.
Veškerý obsah se nachází na jednom URL, což je velká výhoda při případných úpravách
Pomocí CSS můžete nastavit zobrazení pro všechna možná
rozlišení obrazovky, což zajistí, že vaše stránka bude vždy vypadat hezky.
Responzivní design je levnější než vytváření samostatných mobilních domén a vyžaduje méně úsilí.
Stačí však nasazení responzivního designu pro zajištění úspěchu? Responzivní web design se na webu pomalu stává standardem, ale jak pomalu narůstá konkurence, vyvstává otázka, co dál? Pokud budou mít všechny weby responzivní design, v čem bude
vaše konkurenční výhoda?
Responzivní design neslouží primárně ke zvýšení rychlosti stránek, ale ke zvýšení komfortu a uživatelské spokojenosti, což jsou společně s rychlostí načítání velmi důležité faktory pro
hodnocení stránky vyhledávači. Rychlost načítání stránek je totiž v současnosti jedním z nejdůležitějších
SEO faktorů, který ovlivňuje uživatelskou spokojenost, snižuje míru okamžitého opuštění stránky a tím velice pozitivně ovlivňuje SEO.
Co jsou to AMP stránky?
AMP stránky jsou open-source iniciativou Googlu, která si klade za cíl vytvořit co nejrychlejší webové prostředí pro uživatele mobilních zařízení. Jedná se vlastně o zjednodušené verze stránek, které jsou optimalizované pro rychlé načítání na mobilních telefonech a které společně s responzivním designem dokážou vytvořit skutečně rychlý a uživatelsky příjemný mobilní web.
AMP stránky se načítají velmi rychle díky optimalizaci kódu, ukládání do cache a CDN Googlu.
AMP stránky jsou ideální pro autory blogů a zpravodajských webů. Podporuje je v současné době většina vyhledávačů a dokonce i reklamy Google Ads. Počet domén používajících systém AMP neustále roste a mnozí vydavatelé zaznamenali po přechodu na AMP ohromující úspěch. Podle informací Googlu, 90 procent majitelů stránek které používají tento systém, zaznamenalo zvýšení aktivity uživatelů na stránkách a většina také pozoruje zvýšení průměrného zisku na jednoho návštěvníka.
Google s navíc netají tím, že
AMP stránky upřednostňuje. Není divu. Zvýšená rychlost načítání má obrovský dopad na spokojenost uživatelů a to je kritérium, na kterém Googlu záleží nejvíce.
Další možnosti zrychlení webových stránek
Přestože se AMP stránky načítají dvojnásobnou rychlostí oproti běžným stránkám, mají i několik nevýhod. Jedná se zejména o zjednodušený design, a v případě, že kromě AMP stránek chcete mít i stránky klasické, je nutné udržovat dvě verze obsahu. Existují však i jiné možnosti, jak
rychlost načítání stránky zvýšit bez použití AMP.
Optimalizace obrázků
Jedním z hlavních příčin pomalého načítání stránek jsou příliš velké obrázky. Pro uživatele webu většinou není důležité, že je obrázek ve full HD rozlišení, obzvláště na mobilním telefonu. Pokud nahrajete na web obrázek
ve vysokém rozlišení, a poté jej zmenšíte v kódu pomocí atributů width a height, prohlížeč stejně bude muset stáhnout celý obrázek, což načítání velice zpomalí. Místo toho nahrávejte na web obrázky v tom rozlišení, v jakém se bude na stránce zobrazovat. U responzivního designu můžete použít
více verzí obrázku o různých velikostech. Pokud z nějakého důvodu potřebujete mít na stránkách obrázky s vysokým rozlišením, použijte zmenšené náhledy.
Lazy loading
Pro nahrávání obrázků můžete použít i takzvaný
"lazy loading" který spočívá v přednostním načítání prvků, které se nacházejí ve viditelné části obrazovky.
Optimalizace CSS
Některé CSS soubory mohou mít tisíce řádků kódu, což
zpomaluje jejich načítání. Prohlížeč totiž musí nejprve celý soubor CSS stáhnout, až pak může zobrazit stránku. Ne všechny CSS styly jsou však pro správnou funkci stránky nezbytné. Měli byste proto rozdělit styly na důležité a méně důležité, a ty důležité načítat v samostatném CSS souboru jako první. Ty méně důležité můžete načíst později, tak aby neblokovaly načítání stránky. Nejdůležitější CSS styly sloužící k zobrazení obsahu nad ohybem můžete navíc vložit
přímo do HTML kódu stránky.
Zapnutí mezipaměti (cache)
Aby se stránka nemusela generovat pro každého návštěvníka znovu, umožnují některé CMS
použití mezipaměti. Při prvním načtení stránky se do mezipaměti uloží statická verze stránky, která se posléze zobrazuje dalším návštěvníkům. Načítán stránky s tímto způsobem urychlí až o desítky procent.
Rychlost načítání stránky je v současné době, kdy se mobily stávají nejčastějším zařízením, ze kterého lidé přistupují k internetu, naprosto zásadní. Pokud se vaše stránka načítá déle než 3 sekundy, 53 procent návštěvníků z mobilních telefonů nevydrží čekat a stránku raději zavře. S každou další vteřinou toto číslo
narůstá o dalších 10 procent. Snažte se proto využít každé příležitosti, jak vaši stránku zrychlit. Každá sekunda se totiž počítá a pomůže vám nejen zlepšit umístění ve vyhledávačích, ale i zisk vaší stránky.
