Proč se webová stránka dlouho načítá

Žijeme v rychlém světě a nechceme dlouho čekat. Při práci na internetu to platí dvojnásob. Dlouhé načítání webové stránky nás vytáčí a většinou již po pár vteřinách nenačtenou stránku opouštíme. Víte však, jaké jsou různé faktory, které se na načítání webové stránky podílí? Je jich celá řada.

Datová velikost načítané stránky

Čím je stránka větší, tím více dat je nutné stáhnout ze serveru do prohlížeče, aby se načetla. Stránka se skládá z mnoha prvků, které je možné optimalizovat. Největší podíl však většinou hrají obrázky a videa. Dále to ale může být příliš košatá struktura HTML kódu, tzn. DOM modelu, nebo použití velkého množství JavaScriptových a CSS knihoven.

Obrázky je možné optimalizovat různými způsoby, například

• místo klasických JPG a PNG formátů používat moderní WEBP formát
• řezat či zmenšovat obrázky do velikostí, které stránka zobrazuje
• pro různé velikosti obrazovky načítat správné velikosti obrázků
• používat tzv. lazy loading, který obrázky načte až po načtení zbytku stránky

Načítání velkého množství zdrojů

Každý soubor, který si pro svou práci musí stránka zvlášť stahovat ze serveru, zpomaluje načítání webové stránky. Těmito soubory jsou HTML dokument, CSS a JS soubory, obrázky, videa, fonty. Možností pro omezení počtu načtených souborů je několik, například

• použití systémových fontů
• vyřazení zbytečných obrázků, grafiky, knihoven
• sloučení a minifikace stylů a skriptů

Lokalita serveru, na kterém je web hostován

I když je web sám o sobě dobře optimalizovaný, může pomalé načítání způsobit naše geografická vzdálenost od serveru, na kterém je web hostován. Velké weby, které nabízejí obsah do celého světa proto používají různé techniky, jak geografickou vzdálenost překonat. Například je možné využít takzvaných CDN (content delivery network), které umožňují replikovat obsah webu mezi servery na několika místech po světě. Zdroje stránky se pak stahují z toho nejbližího serveru.

Někdy ale může hrát roli i samotná rychlost u poskytovatele připojení k internetu, tzv. ISP (internet servise provider). To pak záleží na tarifu služeb, které u něj máme sjednané. Weby se rovněž obecně déle načítají na mobilních zařízeních, protože mobilní síť je typicky pomalejší než ta klasická. Z toho důvodu je velmi důležité webovou stránku speciálně optimalizovat pro mobilní zařízení.

Nevhodná nebo žádná práce s cachí

Cache, neboli dočasná paměť, znamená udržení přednačteného obsahu na jiném místě, ze kterého je obsah možné získat rychleji. Cachí je několik typů. Základní dělení může být na serverovou a klientskou. Serverová cache umožnuje prohlížeči naservírovat již předpřipravený HTML kód, díky němuž není nutné volat serverové skripty zbytečně často. To je výhodné v případě, že se HTML stránka jednou vygeneruje a pak už se často nemění. Klientská cache dovoluje načítat některé zdroje z našeho počítače namísto ze serveru v případě, že jsme již stránku dříve navštívili a zdroje jsme si už stáhli. Správná politika expirace těchto zdrojů, nastavená na serveru, umožní neměnné zdroje ponechat v prohlížeči dlouhou dobu a naopak zdroje, které se často mění, expirovat často.

Neefektivní skripty na serveru

Každý dynamický web se skládá ze serverové části, jejímž úkolem je sestavit HTML stránku, případně dokument jiného formátu. Příliž složité nebo neefektivní výpočty nutné k sestavení stránky, nejenom že prodlužují odpověď serveru, ale rovněž vytěžují procesor serveru, na kterém je stránka hostovaná. V případě řešení třetích stran, jako je například WordPress, to může způsobovat přemíra použitých pluginů, či neefektivní kód pouze jediného pluginu. U vlastního řešení je nutné dbát na jednoduchost a čistotu kódu, omezovat či seskupovat dotazy do databáze, omezovat použití cyklů, využívat vestavěných metod použitého backendového jazyka atd.

Skripty v prohlížeči zbytečně blokující vykreslení obsahu

Neesenciální skripty, jako jsou například různé analytické nástroje, nastavování událostí či načítání externích reklam, je nutné vložit v HTML dokumentu až za samotný viditelný obsah, tzn. typicky před ukončovací znak těla HTML dokumentu.

Nevhodná přesměrování

Nastavení webové stránky by mělo eliminovat zbytečná přesměrování. Typicky nevhodné přesměrování je v kombinaci s HTTPS a www prefixem v případě přístupu na stránku bez prefixu www a přes protokol HTTP. Nejprve dojde k přesměrování z http://example.com na http://www.example.com a vzápětí dojde k přesměrování na https://www.example.com. Nejlépe je toto podchytit při jediném přesměrování. Vhodné je rovněž využít tzv. HSTS (HTTP Strict Transport Security).

Nepoužitá komprese

Dalším vítaným vylepšením je nastavení komprese webové stránky před odesláním prohlížeči. Takováto stránka má menší velikost, což urychluje přenos stránky po internetu. Komprese se dá typicky nastavit v konfiguraci webového serveru.