Jestliže jste změřili rychlost svého webu a zjistili, že nedosahuje do ideálních výšek, je načase ji začít optimalizovat. Podívejte se, jak rychlost webu řešit. Přinášíme vám konkrétní body, díky kterým rychlost vašeho webu můžete zlepšit.
V minulém díle jsme se zabývali tím, proč rychlost webu vůbec řešit a jaké jsou základní ukazatele toho, že vám web nešlape tak, jak by měl. Jak rychlost webových stránek změřit? Kde mám rychlost webu zjistit? To vše najdete v našem prvním díle o rychlosti načítání webu.
Můžeme také provádět i cachování některých souborů, tedy jejich uložení v mezipaměti. Uživatel si jednoduše uchová po nějakou dobu určité soubory a při opětovném navštěvování vašeho webu nemusí pokaždé znovu stahovat ty stejná data.
Proto je třeba dodávat obrázky právě v takovém rozměru, v jakém je potřebujeme, a ne ve větším. Měli bychom používat obrázky ve formátu podle použití. Například pro ikonky nebo tam, kde se nachází jednoduchá grafika, používáme vektorovou grafiku, tedy formát svg, který je velmi malý.
Další obrázky a fotografie na stránkách lze minifikovat, tedy snížit jejich velikost, mnohdy o 50 až 70 %, bez znatelné ztráty na kvalitě.
Další technikou, která má vliv na zvýšení rychlosti, je dodatečné načítání obrázků. V momentě, kdy přijde uživatel na váš web, načte se mu právě ten obsah, který vidí a který potřebuje k funkčnosti webu. Získá tak rychleji načtený, fungující web a až se ve stránce odsune na obsah níže, tak se mu tento obsah donačte.
Jedním z velice úspěšných způsobů je také načítání velikosti obrázků podle zařízení, kdy máme vygenerované různé velikosti obrázků pro různá zařízení. Např. pro telefon 200 × 200 px, pro tablet 500 × 500 px a pro stolní počítač 800 × 800 px. Pokud uživatel přistoupí na web ze svého chytrého telefonu, stáhne se mu pouze obrázek ve velikosti 200 × 200 px a nemusí stahovat veliký obrázek, který by se mu stejně následně zmenšil.
Podobným způsobem můžeme pracovat s JavaScriptem ve stránce. Nejdůležitější je hlavně, aby tento kód neblokoval vykreslení stránky a načítal se jako poslední nebo asynchronně. Nejčastěji se stává, že web zpomalují externí skripty třetích stran (např. Smartsupp, Facebook a jiné). Do jisté míry může být prevencí nasazování těchto kódů přes Google Tag Manager, který umí částečně vyhodnocovat jejich správně načítání a zabránit blokování obsahu a zpomalování webu.
V minulém díle jsme se zabývali tím, proč rychlost webu vůbec řešit a jaké jsou základní ukazatele toho, že vám web nešlape tak, jak by měl. Jak rychlost webových stránek změřit? Kde mám rychlost webu zjistit? To vše najdete v našem prvním díle o rychlosti načítání webu.
Jak řešit rychlost?
Jestliže jste změřili rychlost svého webu a zjistili, že nedosahuje do ideálních výšek, je načase ji začít optimalizovat.Nasazení protokolu HTTP/2
Protokol HTTP/2 je nová verze internetového protokolu pro komunikaci s www servery, která umožňuje razantní urychlení webů.GZIP komprese a cachování souborů
Při použití GZIP komprese můžeme snížit velikost přenášených dat mezi serverem a klientem. Princip je ve zkratce takový, že server před odesláním uživateli komprimuje některé soubory, poté je ve zmenšené velikosti odešle a následně si je klientův prohlížeč zpět dekomprimuje a interpretuje uživateli. Dochází ke snížení přenosové velikosti souborů a tím ke zvýšení rychlosti.Můžeme také provádět i cachování některých souborů, tedy jejich uložení v mezipaměti. Uživatel si jednoduše uchová po nějakou dobu určité soubory a při opětovném navštěvování vašeho webu nemusí pokaždé znovu stahovat ty stejná data.
Obrázky – jejich formát, velikost, způsob načítání a další
Při zrychlování vašeho webu lze udělat velký pokrok právě díky správnému zacházení s obrázky. Pokud použijeme správný formát obrázků, správnou velikost a také jejich zpracování, můžeme ušetřit velký objem dat.Proto je třeba dodávat obrázky právě v takovém rozměru, v jakém je potřebujeme, a ne ve větším. Měli bychom používat obrázky ve formátu podle použití. Například pro ikonky nebo tam, kde se nachází jednoduchá grafika, používáme vektorovou grafiku, tedy formát svg, který je velmi malý.
Další obrázky a fotografie na stránkách lze minifikovat, tedy snížit jejich velikost, mnohdy o 50 až 70 %, bez znatelné ztráty na kvalitě.
Další technikou, která má vliv na zvýšení rychlosti, je dodatečné načítání obrázků. V momentě, kdy přijde uživatel na váš web, načte se mu právě ten obsah, který vidí a který potřebuje k funkčnosti webu. Získá tak rychleji načtený, fungující web a až se ve stránce odsune na obsah níže, tak se mu tento obsah donačte.
Jedním z velice úspěšných způsobů je také načítání velikosti obrázků podle zařízení, kdy máme vygenerované různé velikosti obrázků pro různá zařízení. Např. pro telefon 200 × 200 px, pro tablet 500 × 500 px a pro stolní počítač 800 × 800 px. Pokud uživatel přistoupí na web ze svého chytrého telefonu, stáhne se mu pouze obrázek ve velikosti 200 × 200 px a nemusí stahovat veliký obrázek, který by se mu stejně následně zmenšil.
Práce s CSS a JavaScript ve stránce
Pro kaskádové styly platí, čím méně zdrojů, tím lépe, nemusí to tak být ale vždy. Jedním způsobem je tedy tyto styly minifikovat a dostat je pouze do jednoho souboru a ten patřičně cachovat a pouze pokud dojde k jejich změně, tak uživateli stáhnout nový soubor. Jiným způsobem můžou být tzv. kritické CSS, kdy se snažíme minifikované styly rozkouskovat do menších souborů, v základu stáhnout a vykreslit pouze ty styly, které uživatel v dané chvíli potřebuje a postupně mu již asynchronně donačítat další. Například pokud vstupní stránkou bude homepage, potřebujeme zde tyto styly, ale vůbec zatím nepotřebujeme speciální styly pro detail produktu. Ty se stáhnou až ve chvíli, kdy tuto stránku uživatel navštíví. Ušetříme tím tedy množství stahovaných dat v jednu jedinou chvíli a rozdělíme do postupného načítání. Tímto se zpříjemní celkový pocit uživatele z doby načítání jednotlivých stránek.Podobným způsobem můžeme pracovat s JavaScriptem ve stránce. Nejdůležitější je hlavně, aby tento kód neblokoval vykreslení stránky a načítal se jako poslední nebo asynchronně. Nejčastěji se stává, že web zpomalují externí skripty třetích stran (např. Smartsupp, Facebook a jiné). Do jisté míry může být prevencí nasazování těchto kódů přes Google Tag Manager, který umí částečně vyhodnocovat jejich správně načítání a zabránit blokování obsahu a zpomalování webu.
Závěr
V závěru můžeme shrnout, že rychlost vašeho webu je velice důležitá a nesmí se opomíjet. Může totiž rozhodovat o tom, jakým směrem se váš web či e-shop bude vyvíjet. Proto si rozhodně zjistěte, jak je na tom právě ten váš.