Performance

Co je to performance webu?

Performance webu označuje rychlost a efektivitu, s jakou se webová stránka načítá a reaguje na akce uživatelů. Výkon webu zahrnuje dobu načtení stránky, rychlost zobrazení prvního obsahu, interaktivitu a celkovou plynulost při procházení webu. V dnešní době je performance klíčovým faktorem úspěchu každého webu – ovlivňuje nejen spokojenost návštěvníků, ale také pozici ve vyhledávačích a konverzní poměr.

Podle statistik opouští 53 % uživatelů mobilní web, pokud se načítá déle než 3 sekundy. Ideální doba načtení webu by měla být do 2–3 sekund, což zajistí optimální uživatelskou zkušenost. Google od roku 2021 zahrnul rychlost webu mezi oficiální ranking faktory pomocí metrik Core Web Vitals. Kvalitní performance také znamená nižší spotřebu dat pro uživatele, lepší dostupnost webu i na pomalejším připojení a v neposlední řadě šetří provozní náklady na hosting a CDN.

Pomalý web přímočaře snižuje šanci, že návštěvník provede požadovanou akci – ať už se jedná o nákup, vyplnění formuláře nebo kontaktování firmy. Uživatelé očekávají okamžitou odezvu a pokud web zpomaluje, odcházejí ke konkurenci. Pro e-commerce je performance přímo spojena s tržbami – každá sekunda prodloužení načítání může stát desítky procent konverzí. Investice do rychlosti webu se proto vždy vrátí, ať už v podobě lepších pozic ve vyhledávačích, vyšší návštěvnosti nebo zvýšených prodejů.

Core Web Vitals – klíčové metriky výkonu

Google v roce 2020 představil sadu metrik nazvanou Core Web Vitals, která měří uživatelskou zkušenost z pohledu rychlosti, interaktivity a vizuální stability. Tyto metriky se staly oficiálním ranking faktorem a měly by být prioritou při každé optimalizace webu. Core Web Vitals tvoří tři hlavní ukazatele:

• LCP (Largest Contentful Paint)

LCP měří, za jak dlouho se na obrazovce zobrazí největší viditelný prvek – typicky hlavní obrázek, video nebo blok textu. Tato metrika přímo odráží, jak rychle uživatel uvidí skutečný obsah stránky, nikoliv jen prázdnou obrazovku nebo načítací indikátor. Ideální hodnota LCP je do 2,5 sekundy od začátku načítání stránky. Pokud je LCP delší než 4 sekundy, považuje se to za špatný výkon. LCP můžete zlepšit optimalizací obrázků (komprese, moderní formáty jako WebP), použitím cache a cdn, odstraněním renderovacích blokujících zdrojů a správnou konfigurací serveru. Nejčastějšími viníky pomalého LCP jsou neoprimalizované obrázky, pomalý server response time a blokující CSS nebo javascript soubory.

• FID (First Input Delay) / INP (Interaction to Next Paint)

FID měří dobu od prvního kliknutí uživatele (nebo jiné interakce) do okamžiku, kdy prohlížeč skutečně začne reagovat. Tato metrika odráží, jak responzivní se web uživateli jeví. Ideální hodnota FID je do 100 milisekund. Google v roce 2024 přešel na novou metriku INP (Interaction to Next Paint), která měří celkovou responzivitu během celé návštěvy stránky, ne jen při prvním kliknutí. INP by mělo být pod 200 milisekund pro dobrý výkon. Zlepšení těchto metrik dosáhnete optimalizací javascript kódu, rozdělením velkých úloh na menší části (code splitting), odstraněním zbytečných knihoven a použitím webových workers pro náročné výpočty. Pokud se web načítá a zároveň spouští těžké skripty, uživatel cítí prodlevu při každém kliknutí.

• CLS (Cumulative Layout Shift)

CLS měří vizuální stabilitu stránky – kolikrát se během načítání prvky na stránce posunuly nebo "poskočily". Typickým příkladem je situace, kdy chcete kliknout na tlačítko, ale v poslední chvíli se načte obrázek a tlačítko se posune, takže kliknete na něco jiného. Ideální hodnota CLS je pod 0,1. Hodnota nad 0,25 se považuje za špatnou. CLS můžete minimalizovat definováním šířky a výšky všech obrázků a videí v HTML, rezervací prostoru pro reklamy a vložený obsah, použitím správného font-display nastavení pro webové fonty a zamezením vkládání obsahu nad existující obsah během načítání. Dobrý CLS znamená, že uživatel může začít číst a interagovat se stránkou okamžitě, aniž by ho něco "vyhodilo".

Jak měřit výkon webu?

Bez pravidelného měření nevíte, jak váš web reálně funguje pro uživatele. Existuje několik nástrojů, které vám poskytnou detailní přehled o performance a konkrétní doporučení, co zlepšit:

• Google PageSpeed Insights

Google PageSpeed Insights je nejpoužívanější a nejdostupnější nástroj pro měření výkonu webu. Stačí zadat URL adresu a nástroj poskytne skóre od 0 do 100 pro mobilní i desktopovou verzi webu. PageSpeed Insights měří všechny Core Web Vitals metriky na základě reálných dat od uživatelů (pokud má váš web dostatek návštěvnosti) i laboratorních testů. Skóre nad 90 je výborné, 50–90 průměrné a pod 50 znamená nutnost optimalizace. Nástroj také nabízí konkrétní tipy, jaké prvky web zpomalují a jak je optimalizovat. Mezi nejčastější doporučení patří komprese obrázků, odstranění nevyužívaného CSS a javascript, využití cache nebo minimalizace render-blocking zdrojů.

• Lighthouse

Lighthouse je open-source nástroj od Googlu integrovaný přímo v Chrome DevTools (F12 → záložka Lighthouse). Umožňuje měřit nejen performance, ale také přístupnost, seo optimalizaci, best practices a progressive web app schopnosti. Lighthouse běží v simulovaném prostředí, takže výsledky mohou být mírně odlišné od PageSpeed Insights, který používá reálná data. Výhodou je, že Lighthouse můžete spustit lokálně i na verzích webu, které ještě nejsou veřejně dostupné. Lighthouse také poskytuje diagnostiku jednotlivých metrik včetně waterfall diagramu, který ukazuje, jak dlouho trvalo načítání každého zdroje na stránce.

• GTmetrix a WebPageTest

GTmetrix a WebPageTest jsou pokročilé nástroje pro detailní analýzu výkonu webu. GTmetrix kombinuje data z Google Lighthouse a vlastní metriky a umožňuje testovat web z různých geografických lokalit a na různých typech připojení (rychlé, pomalé, 3G). WebPageTest nabízí ještě podrobnější view včetně filmstrip zobrazení (jak se web postupně vykresloval), connection view (jaké zdroje se načítaly kdy) a možnost testovat různé prohlížeče. Tyto nástroje jsou ideální pro pokročilou diagnostiku, když víte, že web je pomalý, ale nevíte přesně proč. Ukážou vám i detaily jako Time to First Byte (hosting kvalita), DNS lookup čas, nebo které konkrétní skripty způsobují zpoždění.

Jak zrychlit načítání webu?

Existuje desítky způsobů, jak zlepšit výkon webu, ale některé mají výrazně větší dopad než jiné. Zde jsou tři nejdůležitější oblasti, na které byste se měli zaměřit:

• Optimalizace obrázků

Obrázky typicky tvoří 50–70 % celkové velikosti webové stránky, a proto je jejich optimalizace nejvýraznější zrychlení, které můžete provést. Komprimujte obrázky – snížení velikosti o 70–80 % bez viditelné ztráty kvality je běžné. Používejte moderní formáty jako WebP nebo AVIF, které nabízejí lepší kompresi než JPEG nebo PNG. Implementujte lazy loading (zpožděné načítání) – obrázky mimo viditelnou oblast obrazovky se načtou až když uživatel scrolluje. Používejte responsive images, aby mobilní zařízení nestahovala obří desktop obrázky. Definujte šířku a výšku každého obrázku v HTML, aby prohlížeč mohl rezervovat prostor a zabránil CLS skokům. Další důležitou technikou je použití správných formátů – fotografie jako WebP nebo JPEG, ikony a loga jako SVG pro neomezenou škálovatelnost.

• Využití cache a CDN

Cache umožňuje prohlížeči uložit statické soubory (obrázky, CSS, javascript) lokálně, takže při další návštěvě webu se nemusí znovu stahovat. Browser cache nastavíte pomocí HTTP hlaviček Cache-Control na serveru – typicky s expirací 1 rok pro soubory, které se nemění. Server cache ukládá vygenerovaný HTML obsah, aby server nemusel při každém požadavku znovu generovat stránku z databáze. To dramaticky snižuje časy odezvy serveru. CDN (Content Delivery Network) je síť serverů rozmístěných po celém světě, která doručuje statický obsah z geograficky nejbližšího serveru uživateli. Díky tomu se snižuje latence a zrychluje načítání o desítky procent, zejména pro mezinárodní návštěvníky. Populární CDN služby jsou Cloudflare, AWS CloudFront nebo Bunny CDN.

• Minifikace a komprese souborů

Minifikace znamená odstranění všech zbytečných znaků z kódu – mezery, odřádkování, komentáře – bez změny funkčnosti. CSS a JavaScript soubory lze typicky zmenšit o 20–40 %. Minifikaci provádějí nástroje jako Terser nebo cssnano. Komprese Gzip nebo Brotli dále zmenšuje textové soubory při přenosu ze serveru do prohlížeče. Brotli dosahuje o 15–20 % lepší komprese než Gzip. Kompresi nastavujete na serveru – moderní hosting služby ji často mají automaticky zapnutou. Kombinace minifikace a komprese může snížit velikost souborů až o 70 %, což výrazně zrychlí načítání webu zejména na pomalejším připojení.

Vliv performance na SEO a konverze

Performance webu je od roku 2021 oficiálním ranking faktorem Google – rychlé weby mají výhodu ve vyhledávání, pomalé jsou penalizovány. Google Page Experience update zařadil Core Web Vitals mezi faktory, které ovlivňují pozici ve výsledcích vyhledávání. Ale ještě důležitější je dopad rychlosti na uživatelské chování a konverze. Podle studie Google způsobuje každá sekunda prodloužení načítání 7–20% pokles konverzního poměru. To znamená, že pokud váš e-shop načítá 5 sekund místo 2 sekund, může to znamenat ztrátu až 40 % objednávek.

Amazon vypočítal, že každých 100 milisekund zpoždění stojí 1 % tržeb. Web s dobou načtení 5 sekund má typicky 50 % vyšší bounce rate (okamžité odchody) než web s dobou 2 sekundy. Mobilní uživatelé jsou ještě netrpělivější – 53 % opustí web, pokud se načítá déle než 3 sekundy. Performance tedy není jen o SEO – je to především o tom, aby návštěvníci na vašem webu zůstali a provedli akci.

Rychlý web vytváří dojem profesionality a důvěryhodnosti, zatímco pomalý web působí zastarale a nespolehlivě. V konkurenčním prostředí internetu je rychlost často rozhodujícím faktorem mezi úspěchem a neúspěchem. Google navíc upřednostňuje weby, které poskytují dobrou uživatelskou zkušenost, což znamená, že optimalizace výkonu má dvojí přínos – spokojené návštěvníky i lepší viditelnost ve vyhledávání. Pro měření dopadu performance můžete využít nástroje jako Google Analytics, které sledují bounce rate, dobu na stránce a konverzní poměry v závislosti na rychlosti načítání.

Nejčastější příčiny pomalého webu

Diagnostika problémů s výkonem je prvním krokem k jejich vyřešení. Existuje několik typických viníků, které zpomalují české weby:

• Neoptimalizované obrázky

Největším problémem českých webů jsou obrázky v původní velikosti přímo z fotoaparátu – soubory o velikosti 5–10 MB, které web zpomalují na minuty namísto sekund. Řešením je komprese všech obrázků před nahráním na web, použití moderních formátů WebP místo JPEG a implementace responzivních obrázků pro mobilní zařízení. Nástroje jako TinyPNG nebo Squoosh dokáží snížit velikost obrázků o 70–80 % bez viditelné ztráty kvality.

• Absence cache mechanismů

Mnoho webů, zejména těch postavených na vlastním kódu nebo starších CMS, nemá nastavenou cache. To znamená, že každá návštěva stránky načítá všechny soubory znovu, což zbytečně zatěžuje server i uživatelovo připojení. Správná konfigurace browser cache umožní ukládat statické soubory na rok dopředu, což dramaticky zrychlí opakované návštěvy.

• Pomalý nebo přetížený hosting

Nejlevnější sdílené hosting tarify často sdílí jeden server mezi stovky webů, což vede k pomalé odezvě serveru. Time to First Byte (TTFB) – doba, než server začne posílat data – by měla být pod 200 milisekund. Pokud je TTFB vyšší než 600 ms, pravděpodobně potřebujete upgrade hostingu na SSD servery nebo VPS. Kvalitní hosting v České republice nabízejí například Wedos, Forpsi nebo Stable.cz.

• Nadměrné množství pluginů (WordPress)

Weby na WordPressu často trpí "plugin bloat" – desítky pluginů, z nichž každý přidává další CSS a JavaScript soubory. Ideální je mít méně než 15 aktivních pluginů a pravidelně kontrolovat, které skutečně potřebujete. Některé pluginy navíc načítají své skripty na všech stránkách, i když je potřebujete jen na jedné.

• Blokující CSS a JavaScript

Skripty a styly v hlavičce stránky blokují vykreslení obsahu – prohlížeč musí nejdřív stáhnout a zpracovat všechny soubory, než uživateli zobrazí cokoliv. Řešením je přesunutí nepodstatných skriptů na konec stránky, použití atributů async nebo defer pro JavaScript a kritické CSS vložené přímo do HTML hlavičky.

Související pojmy