background design element dropbackground design element dropbackground design element drop

Rychlost načítání webu: 5 míst, kde zlepšit pomalé načítání webových stránek!


Pomalé načítání webových stránek může být v dnešní době důvodem neúspěchu internetového projektu. Není dobré rychlost webu přehlížet a myslet si, že dnešní 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 na první pohled zdát.

Proč je rychlé načítání webových stránek důležité?

Důvody jsou dva. Prvním jsou samotní lidé a tím druhým, odvozeným důvodem, jsou stroje nebo-li vyhledávače.

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 ve 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 přijde opět něco vyhledat.

Rychlé webové stránky pro lidi

Jak jsme zmínili v předchozím odstavci, lidé mají rádi rychlé weby. 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í. A pokud většinu toho času zabere její načítání, tak nemá tento web šanci obstát v dnešním přeinformovaném světě.

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

Už víme, že chceme rychlý web. A teď jak na to? Problematiku rychlého webu lze rozdělit do několika vrstev:

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

Postupně si probereme všechny kroky a ukážeme, kde se dá rychlost ztratit a kde naopak získat.

1. Webový server, databáze a webová aplikace 

Zde se bavíme hlavně o databázi, pokud ji na serveru máme. Dále o samotném kódu, algoritmu, který pohání naše www stránky.

Tzv. "Flat file" CMS

Pokud je to možné, je dobré databázi vynechat a ukládat data přímo do souboru. Tím zefektivníme načítání dat. 

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

  1. Grav - https://getgrav.org
  2. Kirby - https://getkirby.com
  3. Monstra - http://monstra.org

Databáze

Pokud máme databázi, je dobré dát 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.

Webserver

Webserver je program, který se nám 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ískaní dat a vyrenderování stránek děje, tím lépe. Pokud se tedy budeme na web serveru dotazovat například na služby třetích stran a tím budeme blokovat celý požadavek, tak web zpomalíme. Pokud si budeme pro zábavu procházet složitá pole nebo seznamy, tam a nazpátek, tak asi taky nikoho nepotěšíme.

Na měření rychlosti databáze, serveru a web aplikace existují nástroje, které poskytují nejrůznější reporty. Na ukázku přikládáme report od firmy New Relic https://newrelic.com/

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

Alternativou pak může být třeba nástroj od Datadog: https://www.datadoghq.com/dg/apm/comp/

Cache

Cache je náš věrný pomocník při práci s rychlostí, ale může nás také velmi pozlobit. Cache můžeme 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 se určitě týká. Pokud nás něco blokuje v rychlosti, tak se lze zamyslet, jestli danou funkci nemůžeme 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 urveme nějaký čas pro našeho uživatele nebo návštěvníka.

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

Velikost

Základním prvkem pro rychlost je samotná velikost HTML, CSS a JavaScript souborů. Čím více kódu napíšeme, tím více ho budeme 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řebujeme, tím méně jdeme rychlosti naproti. 

V neposlední řadě je tu dnes velmi populární JavaScript. JavaScript dokáže nabídnout zcela unikátní funkcionality a možnosti, ale dokáže také zabít Váš web, co se týče rychlosti. Optimalizce JavaScriptu dokáže být samostatnou a velmi nákladnou kapitolou při zrychlování Vašeho webu. 

Preprocesory, template engines

Do této skupiny patří různé pomocné nástroje, které nám 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, i tyto nástroje si vezmou svůj kousek času. Proto je dobré se zamyslet, jaké nástroje pro snadnější kódování používáme a hlavně jak jsou časově 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ážeme ří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ů.

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

V tomto kroku toho zas tolik ovlivnit nemůžeme. Záleží na rychlosti internetu jak na straně našeho 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í 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ůžeme mít nahrané naše assety a kód stránek. 

Stejně tak existují služby, které nám 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.

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

Obrázky

Velikost obrázků a jejich zobrazení je jednou ze základních brzd rychlosti. Pro obrázky platí, že bychom je měli mít nacachované. U velikosti obrázků platí, že bychom měli mít vždy přesně jen požadovanou kvalitu a velikost, nic navíc.

Lazyloading

Pokud jsme obrázky ještě nikdy nenačítali, měli bychom použí tzv. 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 nově WEBP.

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í naše 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é nám 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.

https://github.com/turbolinks/turbolinks

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.

Lighthouse dokáže pomoci nejen s rychlostí, ale upozorní i na další důležité vylepšení pro Vaše 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ě. Tím si ušetříme spousty starostí do budoucna, problémy s rychlostí nevyjímaje.

Na mobilu potřebujeme menší obrázky, nemůžeme 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 našich stránek.

5. Obsahu 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 získává 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. 



Průměrné hodnocení
Vaše hodnocení



    TVORBA WEBŮ A MOBILNÍCH APLIKACÍ

    Od designu až po finální vytvoření webové stránky nebo mobilní aplikace