Co je PageSpeed a proč na něm záleží? – Kompletní průvodce

PageSpeed označuje rychlost načítání webové stránky a zahrnuje všechny aspekty, které ovlivňují doba načítání obsahu na uživatelském zařízení. Rychlost načítání stránek je klíčovým faktorem pro SEO, uživatelský zážitek (UX) a míru konverze. Google a další vyhledávače využívají PageSpeed jako hodnotící faktor, který ovlivňuje pořadí ve vyhledávání (SERP).

Co je PageSpeed?

PageSpeed je rychlost načítání webové stránky, která zahrnuje:

• Doba načítání prvního obsahu na obrazovce (text, obrázky, videa).
• Doba do plné interaktivity stránky – kdy je uživatel schopen provádět akce (klikání, psaní).
• Celková doba načítání stránky – od prvního načtení až po úplné zobrazení všech prvků.

PageSpeed ovlivňuje nejen uživatelský zážitek, ale také SEO hodnocení, protože Google považuje rychlost stránky za důležitý hodnotící faktor. Rychlejší stránky jsou lépe hodnoceny ve vyhledávání a mají vyšší míru konverze.

Co PageSpeed rozhodně není?

• PageSpeed není jen o době načítání celé stránky. Není to pouze čas, za který se načte všechno na stránce. Google sleduje různé metriky, které hodnotí rychlost načtení důležitých prvků a interaktivitu stránky.
• PageSpeed není jen o rychlosti serveru. Ačkoli výkon serveru hraje důležitou roli, PageSpeed zahrnuje optimalizaci obrázků, JavaScriptu, CSS, caching, CDN a další techniky.
• PageSpeed není jen o desktopovém výkonu. Google hodnotí mobilní verzi stránek, která je primárním faktorem pro indexaci.

Proč je PageSpeed důležitý?

1. SEO a hodnocení ve vyhledávačích

Google považuje PageSpeed za jeden z klíčových faktorů pro hodnocení webových stránek. Rychlejší weby mají vyšší šanci na lepší pozice ve výsledcích vyhledávání (SERP), protože Google upřednostňuje weby s lepší uživatelskou zkušeností.

Jak PageSpeed ovlivňuje SEO?

✅ Rychlejší weby mají vyšší šanci na lepší umístění – Google používá PageSpeed jako součást svého algoritmu hodnocení webů. Weby, které se načítají pomalu, mohou ztratit viditelnost ve vyhledávání, zejména na mobilních zařízeních.

✅ Google Core Web Vitals – PageSpeed je součástí Core Web Vitals, což jsou metriky zaměřené na měření uživatelského zážitku na webu. Tyto metriky zahrnují LCP (Largest Contentful Paint), FID (First Input Delay) a CLS (Cumulative Layout Shift). Google je začlenil do svého hodnocení jako oficiální faktor SEO od roku 2021.

✅ Mobilní indexování – Google přepnul na mobile-first index, což znamená, že rychlost načítání stránky na mobilních zařízeních má větší váhu než na desktopu. Weby s pomalým načítáním na mobilu mohou klesnout v hodnocení, i když mají kvalitní obsah.

✅ Nižší crawl budget – Weby s dlouhou dobou načítání mohou negativně ovlivnit crawl budget, což je limitovaný počet stránek, které Googlebot během určitého časového období prochází. Pokud se stránky načítají pomalu, Google může indexovat méně obsahu, což negativně ovlivní viditelnost webu ve vyhledávačích.

📌 Statistika:

• 53 % mobilních uživatelů opustí web, pokud se stránka načítá déle než 3 sekundy.
• Weby, které se načítají do 1 sekundy, mají o 3x vyšší pravděpodobnost získání vyšších pozic v SERP než weby, které se načítají 5 sekund nebo déle.

2. Uživatelský zážitek (UX)

Rychlost načítání stránky přímo ovlivňuje spokojenost uživatelů. Pokud se stránka načítá pomalu, uživatelé ji často opustí ještě před načtením a raději přejdou ke konkurenci.

Jak rychlost ovlivňuje UX?

✅ Nižší míra opuštění (bounce rate) – Stránky, které se načítají rychleji, mají výrazně nižší bounce rate.
✅ Vyšší engagement – Uživatelé jsou ochotni zůstat na rychlých stránkách déle, což zvyšuje jejich pravděpodobnost konverze.
✅ Větší pravděpodobnost návratu uživatele – Pokud uživatelé vědí, že váš web je rychlý, je pravděpodobnější, že se k vám vrátí.
✅ Lepší vnímání značky – Rychlost webu ovlivňuje také důvěryhodnost značky. Pomalé načítání dává uživatelům signál, že web není profesionální nebo aktuální.

📌 Statistika:

• Rychlost načítání je hlavní faktor ovlivňující první dojem o webu. Uživatelé si utváří názor na web v průměru za 0,05 sekundy.
• 1s zpoždění načítání může snížit uživatelskou spokojenost až o 16 %.
• Weby, které se načítají déle než 3 sekundy, mají bounce rate až 90 %.

3. Míra konverze a výkonnost webu

PageSpeed má přímý vliv na míru konverze a prodejů. Pokud je web pomalý, uživatelé mají menší pravděpodobnost, že dokončí nákup nebo vyplní formulář.

Jak rychlost ovlivňuje konverze?

✅ Vyšší pravděpodobnost nákupu – Rychlé e-commerce weby mají vyšší konverzní poměr.
✅ Větší důvěryhodnost značky – Pokud je web rychlý, uživatelé se cítí bezpečněji a jsou ochotnější provést akci (nákup, registraci, rezervaci).
✅ Mobilní uživatelé konvertují častěji – Rychlé mobilní weby mají o 67 % vyšší pravděpodobnost konverze než pomalé weby.

📌 Statistika:

• Amazon uvedl, že každých 100 ms zpoždění způsobuje pokles prodeje o 1 %.
• Google zjistil, že zpoždění načítání o 1 sekundu může snížit konverze až o 20 %.
• Walmart zaznamenal 2% nárůst konverzí za každých 0,1 sekundy, o kterou se jejich stránky načetly rychleji.

Klíčové metriky PageSpeedu

1. LCP (Largest Contentful Paint)

LCP měří dobu, za kterou se načte a vykreslí největší vizuální prvek na stránce (obrázek, video, nadpis, velký blok textu). Tato metrika reflektuje, jak rychle uživatel uvidí hlavní obsah webu.

Ideální hodnota:

✅ Pod 2,5 sekundy
⚠️ 2,5 – 4 sekundy (potřebuje zlepšení)
❌ Nad 4 sekundy (špatné)

Co nejčastěji způsobuje špatný LCP?

• Velké neoptimalizované obrázky nebo videa.
• Pomalu načítaný render-blocking JavaScript a CSS.
• Pomalá odezva serveru (Time to First Byte - TTFB).
• Nepoužívání caching technik nebo Content Delivery Network (CDN).

Jak optimalizovat LCP?

✅ Optimalizace obrázků

• Používejte moderní formáty jako WebP, AVIF (menší soubory než PNG/JPEG).
• Komprese obrázků pomocí nástrojů jako TinyPNG, ImageOptim, Squoosh.

✅ Lazy loading pro obrázky a videa

• Umožňuje načítání obsahu až při scrollování uživatele:

✅ Přednačítání kritického obsahu (Critical CSS, Preload)

• Definujte klíčové styly přímo v <head> nebo je vygenerujte pomocí Critical CSS:

✅ Využití CDN

• Použitím Cloudflare, Fastly nebo Akamai můžete snížit dobu načítání hlavního obsahu.

✅ Zrychlení serverové odezvy

• Použití cachování na straně serveru a optimalizace databázových dotazů.
• Přechod na výkonnější hosting.

2. FID (First Input Delay)

FID měří dobu mezi prvním uživatelským vstupem (např. kliknutí na tlačítko, stisknutí klávesy) a okamžikem, kdy je tato akce skutečně zpracována prohlížečem. Čím kratší doba, tím rychleji web reaguje na akce uživatele.

Ideální hodnota:

✅ Pod 100 ms
⚠️ 100 – 300 ms (potřebuje zlepšení)
❌ Nad 300 ms (špatné)

Co nejčastěji způsobuje špatný FID?

• Blokování hlavního vlákna těžkými JavaScriptovými úlohami.
• Nadměrné skripty třetích stran (např. reklamy, analytika).
• Velké množství DOM manipulací.

Jak optimalizovat FID?

✅ Minimalizace a komprese JavaScriptu

• Používejte code splitting k oddělení kritických a neblokujících skriptů.
• Komprimujte JS soubory pomocí UglifyJS nebo Terser.

✅ Odložení načítání nepotřebných scriptů

• Používejte atributy defer nebo async při načítání externích skriptů:

✅ Použití Web Workers pro těžké výpočty

• Web Workers umožňují provádět náročné operace mimo hlavní vlákno:

✅ Optimalizace skriptů třetích stran

• Minimalizujte externí skripty (např. reklamy, sociální widgety).
• Načítejte analytické nástroje (Google Analytics, Facebook Pixel) s async nebo lazy loading.

✅ Redukce DOM manipulací

• Místo neustálé manipulace DOM použijte Virtual DOM (React) nebo batche úprav:

3. INP (Interaction to Next Paint) - Náhrada za FID?

• Prioritizujte kritické CSS a ostatní styly načítejte lazy loadingem.

✅ Použití Web Workers pro těžké výpočty

• Web Workers umožňují provádět výpočetně náročné operace mimo hlavní vlákno:

const worker = new Worker('worker.js');
worker.postMessage({ data: 'náročná operace' });

✅ Optimalizace renderování a DOM manipulací

• Minimalizujte opakované změny DOM – místo toho provádějte batche úprav.
• Používejte requestAnimationFrame pro plynulé animace místo setTimeout().
• Zvažte použití Virtual DOM (React, Vue) pro efektivní aktualizaci UI.

✅ Omezení skriptů třetích stran

• Minimalizujte reklamy, analytiku a externí widgety – načítejte je lazy loadingem.
• Používejte asynchronní načítání Google Analytics, Facebook Pixel:

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX"></script>

4. CLS (Cumulative Layout Shift)

CLS měří vizuální stabilitu stránky a hodnotí, zda se prvky na stránce neočekávaně posouvají během načítání. Vysoké CLS způsobuje, že uživatel klikne na nesprávný prvek nebo ztratí orientaci.

Ideální hodnota:

✅ Pod 0,1
⚠️ 0,1 – 0,25 (potřebuje zlepšení)
❌ Nad 0,25 (špatné)

Co nejčastěji způsobuje špatný CLS?

• Obrázky bez definovaných rozměrů (width a height).
• Reklamy a dynamický obsah načítaný asynchronně.
• Načítání webových fontů způsobující "FOUT" nebo "FOIT".
• Pozdní aplikace CSS stylů.

Jak optimalizovat CLS?

✅ Rezervace místa pro obrázky a reklamy

• Definujte pevné rozměry obrázků a videí:

• Použijte CSS aspect-ratio pro flexibilní rozměry:

✅ Zamezení posunů způsobených webovými fonty

• Používejte font-display: swap; k rychlejšímu načítání náhradního fontu:

✅ Odložené načítání externích prvků (reklamy, widgety, iframy)

• Rezervujte pevný prostor pro reklamy:

• Použijte lazy loading:

✅ Minimalizace JavaScriptového reflow

Další metriky pro PageSpeed

1. LPS (Loading Performance Score)

LPS je celkové skóre načítání stránky, které se vypočítává na základě všech hlavních metrik (LCP, FID, CLS, FCP, TBT, TTFB). Je to číselná hodnota, kterou Google PageSpeed Insights přiděluje každé analyzované stránce.

Skóre se pohybuje v rozmezí 0–100, kde:

• 90–100 → Výborné skóre, web se načítá velmi rychle.
• 50–89 → Průměrné skóre, stránka potřebuje optimalizaci.
• 0–49 → Špatné skóre, pomalá stránka negativně ovlivňuje uživatelskou zkušenost a SEO.

Jak optimalizovat LPS?

✅ Optimalizujte všechny klíčové metriky (LCP, FID, CLS, TBT, TTFB, FCP).
✅ Minimalizujte HTTP požadavky – Odstranění nepotřebných CSS, JS a třetích stran.
✅ Využijte předběžné načítání obsahu – Preload, preconnect a prefetch pro klíčové zdroje.
✅ Zlepšete caching – Použití browser cache, server-side cache a CDN.
✅ Optimalizujte serverovou odezvu – Lepší hosting, snížení doby TTFB.

2. TTFB (Time to First Byte)

TTFB měří dobu mezi odesláním požadavku na server a obdržením prvního bytu dat.
Je to kritická metrika, která ovlivňuje celý proces načítání stránky.

Doporučené hodnoty TTFB:

• Pod 200 ms → Ideální
• 200–500 ms → Potřebuje zlepšení
• Nad 500 ms → Špatné, je třeba optimalizace

Jak optimalizovat TTFB?

✅ Zrychlete serverovou odezvu – Použijte rychlejší hosting a databázovou optimalizaci.
✅ Používejte CDN (Content Delivery Network) – Zkrátí dobu komunikace mezi uživatelem a serverem.
✅ Aktivujte serverové cachování – Umožní rychlejší doručování statického obsahu.
✅ Minimalizujte zpracování na serveru – Optimalizujte SQL dotazy, odstranění nepotřebných přesměrování.
✅ Povolit HTTP/2 nebo HTTP/3 – Modernější protokoly umožňují rychlejší načítání dat.

📌 Příklad:
E-commerce web s průměrným TTFB 900 ms po optimalizaci serveru a zavedení CDN snížil TTFB na 180 ms, což vedlo k nárůstu konverzí o 12 %.

3. FCP (First Contentful Paint)

FCP měří čas, za který se na stránce poprvé objeví jakýkoliv viditelný obsah (text, obrázek, SVG, video). Čím rychleji se obsah objeví, tím lepší je dojem uživatele.

Doporučené hodnoty FCP:

• Pod 1,8 sekundy → Výborné
• 1,8–3 sekundy → Potřebuje zlepšení
• Nad 3 sekundy → Špatné

Jak optimalizovat FCP?

✅ Minimalizace render-blocking CSS a JS – Odstranění neblokujícího CSS a JavaScriptu.
✅ Použití Critical CSS – Načtení jen nutného CSS přímo v <head>.
✅ Lazy loading obrázků – Oddálení načítání obrázků mimo viewport.
✅ Preload klíčových zdrojů – Přednačtení fontů, stylů a prvků webu.
✅ Zmenšení počtu font requests – Použití font-display: swap; pro rychlejší načítání.

📌 Příklad:
Web s FCP 3,2 s snížil FCP na 1,4 s pomocí optimalizace CSS a přednačítání klíčových zdrojů, čímž snížil bounce rate o 18 %.

4. TBT (Total Blocking Time)

TBT měří celkový čas, po který hlavní vlákno (main thread) zůstává zablokováno při zpracování úloh delších než 50 ms. Vysoký TBT znamená, že stránka není interaktivní a uživatel musí čekat.

Doporučené hodnoty TBT:

• Pod 200 ms → Výborné
• 200–600 ms → Potřebuje zlepšení
• Nad 600 ms → Špatné

Jak optimalizovat TBT?

✅ Minimalizujte a rozdělte dlouhé JavaScriptové úlohy – Použití requestIdleCallback() nebo Web Workers.
✅ Odložte načítání nepotřebného JavaScriptu – Použití atributu defer nebo async.
✅ Optimalizujte třetí strany (Google Analytics, reklamy) – Použití lazy loading pro widgety a analytické skripty.
✅ Eliminujte zbytečné reflow v DOM – Méně manipulací s DOM, použití Virtual DOM.

📌 Příklad:
Online magazín s TBT 1 200 ms implementoval lazy loading JavaScriptu a Web Workers a snížil TBT na 280 ms, což vedlo k rychlejší interaktivitě webu o 35 %.

5. 3PBT (Third-Party Blocking Time)

3PBT měří čas, který zabírají externí skripty (Google Tag Manager, reklamy, sociální widgety). Pokud třetí strany blokují hlavní vlákno příliš dlouho, negativně to ovlivňuje rychlost a interaktivitu webu.

Doporučené hodnoty 3PBT:

• Pod 100 ms → Výborné
• 100–300 ms → Potřebuje zlepšení
• Nad 300 ms → Špatné

Jak optimalizovat 3PBT?

✅ Minimalizujte počet externích skriptů – Používejte jen nutné třetí strany.
✅ Načítejte skripty asynchronně (async, defer) –

htmlZkopírovatUpravit<script async src="https://example.com/analytics.js"></script>

✅ Lazy loading pro widgety třetích stran – Načítání jen při interakci uživatele.
✅ Používejte místní hostování klíčových souborů – Například Google Fonts a analytické nástroje lze načítat z vlastního serveru.

📌 Příklad:
E-shop s vysokým 3PBT 480 ms odstranil nepotřebné reklamní skripty, optimalizoval Google Tag Manager a snížil 3PBT na 90 ms, čímž zvýšil rychlost interakce o 42 %. 

🔍 Trápí vás pomalý web a nízké PageSpeed skóre?

Pomohu vám optimalizovat rychlost načítání, interaktivitu i vizuální stabilitu vašeho webu. Zlepšíme společně Core Web Vitals a zajistíme lepší uživatelskou zkušenost i vyšší SEO pozice. Kontaktujte mě a prvních 15 minut konzultace máte zdarma! 🚀

Napiš mi a začněme vytvářet hodnoty ještě dnes!

Prvních 15 minut konzultace je na mě!