Na rychlosti záleží 1: Úvod

Proč vůbec zrychlovat web?

Je to celkem jednoduché. Lidé nemají čas prakticky na nic, a tak chtějí všechno okamžitě. I z tohoto důvodu vyhledávače upřednostňují rychlejší weby, ať už se jedná o Google nebo Seznam.

Dalším důvodem je stále rostoucí počet uživatelů z mobilních zařízení, kteří se mohou potýkat s pomalým internetem. Rok 2014 byl zlomovým, protože v tomto roce získali mobilní uživatele nadvládu před desktopovými uživateli.

Obrázek 1 Vývoj počtu uživatelů mobilních a desktopových zařízení

(zdroj: http://www.sunitka.cz/)

Je rychlost opravdu tak důležitá?

Ano! Naprosto jednoduchá odpověď. Jak již bylo zmíněno, mobilních uživatelů rapidně roste a růst bude. Je to ovšem paradox, protože na desktopu máme často rychlejší internetové připojení a více prostoru.

Každých 300ms, kdy je uživatel nucen čekat navíc, zvyšuje riziko opuštění stránky. Je to až neuvěřitelně malé číslo, ale v dnešní době to je čistá pravda. Google PageSpeed Insights dokonce uvádí až 50% míru opuštění stránky při delším čekání než 3 sekundy.

Znáte Quality score? A znáte třeba SEO? Algoritmus Google Adwords totiž zohledňuje tohle Quality score pro výsledky vyhledávání.

„Nechcete rychlý web, chcete ten nejrychlejší a nejmenší web.“

Taková je pravda.

Na co všechno dávat pozor?

Rychlost internetového připojení je pouze špička ledovce. Rychlost načítání stránky ovlivňuje celkem hodně aspektů, zkusíme si to trošku přiblížit.

Co se vlastně děje při načítání webové stránky:

  1. Stažení HTML kódu a následné zpracování (parsování) tzv. DOM.
    • Když při zpracování narazí na externí CSS zablokuje se DOM a začne se stahovat a zpracovávat tzv. CSSOM, poté opět pokračuje v parsování DOM.
    • Když při zpracování narazí na JS (který neprobíhá asynchronně), opět se blokuje DOM, z JS se začne stahovat a následně vykonávat.
  2. Až po zpracování HTML kódu a všech externích komponent, jako jsou CSS a JS se teprve začne renderovat (vykreslovat) stránka.

Co ovlivňuje rychlost načtení stránky?

Slabé internetové připojení je sice základ, pro pomalé načtení webu, ale tenhle aspekt nedokážeme tak lehce ovlivnit. Takže se pojďme zaměřit na problémy, které lze celkem jednoduše upravit, abychom uživateli co nejvíce zpříjemnili návštěvu na našich stránkách.

Zde vypíchnu ty nejdůležitější tipy, rady a nápady k tomu, abychom dokázali udělat webovou stránku co nejrychlejší:

  • Optimalizování obrázků
    • Snížení kvality
    • Zmenšení rozlišení
    • Využití srcset/sizes, popřípadě tag <picture>
  • Minifikace CSS/JS
  • Critical CSS
  • Načítání fontů
  • Asynchronní načítání JS
  • Odstranit 404 Error
  • Time to First Byte (TTFB) – Čas do prvního bytu
    • TTFB = Doba požadavků na http + Doba žádosti o proces + Doba odezvy http
    • Snížit odezvu použitím CDN, snížit http requesty, rychlý webhosting
  • Cache, http/2, Aktivování Gzip Komprese
  • Lazy Loading
  • Prefetch/Preconnect

Osobně si myslím, že tohle by měl být jakýsi checklist, jak pro optimalizaci stránek, tak i pro samotnou tvorbu nových webů. Můžu vás totiž ujistit v jednom. Mnohem jednodušší je tvořit už od základu optimalizovaný web nežli zrychlovat již hotovou stránku.

Rychlost zobrazení důležitější než samotné načtení webové stránky

Možná si v tomhle bodě řeknete, že jsem vás celou dobu vodil za nos. Není to tak úplně pravda. Rychlost načtení webové stránky a snažit se snížit datovou náročnost na minimum je důležité a lidé s nízkým FUP vám budou opravdu vděční.

Ovšem návštěvník vaší stránky nepotřebuje co nejrychlejší zobrazení celého webu, on totiž nevidí celou stránku, když na ní přijde. Pro něj je důležité vidět „něco“. Nějaký progres.

Nejraději to přirovnávám k instalování her a aplikací. Každý alespoň jednou ve svém životě instaloval něco a u toho sledoval, jak se přičítají procenta nebo sledoval progres bar. Když se zdálo, že se posuvník neposouvá nebo procenta stojí, okamžitě jste zneklidnili.

Obrázek 2 Zdroj: http://starecat.com/

A naprosto stejně to funguje i na webu. Pokud po kliknutí na odkaz vidíte prázdnou bílou stránku jste neklidní a často kliknete na kouzelné tlačítko „Zpět“ (po 3. vteřinách až polovina). A přesně tomuhle se chceme vyhnout obloukem.

Zobrazování „webu“ takřka okamžitě

Základ je tedy co nejrychleji ukázat alespoň něco, takovou třeba demoverzi webu. Až následně dodat zbytek stránky. A k tomu se pojí hned dva pojmy. Jedním z nich je Start render a druhým je Speed index.

Start render

Když si tenhle pojem přeložíte, zjistíte vlastně všechno, co potřebujete. Start render – doba, kdy se začne stránka vykreslovat.

Jinými slovy je to doba, kdy se z prázdné bílé stránky začne stávat webová stránka. Nezáleží na tom, jestli se zobrazí logo, zbarví se pozadí, ukáže se obsah nebo cokoliv jiného. To, na čem záleží je ukázat co nejrychleji cokoliv a s tím se pojí druhý pojem – Speed index.

Speed index

Speed index je číslo, které reprezentuje, jak rychle stránka působí. A základem je mít tohle magické číslo, co nejmenší. Hlavně se nezalekněte velikostí tohoto čísla, je totiž v řádech tisíců.

Proč zrovna v řádech tisíců? Je to jednoduché, protože to jsou milisekundy. Index rychlosti je průměrný čas (ms), kdy jsou zobrazeny viditelné části stránky. Tohle číslo také především závisí na view port – portu zobrazení.

Uznejte sami, jak by tedy tohle číslo mělo být malé. Osobně se přikláním k číslu maximálně do 3000. Jak již bylo výše uvedeno, 3 vteřiny je mezní hranice, kdy polovina lidí odchází ze stránek a každých dalších 300ms odchází více a více uživatelů.

Závěr

Je potřeba mít na paměti, že opravdu méně znamená více. Ve světě internetu méně znamená čas, kdy uživatel čeká a nic nedělá a více například uživatel, který si koupil produkt, dal vám svůj email nebo si jen přečetl něco zajímavého a tím jste dotyčnému dali brouka do hlavy a v budoucnu vás může dále navštěvovat, doporučovat, číst, sdílet apod.

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *