PageSpeed Insights

PageSpeed Insights: Kompletní průvodce pro měření a zlepšení rychlosti webu

Rychlost načítání webu je jedním z nejdůležitějších faktorů, které ovlivňují uživatelskou zkušenost (UX), konverze a pozice ve vyhledávačích (SEO). Pokud je váš web pomalý, návštěvníci ho opustí dříve, než se vůbec dostanou k obsahu, a Google ho může penalizovat nižším umístěním ve výsledcích vyhledávání.

Právě zde přichází na řadu PageSpeed Insights (PSI) – zdarma dostupný nástroj od Googlu, který analyzuje výkon vašeho webu a poskytuje konkrétní doporučení, jak ho zrychlit.

V tomto článku se dozvíte: ✅ Co je PageSpeed Insights a jak funguje ✅ Jaké metriky měří a co znamenají (LCP, CLS, INP/FID atd.) ✅ Jak číst výsledky a co které sekce znamenají ✅ Praktické tipy, jak zlepšit skóre a výkon webu ✅ Kde nástroj najdete a jak ho správně používat ✅ Limity PSI a kdy je dobré použít další nástroje

1. Co je PageSpeed Insights (PSI) a k čemu slouží?

PageSpeed Insights je nástroj od Googlu, který měří rychlost a výkon webových stránek na mobilních i desktopových zařízeních. Poskytuje: ✔ Skóre výkonu (0–100) – čím vyšší, tím lépe. ✔ Rozdělení do klíčových kategorií (rychlost načítání, interaktivita, stabilita rozvržení). ✔ Konkrétní doporučení, jak zlepšit výkon (optimalizace obrázků, skriptů, serveru atd.). ✔ Simulaci uživatelského prohlížení (vychází z Lighthouse, nástroje pro audit výkonu).

Proč je PSI důležitý?

Google bere rychlost webu jako rankingový faktor (od roku 2010, s důrazem na Core Web Vitals od roku 2021).
Pomalé stránky zvyšují míru okamžitého opuštění (bounce rate) – uživatelé nečekají.
Rychlejší weby mají vyšší konverze (např. e-shopy prodávají více).
PSI ukazuje, co přesně brzdí váš web, a nabízí řešení.

2. Hlavní metriky v PageSpeed Insights (a co znamenají)

PSI měří několik klíčových ukazatelů, které ovlivňují uživatelskou zkušenost a SEO. Nejdůležitější jsou Core Web Vitals – sada metrik, které Google oficiálně používá pro hodnocení webu.

A. Core Web Vitals (nejdůležitější metriky pro SEO)

1. LCP (Largest Contentful Paint) – Rychlost načítání hlavního obsahu

🔹 Co měří? Dobu, za kterou se načte největší viditelný prvek (obrázek, video, textový blok) v první obrazovce (viewportu). 🔹 Ideální hodnota: Do 2,5 sekundy (nad 4 s je špatně). 🔹 Co ho ovlivňuje?

Pomalé načítání obrázků/videí.
Pomalejší server (dlouhá doba odezvy – TTFB).
Blokující JavaScript a CSS.

📌 Příklad: Pokud máte na úvodní stránce velký banner (1920×1080 px, 2 MB), může se načítat pomalu. Řešení: Komprimovat obrázek na WebP formát a použít lazy loading.

2. CLS (Cumulative Layout Shift) – Stabilita rozvržení stránky

🔹 Co měří? Posuny prvků během načítání (např. když se náhle posune text, protože se načte obrázek nebo reklama). 🔹 Ideální hodnota: Méně než 0,1 (nad 0,25 je špatně). 🔹 Co ho způsobuje?

Obrázky nebo reklamy bez definovaných rozměrů (width a height).
Dynamicky vkládané prvky (např. banner, který se načte později).
Písma, která se načtou až po zbytku stránky (FOIT/FOUT).

📌 Příklad: Pokud máte článek a náhle se mezi odstavce vloží reklama, uživatel může omylem kliknout jinam. Řešení: Přidat do obrázků a iframe atributy width a height nebo použít aspect-ratio v CSS.

3. INP (Interaction to Next Paint) – Rychlost reakce na uživatelské akce

🔹 Co měří? Dobu, za kterou web zareaguje na kliknutí, stisknutí tlačítka nebo jinou interakci. 🔹 Ideální hodnota: Do 200 ms (nad 500 ms je špatně). 🔹 Co ho ovlivňuje?

Těžké JavaScriptové skripty, které blokují hlavní vlákno.
Pomalejší serverové zpracování (např. PHP, databázové dotazy).
Nedostatečná optimalizace interaktivních prvků (tlačítek, formulářů).

📌 Příklad: Pokud máte na stránce tlačítko "Přidat do košíku", ale po kliknutí trvá 1 sekundu, než se něco stane, uživatel může odejít. Řešení: Optimalizovat JavaScript, použít code splitting nebo Web Workers pro náročné úkony.

B. Další důležité metriky v PSI

Metrika	Co měří?	Ideální hodnota	Co ji ovlivňuje?
FCP (First Contentful Paint)	Kdy se zobrazí první obsah (text, obrázek).	Do 1,8 s	Pomalejší server, blokující skripty.
TTI (Time to Interactive)	Kdy je stránka plně interaktivní.	Do 3,8 s	Těžké JS, pomalé načítání zdrojů.
TBT (Total Blocking Time)	Celková doba blokování hlavního vlákna.	Méně než 200 ms	Nedostatečně optimalizovaný JS.
Speed Index	Rychlost vizuálního načítání stránky.	Méně než 3,4 s	Pomalejší renderování, velké obrázky.

3. Jak číst výsledky v PageSpeed Insights?

Po zadání URL do PSI uvidíte dvě hlavní sekce:

Skóre výkonu (0–100) – zelená (90–100) = dobré, oranžová (50–89) = průměrné, červená (0–49) = špatné.
Detailní analýza – rozložená do několika částí.

A. Sekce "Opportunities" (Příležitosti ke zlepšení)

🔹 Co obsahuje? Konkrétní návrhy, které mají největší vliv na zrychlení webu. 🔹 Příklady doporučení:

"Proveďte kompresi obrázků" (např. zmenšit JPG na WebP).
"Odstraňte nevyužité CSS" (minimalizovat soubory).
"Použijte cachování pro statické zdroje" (nastavit Cache-Control).
"Odložte načítání nekritických skriptů" (použít defer nebo async).

📌 Praktický příklad: Pokud PSI ukáže: "Obrázky by mohly ušetřit 500 KB" → Použijte nástroj jako TinyPNG nebo Squoosh a převeďte je do WebP formátu.

B. Sekce "Diagnostics" (Diagnostika)

🔹 Co obsahuje? Technické problémy, které nemusí přímo ovlivnit skóre, ale mohou zhoršit výkon. 🔹 Příklady:

"Chybí alt texty u obrázků" (důležité pro SEO a přístupnost).
"Použijte moderní formáty obrázků (WebP, AVIF)".
"Snižte počet přesměrování" (každé přesměrování zvyšuje dobu načítání).

C. Sekce "Passed Audits" (Úspěšné kontroly)

🔹 Co obsahuje? Věci, které máte správně (např. správně nastavené cachování, komprimované obrázky). 🔹 Proč je důležitá? Ukazuje, co už nemusíte řešit.

D. Rozdíl mezi "Lab Data" a "Field Data"

Lab Data	Field Data
Simulované testy (v kontrolovaném prostředí).	Skutečná data od uživatelů (z Chrome User Experience Report).
Dobré pro rychlé testování změn.	Ukazuje reálný výkon v produkčním prostředí.
Může se lišit od skutečného výkonu.	Zohledňuje různé zařízení a sítě.

📌 Kdy co použít?

Lab Data → Při vývoji a testování změn.
Field Data → Pro dlouhodobé monitorování výkonu.

4. Praktické tipy, jak zlepšit skóre v PageSpeed Insights

Níže najdete konkrétní kroky, které nejčastěji zlepšují výkon webu podle doporučení PSI.

A. Optimalizace obrázků (nejčastější problém!)

✅ Komprimujte obrázky (použijte TinyPNG, Squoosh, nebo ImageOptim). ✅ Používejte moderní formáty (WebP, AVIF místo JPG/PNG). ✅ Nastavte správné rozměry (nenačítejte 1920px obrázek, když stačí 800px). ✅ Použijte lazy loading (loading="lazy" pro obrázky mimo první obrazovku). ✅ Definujte width a height (zabrání posunům layoutu – CLS).

📌 Příklad kódu:

<img src="obrazek.webp" width="800" height="400" loading="lazy" alt="Popis obrázku">

B. Optimalizace JavaScriptu a CSS

✅ Minimalizujte a sloučte soubory (použijte Terser pro JS, CSSNano pro CSS). ✅ Použijte defer nebo async pro skripty, které nejsou kritické.

<script src="skript.js" defer></script> <!-- Načte se až po HTML -->

✅ Odstraňte nevyužitý kód (nástroje: PurgeCSS, UnCSS). ✅ Použijte code splitting (rozdělte velké JS soubory na menší části).

C. Optimalizace serveru a sítě

✅ Použijte cachování (nastavte Cache-Control v .htaccess nebo Nginx).

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
</IfModule>

✅ Aktivujte kompresi (Gzip/Brotli) (sníží velikost přenášených dat). ✅ Použijte CDN (Cloudflare, BunnyCDN) pro rychlejší doručení obsahu. ✅ Optimalizujte TTFB (Time To First Byte) – zlepšete výkon backendu (PHP, databáze).

D. Optimalizace načítání obsahu

✅ Prioritizujte kritický CSS (vložte ho přímo do <head>). ✅ Odložte načítání nekritických skriptů (např. analytické nástroje). ✅ Použijte preload pro důležité zdroje (písma, klíčové skripty).

<link rel="preload" href="font.woff2" as="font" crossorigin>

✅ Snižte počet HTTP požadavků (sloučte soubory, použijte CSS sprites).

E. Zlepšení mobilní verze

✅ Použijte responsive design (mediální dotazy, flexbox/grid). ✅ Optimalizujte písma (použijte font-display: swap).

@font-face {
  font-family: 'MojePismo';
  src: url('pismo.woff2') format('woff2');
  font-display: swap;
}

✅ Snižte velikost stránky (mobilní sítě jsou pomalejší).

5. Kde najdete PageSpeed Insights a jak ho používat?

A. Jak otevřít PSI?

Přejděte na oficiální stránku: 🔗 https://pagespeed.web.dev/
Zadejte URL své stránky a klikněte na "Analyzovat".
Počkejte na výsledky (trvá obvykle 10–30 sekund).

B. Jak správně testovat?

✔ Testujte obě verze (mobil i desktop) – mobilní verze bývá pomalejší. ✔ Opakujte testy po změnách – ověřte, zda se skóre zlepšilo. ✔ Kombinujte s dalšími nástroji (GTmetrix, WebPageTest) pro komplexnější analýzu.

6. Limity PageSpeed Insights – kdy ho nepoužívat?

⚠ PSI není dokonalý a má některá omezení:

Nezohledňuje všechny reálné podmínky (např. pomalé mobilní sítě).
Některá doporučení mohou být příliš obecná (např. "optimalizujte obrázky" bez konkrétních detailů).
Field Data (skutečná data) nemusí být k dispozici pro všechny stránky.

Kdy použít jiné nástroje?

Nástroj	K čemu slouží?
GTmetrix	Detailní analýza vodopádového grafu (waterfall).
WebPageTest	Testování z různých lokalit a zařízení.
Lighthouse (v Chrome DevTools)	Lokální testování během vývoje.
Chrome User Experience Report (CrUX)	Skutečná data od uživatelů.

7. Závěr: Proč byste měli PSI používat?

✅ Zjistíte, co zpomaluje váš web a jak to opravit. ✅ Zlepšíte uživatelskou zkušenost (nižší bounce rate, vyšší konverze). ✅ Posílíte své SEO (Google preferuje rychlé weby). ✅ Ušetříte čas – PSI poskytuje konkrétní návody, nemusíte hádat, co je špatně.

🔹 Doporučení:

Testujte pravidelně (alespoň 1x měsíčně).
Začněte s nejdůležitějšími problémy (LCP, CLS, INP).
Kombinujte PSI s dalšími nástroji pro komplexní analýzu.

Použité zdroje

AHREFS. Domain Rating: What It Is and How to Improve It. [online]. 2023. [cit. 2024-02-20]. Dostupné z: https://ahrefs.com/blog/domain-rating/

Autor: Michal Binka Datum poslední úpravy: 20. února 2025

PageSpeed Insights