DigiAge
Rychlost načítání webu je v současnosti (2021) důležitým parametrem hned z několika důvodů. Nejdříve ale obsah a něco málo z minulosti.
Rychlost načítání webových stránek se řeší snad již od počátku webu. Tehdy to bylo kvůli velmi pomalému připojení a nyní kvůli rychlému připojení, které ale není nikdy dost rychlé. Zejména tedy na mobilních sítích.
Když internet začínal, všichni byli na pomalé načítání zvyklí, ale s vývojem jsme se dostali na poměrně slušné časy, kdy se jednoduché weby zobrazily do několika málo vteřin. Pak ale přišel mobilní internet a všechno bylo jinak. Lidé byli namlsaní a očekávali to samé i na svém chytrém telefonu.
Drobné zpomalení paradoxně přinesly telefony i do světa desktopů právě prostřednictvím optimalizace pro chytrá mobilní zařízení. Znamenalo to totiž, že přibyl další kód pro přizpůsobení menším obrazovkám.
Situaci si uvědomil i největší hráč na poli vyhledávání – Google – který přišel s iniciativou #perfmatters. Zjednodušeně to znamená, že zavedl a dále zavádí různé parametry pro měření rychlosti načítání webu (nazývané Core Web Vitals) a přeneseně i uživatelského prožitku.
Možná si řeknete, že deset vteřin není zas tak dlouhá doba na zobrazení vaší oblíbené stránky, ale opak je pravdou. Výzkumy potvrdily, že pokud se web nenačte do tří vteřin, 53% uživatelů to nevydrží a odejde. To je poměrně šibeniční časový milník, ale věřte tomu, že to stihnout jde.
To je zajímavé. Hraje ale rychlost načítání ještě nějakou roli?
Mírný vliv má rychlost webu i na pozici ve výsledcích vyhledávání. To slovo „mírný“ platí, pokud se web nenačítá několik desítek vteřin. To Google ani uživatel opravdu nemají rádi.
V průběhu léta 2021 přichází další důvod, proč si stránky zrychlit. Je jím aktualizace vyhledávacího algoritmu Googlu s názvem Page Experience. Kromě měření uživatelského prožitku (a následného vlivu na pozici v SERP) půjde právě i o rychlost načítání vašich webových stránek.
Existuje několik nástrojů, ale my si ukážeme ty nejznámější. Shodou okolností jsou dva z nich od Googlu:
Lighthouse skóre pro desktopovou (vlevo) a mobilní (vpravo) verzi webových stránek
Nástroje mají i další odlišnosti a případy použití, ale to by bylo spíše na samostatný článek.
Tou největší brzdou (a to doslova) bývají při načítání webu obrázky. Pojďme se podívat jak právě obrázky a několik dalších parametrů optimalizovat pro rychlost:
O obrázky jsou bezpochyby největším žroutem dat a jejich celková datová velikost u některých webů mnohonásobně překračuje velikost samotného kódu.
U obrázků ještě zůstaneme. V současnosti (2021) je k dispozici několik formátů obrázků pro web.
Ty modernější (WebP, AVIF) vynikají několikanásobně menším objemem dat a jsou tedy pro rychlé webové stránky vhodnější. Je ale potřeba myslet i na starší prohlížeče, které tyto formáty neumí a je tak nutné dodat obrázky i ve standardních zajetých formátech typu JPG, PNG a GIF.
Skvělým online nástrojem pro tyto účely je aplikace Squoosh, kde v reálném čase nastavujete formát a parametry obrázků včetně míry komprese. Je tak možné najít nejlepší kompromis mezi dobrou kvalitou a datovou velikostí podle oka.
Nejlepším řešením co do objemu dat je formát SVG. Jde o vektorovou grafiku, takže ideální pro loga, ilustrace a podobně.
Pokud váš web obsahuje hodně obrázků (platí to zejména pro blogy), pak je vhodné se zamyslet nad použitím takzvaného lazy load, neboli zpožděného načítání obrázků.
Znamená to v jednoduchosti, že stahovat se budou jen ty obrázky, ke kterým se uživatel při skrolování blíží. Pokud tedy třeba přečte úvod článku a odejde, obrázky z prostředka a konce článku se mu nestáhnou.
To má jednak výhodu pro uživatele (na mobilním připojení to znamená menší spotřeba dat) a jednak pro majitele webu (webová stránka se načte v úvodu rychleji).
Lazy loading se může řešit externí knihovnou (oblíbená je LazySizes), nebo lépe (pro moderní prohlížeče) nativním parametrem loading=“lazy“ (používá se u elementů IMG a IFRAME).
Jde o novější protokol(y) pro komunikaci s webem, které jsou oproti starší verzi HTTP/1.1 rychlejší.
Řeší také spoustu vývojářských kliček, které bylo dříve nutné kvůli zrychlení webu dělat. Za všechny můžeme jmenovat třeba slučování CSS a JS souborů pro zmenšení množství dotazů na server. To už s HTTP/2 potřeba není.
Narychlo dělané weby, nebo weby kde se optimalizace rychlosti neřeší, mívají ten nešvar, že obsahují spoustu kódu navíc.
Nejčastěji to bývají různorodé JavaScriptové knihovny a styly, ze kterých se mnohdy na stránkách nepoužívá skoro nic.
Vždy před odevzdáním webu zákazníkovi je tedy dobré projít si jednotlivé soubory a minimálně přebytečný kód odstranit. Pomoci k tomu může méně známá část z Chrome DevTools zvaná Coverage.
Když programátoři píší kód, většinou ho formátují tak, aby byl přehledný a dobře čitelný. Můžete si to představit jako odstavce, tabulátory a mezery ve Wordu.
Formátovací prvky ale nepotřebuje pro zpracování souborů prohlížeč, a tak se mohou v produkční verzi souborů odstranit. Tomuto procesu se říká minifikace a kromě odstranění formátování obvykle umí i další specialitky na redukci velikosti kódu.
Vývojáři na to standardně používají nástroje ve svém softwaru, ale pro jednorázové použití dobře poslouží i webový minifkátor. Například Minifier.
Důležitou optimalizací, která ale zabere nejméně času, je nastavení komprimování souborů při přenosu. Ta zajistí snížení objemu přenesených dat, a tedy rychlejší načítání webu.
Nastavení se provádí na serveru a hostingy obvykle uživatelům dovolují tyto změny provést ve speciálním souboru, ke kterému mají přístup. Například pro Apache servery to je soubor „.htaccess“.
Souhrnně můžeme říci, že nastavenou komprimaci se vyplatí mít u všech „textových“ souborů (html, css, ale i pro vektorové jako svg). Obrázky už ze své podstaty datově komprimované jsou, takže jejich další komprimací se nic nezíská (pouze ztratí nějaký čas).
Vyplatí se také nastavit dobu uchování souborů v paměti prohlížeče uživatele, pokud už se jednou načtou. Pro každý typ souborů to lze nastavit zvlášť (opět v souboru .htaccess pro server Apache).
Doba uchování souborů v paměti prohlížeče (cache) se nastavuje na dobu předpokládané aktualizace jednotlivých typů souborů. Dělá se to pro to, že prohlížeč by nestahoval aktualizované soubory, pokud by v paměti měl jejich původní verze stále platné. Je ale možné vyřešit i toto, například pomocí doplnění názvu souboru o verzi (soubor.css?v=1.2). Prohlížeč při změně parametru stáhne soubor znovu, protože bude myslet, že se jedná o jiný.
Zejména pokud máte mezinárodní návštěvníky a větší objem přístupů, je dobré používat takzvané CDN (Content Delivery Network).
V jednoduchosti jde o umístění souborů webu na různých uzlech internetu, tak aby byly pro uživatele dostupné co nejblíže. Logicky to pak přináší zrychlení načítání.
Data do vašeho prohlížeče proudí ze serveru, takže určitý časový podíl padne kromě cesty k vám a zprocesování prohlížečem, také na zpracování a odeslání dat ze serveru.
Jak velká ta část bude, závisí na kvalitě a variantě hostingu. Při výběru je také dobré zvážit předpokládanou návštěvnost webu a variantu hostingu tomu přizpůsobit.