Rychlost webu: Proč návštěvník odejde, než se vaše stránka načte

53 % návštěvníků odejde, pokud se web načítá déle než 3 sekundy. Rychlost není detail — je základ. Jak web zrychlit a udržet návštěvníky.

3 sekundy. Pak jdou.

Google provedl studii: 53 % návštěvníků mobilu odejde, pokud se web načítá déle než 3 sekundy. Tři sekundy. To je čas, za který se načte většina WordPress webů, které vidím. To je čas, za který se načte většina webů s pluginy. To je čas, za který se načte většina webů, které nejsou optimalizované.

A co je horší: rychlost ovlivňuje SEO. Google používá Core Web Vitals — metriky rychlosti — jako faktor hodnocení. Pomalý web = horší pozice. Rychlý web = lepší pozice. Je to tak jednoduché.

Co brzdí web

Většina webů, se kterými se setkávám, je pomalá kvůli třem věcem:

1. Velké obrázky. Fotka z fotoaparátu má 5 MB. Na webu by měla mít 200 KB. Ale většina lidí nahrává fotky bez komprese — a web je načítá celé. Pět fotek po 5 MB = 25 MB k načtení. Na mobilu přes 4G to trvá 10 sekund. Deset sekund. Návštěvník je pryč.

2. Pluginy a skripty. Každý plugin na WordPressu přidává skripty. Analytika, chaty, formuláře, mapy — každý něco váží. Když jich máte 15, web se načítá jako by měl 15 let. Na každém projektu, který stavím, běží jen to, co je potřeba. Žádné zbytečné pluginy.

3. Neoptimalizovaný kód. Většina webů na WordPressu načítá stejný kód na každé stránce. I když stránka potřebuje jen 10 % toho kódu. Na webech, které stavím, se načítá jen to, co daná stránka potřebuje. Rychlejší načítání, menší datový objem.

Core Web Vitals: Co Google měří

Google měří tři metriky, které sleduji na každém projektu:

LCP (Largest Contentful Paint) — Jak rychle se načte největší prvek na stránce (obvykle hlavní obrázek). Cíl: pod 2,5 sekundy.

INP (Interaction to Next Paint) — Jak rychle web reaguje, když na něco kliknete. Cíl: pod 200 milisekund.

CLS (Cumulative Layout Shift) — Jak moc se prvky na stránce skákají při načítání. Cíl: pod 0,1. Pokud se tlačítko, na které chcete kliknout, posune — to je CLS.

Na každém projektu, který stavím, jsou tyto metriky v zelené. Ne náhodou — designem.

Jak zrychlím obrázky

Obrázky jsou 80 % datového objemu většiny webů. Zrychlit je znamená zrychlit web.

WebP formát. WebP je moderní formát, který je o 30 % menší než JPEG při stejné kvalitě. Všechny moderní prohlížeče ho podporují. Na webech, které stavím, se obrázky automaticky konvertují na WebP.

Lazy loading. Obrázky, které nejsou vidět (jsou pod zlomem obrazovky), se nenačítají. Načítají se až když na ně uživatel scrolluje. To zrychluje první načtení.

Responzivní obrázky. Na mobilu se nenačítá obrázek 2000 pixelů široký — načítá se obrázek 400 pixelů. Menší data, rychlejší načtení.

Komprese. Každý obrázek komprimuji bez ztráty viditelné kvality. 5 MB fotka se stane 200 KB — a na obrazovce to vypadá stejně.

Jak zrychlím kód

Code splitting. Na každé stránce, kterou stavím, se načítá jen kód, který ta stránka potřebuje. Ne celý web. Ne všechny pluginy. Jen to, co je potřeba.

Minifikace. Kód minifikuji — odstraním mezery, komentáře, zbytečné znaky. Menší soubor, rychlejší načtení.

CDN. Statické soubory (obrázky, CSS, JavaScript) se načítají z CDN — sítě serverů po celém světě. Klient v Ostravě načítá ze serveru v Praze, klient v Brně z Brna. Rychlejší.

Jak měřím rychlost

Rychlost měřím v PageSpeed Insights — nástroji od Google. Zadáte URL a Google vám řekne, jak rychlý váš web je — a co ho brzdí. Na každém projektu, který stavím, je skóre 90+ na mobilu. Ne proto, že bych se snažil — ale proto, že to je můj standard.