background design element dropbackground design element dropbackground design element drop

Rychlost webu: jak zrychlit načítání webových stránek?


Vít Uličný
Aktualizováno:06.07.2021· 14 min. čtení
Facebook iconTwitter iconLinkedIn icon

Rychlost načítání webu má zásadní podíl na hodnocení vyhledávačů a uživatelském zážitku návštěvníků. Ovlivňuje tedy nejen pozice ve výsledcích vyhledávání, ale i míru konverzí. Není proto dobré pomalé načítání stránek přehlížet a myslet si, že rychlý internet a moderní prohlížeče zvládnou vše za vás. Stejně tak není čeho se obávat, zrychlení webových stránek nemusí být tak složité a komplikované, jak se může zdát.

Proč je rychlost webu důležitá?

Důvody jsou dva. Prvním jsou samotní lidé, respektive uživatelé, a tím druhým, odvozeným důvodem, jsou stroje neboli vyhledávače. Například v případě Googlu je rychlost načítání webových stránek již několik let nedílnou součástí rankování či hodnocení webů.

Rychlé webové stránky pro vyhledávače

Vyhledávače se dívají na to, jak rychle se načítají webové stránky a na základě toho pak upřednostňují rychleji načtené stránky v SERP (výsledcích vyhledávání). Důvod je jednoduchý. Čím rychleji načtený web, tím spokojenější uživatel, který něco hledal. A čím spokojenější uživatel, tím větší pravděpodobnost, že opět přijde něco vyhledat.

jak zrychlit načítání webových stránek

Rychlé webové stránky pro lidi

Lidé očekávají rychlé weby. Všechno chtějí mít či vědět hned, a jakmile jim to nedopřejete, tak přejdou ke konkurenci, která má rychlost webu optimalizovanou na dostatečnou úroveň.

V dnešním světě se počet informací neustále zvyšuje a s tím se zvyšuje i počet nerelevantních informací, které je potřeba rychle odfiltrovat. Lidé zkracují čas, který stránce věnují – typicky ji ani nečtou celou. A pokud většinu toho času zabere její načítání, tak nemá tento web šanci obstát.

Jak provést test rychlosti webu?

Pokud hledáte způsoby, jak zrychlit načítání webový ch stránek, tak jste již pravděpodobně zaznamenali, že u vás nějaký problém s rychlostí existuje. Nikdy ale neuškodí si své domněnky nebo výsledky z již provedených testů ověřit znovu. K testování můžete použít například tyto nástroje:

  • PageSpeed Insight – nástroj přímo od Googlu, který vaše stránky ohodnotí a vy si můžete udělat obrázek o stanovisku vyhledávače.
  • Pingdom Tools – nástroj umožňující provést test rychlosti webu z nejrůznějších míst po světě. 
  • GTMetrix – nástroj reflektující celkový stav webu s možností exportu výsledků do PDF.
  • Lighthouse – doplněk pro prohlížeč Google Chrome, který vám po navštívení stránky zobrazí její statistiky. Pomáhá obecně s optimalizací výkonu.

Jak zrychlit načítání webových stránek?

Pravděpodobně každý podnikatel nebo zakladatel startupu má zájem na tom, aby bylo pomalé načítání webu vyřešeno. Problematiku rychlosti načítání webových stránek lze rozdělit do několika vrstev:

  • Vrstva webového serveru, databáze a webové aplikace. 
  • Vrstva samotného HTML, CSS, a JavaScript kódu a jeho vytvoření. 
  • Následně přenos k uživateli na jeho prohlížeč. 
  • Zobrazení kódu stránek v prohlížeči.
  • Obsah pro uživatele. 

Jak s těmito informace naložit a zrychlit načítání webových stránek?

Webový server, databáze a webová aplikace 

V tomto bodě jde hlavně o databázi. Dále o samotný kód či algoritmus, který pohání vaše www stránky. Pokud je to možné, je dobré databázi vynechat a ukládat data přímo do souboru. K tomuto účelu můžete využít tzv. "Flat file" CMS. Tím zefektivníte načítání dat. 

Vyzkoušejte tyto Flat-file publikační systémy:

  1. Grav
  2. Kirby
  3. Monstra

Databáze

V některých případech se však bez datábáze neobejdete. I zde je ovšem možné pomalé načítání stránek vyřešit, nebo alespoň zredukovat. Dávejte si pozor na různé neoptimalizované dotazy, které dokáží web zpomalit. Také správná volba databáze a její indexace jsou další správné kroky k rychlému webu.

Webový server

Webový server je program, který se stará o komunikaci s vnějším světem. Jedná se o poměrně složitou problematiku, ale i zde lze správnou volbou webového serveru a jeho správným nastavením získat nějaký čas.

Webová aplikace serveru

Co se týče samotné webové aplikace serveru, tak platí pravidlo, že čím méně se toho na cestě od požadavku uživatele k získání dat a vyrenderování stránek děje, tím lépe. Pokud se tedy budete na web serveru dotazovat například na služby třetích stran a tím budeme blokovat celý požadavek, tak web zpomalíte.

Pokud si budete pro zábavu procházet složitá pole nebo seznamy, tam a nazpátek, tak asi taky nikoho nepotěšíte. Na měření rychlosti databáze, serveru a web aplikace existují nástroje, které poskytují nejrůznější reporty. Příkladem může být report od firmy New Relic.

Report rychlosti webu od New Relic
Report rychlosti webu od New Relic 

Alternativou pak může být třeba nástroj od Datadog.

Cache

Cache je věrný pomocník při práci s rychlostí, ale může také velmi pozlobit. Cache můžete využít na data z databáze, na složité výpočty, na generování pohledů, na tzv. assety atd.

Asynchronicita, paralelní přístup

To už je složitější téma, ale rychlosti webu se určitě týká. Pokud vás něco blokuje v rychlosti, tak se lze zamyslet, jestli danou funkci nemůžete vykonat asynchronně nebo paralelně. V tom případě je někdy třeba o něco složitější přístup a programování, ale pokud se zadaří, tak opět "urvete" nějaký čas pro svého uživatele nebo návštěvníka.

HTML, CSS, JavaScript kód a jeho sestavení

Velikost

Základním parametrem ovlivňujícím rychlost webu je samotná velikost HTML, CSS a JavaScript souborů. Čím více kódu napíšete, tím více ho budete muset poslat prohlížeči k zobrazení. Platí tedy, že stránky bez obsahu se zobrazují rychleji než ty s velkým množstvím obsahu. Homepage google.com vs. idnes.cz je toho příkladem. 

Dále platí, že čím víc CSS stylů, designových vychytávek a vylepšení potřebujete, tím méně jdete rychlosti naproti. 

V neposlední řadě je tu velmi populární JavaScript. JavaScript dokáže nabídnout zcela unikátní funkcionality a možnosti, ale dokáže také výrazně zpomalit načítání webu. Optimalizace JavaScriptu dokáže být v kontextu otázky "jak zrychlit načítání webových stránek" samostatnou a velmi nákladnou kapitolou. 

Pěkné zpracování nabídne například článek The Cost of Javascript Frameworks, který se problematice velikosti JavaScript kódu věnuje podrobněji.

Preprocesory, template engines

Do této skupiny patří různé pomocné nástroje, které umožňují psát HTML, CSS a JavaScript rychleji, snadněji udržovat kód a celkovou kvalitu stránek. Ovšem co se týče rychlosti webu, si i tyto nástroje vezmou svůj kousek času. Proto je dobré se zamyslet, jaké nástroje pro snadnější kódování používat a hlavně jak moc jsou v kontextu rychlosti webu optimalizované.

Kompilace, minifikace

Veškerý kód lze nějakým způsobem předpřipravit pro prohlížeče. Tímto procesem se může kód i optimalizovat. Běžnou praxí je pak minifikace, tedy jakési zmenšení, osekání souborů na minimum. 

Verzování assetů

V neposlední řadě přichází opět cache ve spolupráci s verzováním souborů assetů. Tím dokážete říci prohlížeči, že žádné nové změny se od poslední verze na serveru neudělaly, a proto může dál používat již postahované verze assetů, které má.

GZIP komprese

Ke zrychlení nutně patří i komprese assetů. Nastavit lze a smysl dává u textových souborů jako *.html, *.js, *.css, atd. Nemá smysl komprese obrázků.

Přenos stránek a dat k uživateli na jeho prohlížeč

V tomto kroku toho zas tolik ovlivnit nemůžete. Záleží na rychlosti internetu jak na straně serveru, webového hostingu, tak na straně prohlížeče, tedy uživatele. Proto je dobré nemít stránky na hostingu, který je na druhém konci světa a ještě využít nekvalitních hosting služeb, které jsou mimo páteřní síť internetu. 

Pokud je internet pomalý, například uživatel je na mobilních datech, bude pomalé i načítání webových stránek. 

CDN

Co určitě může pomoci v některých případech je síť CDN. Ta má na starosti lepší dostupnost dat pro prohlížeče. Jedná se svým způsobem o jakýsi druh cache, kde můžete mít nahrané assety a kód stránek. 

Stejně tak existují služby, které mohou pomoci s nadměrným trafficem, ochranou proti útokům, přetížením nebo garancí kapacity internetu. To vše mohou být pomocné služby v boji s rychlostí a dostupností internetových stránek.

Zobrazení kódu stránek v prohlížeči

Obrázky

Velikost obrázků a jejich zobrazení jsou jednou ze základních brzd webu. Obrázky by měly být vždy nacachované. U velikosti obrázků platí, že by měly mít vždy přesně jen požadovanou kvalitu a velikost, nic navíc.

Lazyloading

Pro případy, kdy se obrázky ještě nikdy nenačítaly, je tu lazyloading, tedy tzv. líné načítání. To znamená, že stránky se načtou i bez obrázků. Místo obrázků se může použít i skica podobného obrázku a reálný obrázek se načte na pozadí, aniž by blokoval načítání zbytku stránek. 

Formáty obrázků 

Pro obrázky existují různé formáty. Některé se nedoporučuje vůbec používat, protože jsou sice kvalitní, ale příliš velké. Mezi základní formáty patří: PNG, JPG, GIF a stále častěji WEBP, který navíc brání ve stahování obrázků a tím i jejich využívání na jiných stránkách bez souhlasu autora.

Fonty textů

Pro fonty platí podobné pravidlo jako u obrázků. Text je dobré zobrazit nejdříve ve fontu, který má prohlížeč již v sobě a následně přerenderovat, až se postahují vybrané fonty.

AMP – alternativa k HTML

Alternativou k HTML je AMP od společnosti Google. Google ví, že pomalé načítání webových stránek je problém. Proto přišel se svým formátem AMP, který je jakýmsi návratem ke kořenům HTML. Jedná o osekanou verzi, která je jednodušší a rychlejší než HTML.

Turbolinks 

Existují i techniky a nástroje, které pomáhají při překreslování stránek, tak aby nedocházelo k probliknutí nebo nepříjemnému čekání. Jedním takovým nástrojem jsou Turbolinks, což je JavaScript, který nahrazuje jen ty části stránek, které je třeba nahradit, nic víc.

API, Javascriptové aplikace, PWA – progresivní webové aplikace a single page aplikace

Toto je skupina webů a internetových aplikací, které neustále získavají na oblibě a na síle. Jejich úkolem je dodat uživatelům pokročilejší uživatelské funkce a lepší zážitek z webu. Součástí takového kvalitního zážitku je i rychlost, kterou se právě JavaScript aplikace, progresivní webové stránky nebo single page aplikace snaží vylepšit, při zachování pokročilých funkcionalit. 

Velkým pomocníkem je pak API, které pomáhá přenášet menší velikost dat efektivnějším způsobem. Zbytek je pak už na frontendové JavaScript aplikaci přímo v prohlížeči.

Lighthouse

Lighthouse je pomocný nástroj, který je mimo jiné integrovaný do prohlížeče Chrome. Případně můžete využít webovou verzi: https://web.dev/measure. Dokáže pomoci nejen s rychlostí, ale poukáže i na důležitá vylepšení pro www stránky.

Mobilní telefony a mobilní zařízení

Mobilní telefony jsou specifickou oblastí, se kterou ale musíte počítat. Dnes se už počet zobrazení z mobilů natolik zvedl, že je dobré na mobilní zařízení myslet jako první a vše ladit hlavně pro ně – v budoucnu to pak už pravděpodobně ani jinak nepůjde, protože Google oznámil prioritní indexaci mobilní verze stránek.

Tvorba responzivního webu nebo dodatečná optimalizace pro mobilní zařízení vám tak ušetří spoustu starostí do budoucna, a to nejen v kontextu zrychlení webu.

Na mobilu potřebujete menší obrázky a nemůžete se tolik rozvášnit s JavaScriptem. Místa je méně a připojení nebývá vždy tak rychlé jako na stolním počítači. To vše dělá z mobilního webu ideálního kandidáta pro odladění rychlosti a výkonu stránek.

Obsah pro uživatele

Design webových stránek

Rychlost nekončí tím, že se všechna data načtou a zobrazí. Důležitá je i rychlost jakou se dostanou do hlav uživatelů. Dnes uživatelé nečtou, ale v první fázi pouze skenují obsah. Oči se posouvají mezi záchytnými body a uživatel vnímá základní informace velmi povrchně.

Až v momentě, kdy ho něco zaujme, se zastaví a začne něco pozorněji číst. S tím je třeba počítat v návrhu. Nelze nechat návštěvníka utopeného ve velkém množství textu nebo nepřehledném designu.

Pokud potřebujete pomalé načítání webu vyřešit, přemýšlite nad redesignem či začínáte úplně nový projekt, u kterého se nebudete chtít otázkami typu "jak zrychlit načítání webových stránek" vůbec zabývat, nás neváhejte kontaktovat. Rádi probereme váš koncept a postaráme se o kompletní realizaci. Od návrhu designu až po nasazení.


Potřebujete poradit?