Mít rychlý web je dnes klíčem k úspěchu – ovlivňuje nejen uživatelský zážitek, ale také pozici ve vyhledávačích a celkovou důvěryhodnost vaší značky. První dojem je zde nejdůležitější, může totiž ovlivnit všechny následné kroky uživatelů.

Možná to působí jako klišé, ale platí to stále.

V našem dvoudílném seriálu si ukážeme, kvůli čemu je rychlost webu pro byznys zásadní a jak ji efektivně měřit. Připravte se na praktické tipy a doporučené nástroje, se kterými budete mít výkon svého webu plně pod kontrolou!

Rychlost webu hraje prim a má zásadní vliv na byznys

Ačkoliv to nemusí být na první pohled znát, rychlý web má velký vliv na SEO, v lidské řeči – na dohledatelnost. Google, ale i jiné vyhledávače zohledňují rychlost webu jako jeden z klíčových faktorů při určování pozice ve vyhledávání. Rychle se načítající weby obvykle dostávají lepší hodnocení, což vede k vyšší pozici ve vyhledávači. A je pro to jednoduché vysvětlení. 

VPS Centrum

Vyzkoušejte zdarma naši aplikaci pro správu serveru a domén. Budete si připadat jako zkušený administrátor.

Dnešní zrychlená doba má poměrně přísná kritéria a těmi vůbec nejpřísnějšími rozhodčími jsou sami lidé, kteří na nic nechtějí čekat. Práh trpělivosti je pro většinu lidí pouze několik sekund – pokud se web nenačte dostatečně rychle, lidé se rozhodnou ho opustit a přejít na jinou stránku.

via GIPHY

Google pak takové uživatelské chování vnímá jako relevantní signál, že web není dostatečně kvalitní a může jeho hodnocení snížit, což znamená, že je možné, že se vaše stránky objeví ve vyhledání až za konkurencí.

A nejen to, takové chování má pak dominový efekt na váš byznys. Čím více nechtějí uživatelé čekat, tím je vyšší pravděpodobnost, že na takovém webu nikdo nic nepoptá. Což má dopad, jak na prodeje produktů, získání nových leadů, tak i na další akce, které od návštěvníků očekáváte.

S výkonem webu roste chuť

Pokud se vaše stránka načítá dlouho, uživatelé ji velmi rychle opustí, což zvýší i takzvaný bounce rate. Zvýšení bounce rate znamená, že lidé web opouštějí, aniž by provedli jakoukoli požadovanou akci – a to znamená ztrátu potencionálních zákazníků.

Pomalejší web tedy znamená nejen ztrátu zákazníků, ale i jistý dopad na hodnotu vaší značky. Rychlý a hladce fungující web poskytuje lepší uživatelský zážitek, což vede k větší spokojenosti a loajalitě návštěvníků.

A jak je na tom váš web?

A teď důležitá otázka, čím mohu rychlost svého webu změřit?

Několik nástrojů můžeme doporučit hned, jsou zdarma a jejich použití je poměrně intuitivní. Fungují jako prostředník, který vytáhne to nejdůležitější na jedno místo. Věříme, že se v nich vyznají jak začátečníci (minimálně jim dají základ, který mohou předat někomu, kdo se vyzná), tak i pokročilí uživatelé.

Freelo - Nástroj na řízení úkolů a projektů

Přidej se, pozvi svůj tým a klienty, rozděl práci a sleduj, jak se úkoly dají do pohybu.

Google PageSpeed Insights

Je asi nejznámější z řady online nástrojů, které jsou komplet zdarma. Dává nahlédnout pod kapotu vašeho webu a poskytuje jednoduchý přehled o výkonu vaší stránky jak na mobilních, tak na desktopových zařízeních. 

Právě z pohledu míry, jak detailní přehled je, se řadí spíše mezi základy, který je snadno pochopitelný i pro úplné začátečníky. Výkon hodnotí na bodové škále a hladinu skóre vyznačuje barevně. Nabízí konkrétní doporučení, jak zlepšit výkon webu, přístupnost nebo SEO.

Lighthouse v Chrome

Lighthouse je nástroj integrovaný přímo do prohlížeče Google Chrome. S jeho pomocí zvládnete poměrně podrobný audit webu. Jak už jeho název napovídá, jako maják umí posvítit nejen na metriky rychlosti, ale i na další aspekty, jako například na přístupnost a SEO. Vedle toho poradí, jak slabá místa zlepšit. Nástroj je ideální spíše pro vývojáře nebo pokročilejší uživatele, kteří potřebují hlubší analýzu a chtějí sledovat více aspektů výkonnosti webu najednou.

Do Lighthouse se dostanete v DevTools, to znamená, stačí v prohlížeči kliknout pravým tlačítkem myši a dát prozkoumat (inspect):

webpagetest.org

Webpagetest.org je už tak trochu vyšší dívčí. Nástroj, který umožňuje testování rychlosti webu z různých lokalit a zařízení. Poskytuje velmi detailní data, včetně časů načítání jednotlivých prvků stránky, což je užitečné pro hlubší analýzu problémů. Pro zkušenější uživatele nebo vývojáře dokáže nasimulovat specifické chování z různých zařízení, typů prohlížeče a různých typů připojení (například 3G nebo 4G).

Pro fajnšmekry je tu DevTools

Kdo si nechce hrát na povrchu, ale zabrouzdat do hloubky webu a co se na něm děje, pro ty už je hracím polem samotné DevTools. Kdo se totiž vyzná ví, že konzole pro vývojáře ukazuje spoustu nástrojů, které mají co říct o využití JavaScriptu, CSS a dalších aspektů. Jinými slovy vás pustí k nahlédnutí do kódu webu (frontendu), kde si můžete vše otestovat a zanalyzovat po svém.

Core web vitals

Core web vitals jsou v podstatě “základní životní funkce” každého webu. Jde o sadu metrik, které jsou klíčové pro Google a které používá k hodnocení uživatelského zážitku na webu. Tyto metriky se zaměřují na různé aspekty výkonu webu jako je rychlost načítání, interaktivita a vizuální stabilita webu, které mají přímý vliv na pohodlí uživatelů během procházení stránek. 

Výsledný souhrn metrik dává Googlu do ruky jasnou zbraň, kterou stanovuje “dojem ze stránky”. I při použití nástroje Google PageSpeed insights jste nejspíš zaznamenali několik zkratek, u kterých si říkáte, k čemu asi jsou. Pár základních si tu zmíníme:

Largest contentful paint (LCP)

Měří, jak dlouho trvá načtení největšího obsahového prvku na konkrétní stránce. Aby byl výsledný uživatelský dojem, co nejlepší, LCP by mělo být kratší než 2,5 sekundy.

Interaction to Next Paint (INP)

Měří, jak rychle vaše stránky reagují na interakce uživatele po celou dobu jeho návštěvy. INP by mělo být 200 milisekund nebo méně. Jde o nejmladší metriku, která v březnu roku 2024 nahradila metriku FID (která rovněž měřila dobu odezvy prohlížeče na interakce uživatele). Ta se totiž ukázala jako ne tak efektivní.

O tom, že je metrika dosti přísná promluvili Jakub Goldmann a Martin Kopta letos na Frontkonu:

Cumulative Layout Shift (CLS)

Znáte ten pocit, když vlezete na stránku, poskočí vám layout stránky a kliknete někam jinam, než jste chtěli? CLS měří právě to, o kolik se neočekávaně posune layout stránky během načítání. Jejím cílem je udržet co nejvyšší vizuální stabilitu během načítání stránky. Hodnota by měla být menší než 0,1.

Univerzální optimalizace, kterou můžete udělat už dnes

Chcete, aby vaše webové stránky byly rychlejší a efektivnější? Dobrou zprávou je, že existuje několik univerzálních optimalizací, které lze aplikovat na jakýkoliv web. Podíváme se na ty nejdůležitější a vysvětlíme si je jednoduše a srozumitelně.

Optimalizace obrázků pro různá zařízení

Každé zařízení potřebuje jinou velikost obrázků – na mobilu rozhodně nepotřebujeme stahovat obrovský soubor (4000×3000 pixelů), který se hodí spíše pro velké monitory. V HTML máme skvělé nástroje, jako je atribut srcset pro img tag nebo kombinace tagů picture a source, které prohlížeči pomáhají rozhodnout, jak velký obrázek mají podle konkrétního zařízení stáhnout. Více se o problematice rozepsal Martin Michálek ve svém článku.

Díky těmto technologiím ušetříte datový tok na mobilních zařízeních a web bude fungovat hladce i při pomalejším připojení.

Komprese CSS a JavaScriptu

Každý web obsahuje spoustu CSS a JavaScriptu (JS), které formátují obsah a přidávají jejich funkcionalitu. Takové soubory však mohou být velmi velké, díky bohu dnes většina serverů podporuje kompresi pomocí modulu mod_deflate, který je automaticky komprimuje (zmenšuje) podobně jako například funguje komprese ZIP (která soubory zazipuje).

Dalšího zlepšení můžete dosáhnout odstraněním nepoužívaných CSS a JS. Tento krok je složitější, zvláště pokud používáte frameworky, ale skvělé nástroje jako Terser pro JavaScript nebo CSSO pro CSS vám s tím pomohou.

Lazy loading obrázků

Proč načítat všechny obrázky najednou, když je uživatel ještě nevidí? Technika zvaná „lazy loading“ zajistí, že se obrázky načítají až ve chvíli, kdy se dostanou do zorného pole uživatele. Stačí v HTML u obrázků použít atribut loading=“lazy“a prohlížeč se postará o zbytek.

Dejte ale bacha na špatnou implementaci. Těchto pár zásadních tipů od kodérky Zuzany Šumlanské si zapište za uši.

Cache – chytré ukládání souborů

Jednou z nejefektivnějších metod, jak web zrychlit, je využít cache. To znamená, že prohlížeč si může uložit některé soubory (například obrázky) a příště už je nebude muset stahovat znovu.

Do souboru .htaccess můžete vložit například tento řádek:

Header set Cache-Control "public, max-age=31536000, immutable

To znamená, že prohlížeč si může soubor uložit na rok do paměti. Jediný drobný problém nastává ve chvíli, když chcete nahrát novou verzi souboru – pak musíte změnit jeho název (např. obrazek2.jpg).

Moderní technologie a formáty

V minulosti se jako nejběžnější formáty obrázků používaly JPG a GIF. Ty později nahradilo PNG.

Tyto formáty však mají své mouchy, například vyšší velikost souborů a omezené možnosti komprese. Proto se dnes jako moderní alternativa nabízí formát WebP, který je široce podporovaný napříč prohlížeči (zde si můžete podporu ověřit).

Největší přednost WebP spočívá v tom, že dokáže výrazně zmenšit velikost souborů – v některých případech až o 90 %, a to bez viditelné ztráty kvality. Je vhodný jak pro fotografie, tak i pro grafiku s průhledností, což z něj činí univerzální řešení pro většinu webových stránek. Pokud vás zajímá víc, podrobněji se o WebP rozepsal Martin Michálek na webu Vzhůru dolů.

Přechod obrázků do WebP výrazně šetří data

Pokud váš web ještě nepoužívá WebP, určitě stojí za to jej vyzkoušet. Co přechodem získáte?

1. Vyšší rychlost načítání stránky, 
2. ale i nižší datovou náročnost pro uživatele s pomalejším připojením.
3. podporuje i animace, což doposud uměl jen formát Gif

Pro názorný příklad jsme z originálního PNG díky WebP ušetřili 90 % velikosti obrázku a přitom rozdíl je okem nerozeznatelný.

CDN jako super urychlovač

Content Delivery Network (CDN) je síť serverů rozmístěných po celém světě, které pomáhají rychleji a efektivněji doručovat obsah vašich webových stránek. Místo toho, aby návštěvníci vašeho webu stahovali data přímo z vašeho serveru, CDN je nasměruje na nejbližší dostupný server v jejich lokalitě.

Vysvětlíme si to jednoduše. CDN (například náš oblíbený Cloudflare) funguje tak, že nasazuje stovky serverů blíže k uživatelům. Takže uživatel v USA nemusí nutně načítat obsah z Prahy, ale ze serveru v New Yorku. Pokud server v New Yorku obsah ještě nemá, jednorázově si jej načte z vašeho serveru a uloží ho do mezipaměti. Další uživatelé z USA tak získají obsah mnohem rychleji, bez zbytečného zdržení při přenosu přes oceán.

Speculation rules předpokládá, kam uživatel klikne a urychlí načtení

Speculation Rules API je taková malá revoluce v rychlosti webu. Představte si, že uživatel chce přejít na jinou stránku – místo toho, aby musel čekat na její načtení, stránka už je připravená ještě předtím, než na ni vůbec klikne.Díky této technologii může být přechod mezi stránkami prakticky okamžitý, což znamená spokojenější návštěvníky a plynulejší procházení webu.

Jak speculation rules funguje? 

V podstatě jde o chytrý způsob, jak web „předpovídá“, kam se uživatel pravděpodobně vydá, a pak mu přednačte nebo dokonce předvykreslí obsah do prohlížeče. V praxi se to dá jednoduše nastavit pomocí speciálního HTML tagu:

<script type="speculationrules">
{
  "prerender": [
    {
      "urls": ["pristi-stranka.html", "kontakt.html"]
    }
  ]
}
</script>

Tento kus kódu říká prohlížeči, aby předem načetl určité stránky, takže když na ně uživatel klikne, objeví se prakticky okamžitě.

Samozřejmě, všechno má svá pravidla – je potřeba s tím zacházet opatrně, aby web zbytečně nepřetěžoval server nebo nezatěžoval uživatelovo zařízení nadbytečnými požadavky. Ale pokud se Speculation Rules API použije správně, může váš web získat výrazný náskok před konkurencí. Chcete se o tom dozvědět víc? Mrkněte na podrobný návod na pagespeed.cz.

Nevýhodou je, že když speculation rules implementujete špatně, například jej nasadíte na každou stránku, můžete si spíš uškodit a shodit celý web. Používejte to jen tam, kde je skutečně potřeba.

Martin Michálek –⁠⁠⁠⁠⁠⁠ Web Performance consultant

Tak to by bylo pro dnešek všechno. Doufáme, že jste si jako základ odnesli co nejvíc a minimálně něco z toho aplikujete na svém webu. Těšte se na druhý díl, ve kterém se ponoříme hlouběji do praxe a ukážeme si například nejčastější chyby a jak je řešit nebo optimalizaci na WordPress weby. Tak ať to frčí!