Optimalizace PageSpeed — Zrychlete svou webovou stránku v roce 2026

Proč je rychlost faktorem hodnocení

Google potvrdil, že rychlost načítání stránek ovlivňuje jejich hodnocení. Pomalu se načítající stránky frustrují uživatele a Google chce poskytovat nejlepší zážitky. Data od Google ukazují, že pravděpodobnost, že uživatel odejde, se zvyšuje o 32 %, když doba načítání vzroste z 1 na 3 sekundy.

Ale nejde jen o hodnocení. Rychlost přímo ovlivňuje vaše hospodářské výsledky:

Konverze — Každá další sekunda doby načítání snižuje konverze až o 7 %
Míra opuštění — 53 % mobilních uživatelů opustí stránku, která se načítá déle než 3 sekundy
Uživatelský zážitek — Rychlé stránky působí profesionálně a důvěryhodně

Core Web Vitals — Googleovy metriky rychlosti

Google měří rychlost pomocí tří metrik Core Web Vitals:

LCP — Největší viditelný prvek

Měří, kdy největší viditelný prvek (obvykle obrázek nebo nadpis) dokončí načítání.

Dobré: Pod 2,5 sekundy
Potřebuje zlepšení: 2,5 — 4,0 sekundy
Špatné: Více než 4,0 sekundy

INP — Interakce k dalšímu zobrazení

Měří, jak rychle stránka reaguje, když uživatel interaguje (kliká, píše, posouvá).

Dobré: Pod 200 ms
Potřebuje zlepšení: 200 — 500 ms
Špatné: Více než 500 ms

CLS — Kumulativní posun rozložení

Měří, jak moc se rozložení mění během načítání. Znáte ten pocit — chcete na něco kliknout, ale najednou se obsah posune a kliknete na něco jiného.

Dobré: Pod 0,1
Potřebuje zlepšení: 0,1 — 0,25
Špatné: Více než 0,25

10 konkrétních tipů na optimalizaci

1. Optimalizace obrázků

Obrázky bývají obvykle největším problémem. Používejte moderní formáty jako WebP nebo AVIF, které mohou snížit velikost souboru o 30-50 % bez viditelné ztráty kvality.

Komprimujte všechny obrázky před nahráním
Používejte loading="lazy" u obrázků, které nejsou viditelné při prvotním načtení
Vždy uvádějte width a height, abyste se vyhnuli CLS
Používejte responzivní obrázky s srcset pro různé velikosti obrazovky

2. Zmenšení velikosti CSS a JavaScriptu

Odstraňte nepoužívaný kód, prázdné znaky a komentáře ze svých CSS a JS souborů. Většina nástrojů pro sestavení to dělá automaticky, ale ověřte, že se to skutečně děje v produkci.

3. Povolení komprese

Zajistěte, aby váš server odesílal soubory s Gzip nebo Brotli kompresí. To může snížit velikosti souborů až o 70 %.

4. Použití mezipaměti prohlížeče

Nastavte hlavičky Cache-Control, aby prohlížeč ukládal statické soubory (CSS, JS, obrázky) lokálně. Při příští návštěvě uživatele tyto soubory nebude třeba znovu stahovat.

5. Snížení doby odezvy serveru

Doba odezvy vašeho serveru (Time to First Byte, TTFB) by měla být pod 200 ms. Řešení:

Používejte rychlého poskytovatele hostingu
Povolení mezipaměti na straně serveru
Optimalizace databázových dotazů
Používání CDN pro doručování statických souborů ze serverů blízkých uživateli

6. Odložení nekritického JavaScriptu

JavaScript, který není potřebný pro počáteční zobrazení, by měl být načítán asynchronně pomocí async nebo defer. To obvykle zahrnuje analytiku, chatovací widgety a embedded příspěvky ze sociálních médií.

7. Přednačítání kritických zdrojů

Použijte pro písma, CSS a obrázky potřebné pro počáteční zobrazení. Tímto řeknete prohlížeči, aby těmto souborům dal prioritu.

8. Odstranění zdrojů blokujících renderování

CSS a JavaScript v blokují renderování stránky. Přesuňte nekritické CSS dolů a inline CSS potřebné pro počáteční zobrazení (kritické CSS).

9. Použití CDN

Content Delivery Network distribuuje vaše soubory na servery po celém světě. Uživatelé stahují z nejbližšího serveru, což značně snižuje latenci.

10. Optimalizace webových písem

Vlastní písma mohou zpozdit zobrazení textu:

Používejte font-display: swap, aby se text zobrazil s fallback písmem, dokud se načítá vlastní písmo
Omezte svá písma pouze na znaky, které používáte
Přednačítejte nejdůležitější písma
Zvažte systémová písma pro text těla

Jak testovat svou rychlost

Google PageSpeed Insights

Oficiální nástroj od Google. Poskytuje vám jak laboratorní data (simulovaná), tak data z reálného světa (skuteční uživatelé) spolu s konkrétními návrhy na zlepšení.

Chrome DevTools

Otevřete DevTools (F12), přejděte na panel "Performance" a zaznamenejte načítání stránky. Můžete vidět, co přesně zabírá čas a v jakém pořadí se soubory načítají.

WebPageTest

Pokročilý testovací nástroj, který vám umožňuje testovat z různých míst a rychlostí připojení. Poskytuje podrobné vodopádové diagramy.

Prioritizace — začněte zde

Pokud potřebujete vybrat tři věci, na které se zaměřit:

Obrázky — Komprimujte a převádějte na WebP. Největší dopad s nejmenším úsilím.
Caching — Nastavte správné hlavičky Cache-Control. Jednorázové nastavení.
JavaScript — Odložte vše nekritické. Snižte skripty třetích stran.

Chcete vědět, jak si váš web vede? Proveďte bezplatný audit a zjistěte své Core Web Vitals a skóre rychlosti.