Mít rychlý web je 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.

K článku jsme si přizvali Wratislava Tobolu, IT konzultanta, který se na celou problematiku podívá očima odborníka na optimalizace webových stránek a serverů.

V dvoudílném seriálu společně ukážeme, proč je rychlost webu zásadní a jak velký vliv má na váš byznys. 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í. 

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.

Rychlost webu je důležitá jak pro UX, tak pro SEO. Najděte balanc

Setkávám se s dvěma extrémy: jedni rychlost vůbec neřeší, což může návštěvníky i vyhledávače odradit, druzí naopak považují rychlostní skóre 90+ od Googlu za cestu k prvním příčkám, což je mýtus. Google stále upřednostňuje především kvalitní obsah, správnou prolinkovanost a návštěvnost.

Wratislav Tobola –⁠⁠⁠⁠⁠⁠ IT konzultant

Rychlost hraje roli zejména u větších projektů, kde optimalizovaný web může získat náskok. Ideální je kombinovat top obsah a top optimalizaci, což je však v praxi často těžké kvůli neustále zpřísňujícím se požadavkům. Klíčem je najít kompromis mezi rychlostí a obsahem. V některých případech může ke zlepšení stačit změna hostingu, jindy je nutná důkladná analýza šablon a pluginů.

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ů.

Jak testovat rychlost webu?

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é.

Lighthouse v Chrome

Lighthouse je asi nejznámější z řady online nástrojů, které jsou komplet zdarma. Je 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):

Google PageSpeed Insights

Page Speed Insights (PSI) 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.

PSI má výhodu v detailní dokumentaci, která popisuje jednotlivé problémy i jejich řešení. Doporučený přístup je kombinovat PSI s nástrojem WebPageTest.org. Zatímco PSI analyzuje technické aspekty, WebPageTest vizualizuje načítání všech prvků na stránce pomocí přehledného „waterfall“ grafu. Zelené skóre v PSI totiž nemusí nutně znamenat, že se stránka načítá okamžitě.

Wratislav Tobola –⁠⁠⁠⁠⁠⁠ IT konzultant

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.

Existují alternativy pro uživatele s vlastním VPS?

Existují i platformy, které zvládnou hromadně analyzovat celý projekt pomocí sitemapy a dalších metod. Většina těchto řešení je však součástí placených SEO balíčků. Alternativou je bezplatný nástroj Unlighthouse, který je uživatelsky přívětivý a umožňuje komplexní analýzu. Tento projekt je však určen především uživatelům s vlastním VPS, serverem nebo hostingem s podporou Node.js.

Na co si dát u měření pozor

Zaměřte se především na mobilní zařízení

Až 60 % provozu přichází z mobilů a tabletů, a právě mobilní metriky jsou pro Google klíčové. Uvědomte si však, že PageSpeed Insights (PSI) nezobrazuje reálnou uživatelskou zkušenost. Výsledky proto mohou být horší než realita.

Je důležité říct, že PageSpeed Insights neměří reálnou uživatelskou zkušenost, jde pouze o test, který probíhá na velmi přiškrceném virtuálním zařízení, které se v dnešní době nedá srovnat s průměrným zařízením a připojením, které využívají běžní uživatelé.

Wratislav Tobola –⁠⁠⁠⁠⁠⁠ IT konzultant

Řiďte se Core Web Vitals. Skóre pod 90 není špatně

Mnohem víc vás zajímá Core Web Vitals, které jsou založené na reálných uživatelských datech. Pokud tyto statistiky máte v Google Search Console dostupné, vždy se řiďte primárně podle nich. V opačném případě můžete vycházet z výsledků PSI, ale berte je s rezervou. Skóre pod 90 neznamená ihned penalizaci – rozdíl mezi hodnotami 60 a 100 často nemá u menších projektů téměř žádný vliv na SEO.

Služby třetích stran zpomalují web

Sužby jako Google Tag Manager, Analytics, AdSense nebo různé reklamní a analytické nástroje (např. FB Pixel) mohou výrazně zpomalit načítání a snížit skóre. Správná integrace je proto zásadní.

Core web vitals –⁠⁠⁠⁠⁠⁠ pár nejdůležitějších zkratek

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:

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.

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 na Frontkonu:

Jak INP optimalizovat?

Pokud hledáte jednoduchý návod, jak optimalizovat INP a další metriky, bohužel vás musíme zklamat. Každý projekt je jedinečný – liší se šablonami, pluginy a použitými technologiemi, což znamená, že univerzální řešení neexistuje. Diagnostika a testování jsou klíčem k úspěchu.

Základem optimalizace je minimalizace datových souborů a služeb třetích stran, u WordPressu mohou pomoct optimalizační pluginy jako WP Rocket nebo Autoptimize. Je ale důležité chápat, že tyto nástroje problémy spíše maskují, než skutečně řeší. Na menších webech to nemusí být problém, ale u rozsáhlých projektů a na e-shopech může použití pluginů vyvolat komplikované vedlejší efekty.

Metrika INP je výzvou zejména pro projekty postavené na JavaScriptu, JS frameworcích, AJAXu nebo analytických službách. Čím více těchto technologií web využívá, tím složitější je dosáhnout dobrých výsledků. Některé metody, například odložení načítání JavaScriptu (JS delay), mohou mít na INP dokonce negativní dopad.

Wratislav Tobola –⁠⁠⁠⁠⁠⁠ IT konzultant

Řešení? Detailní analýza nebo spolupráce s odborníkem, který se optimalizacím dlouhodobě věnuje. Začátečník často nemá dostatek zkušeností na to, aby podobné problémy vyřešil bez podpory.

VPS Centrum

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

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.

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á, podle toho mu přednačte nebo dokonce předvykreslí obsah do prohlížeče. V praxi se dá Speculation Rules nastavit jednoduše 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.

Z rozhovoru s Martinem Michálkem –⁠⁠⁠⁠⁠⁠ Web Performance konzultantem

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čí!