Core Web Vitals na webu malé firmy: jak držíme PageSpeed v zelených
Co měří Core Web Vitals, co potřebuje malý statický web, aby jimi prošel, a naše měření: výkon na mobilu z 90 na 96, první vykreslení z 2,86 na 1,70 s.
- Core Web Vitals jsou tři měření skutečných návštěv: LCP (načítání), INP (odezva) a CLS (stabilita rozvržení).
- Malý statický web jimi projde, když se vyhne několika věcem: blokujícím požadavkům na cizí servery, předimenzovaným obrázkům, obrázkům bez rozměrů a těžkým skriptům.
- Naše úvodní stránka: jediná změna, fonty hostované u nás, zkrátila první vykreslení na mobilu z 2,86 s na 1,70 s a zvedla výkon z 90 na 96.
- Jednou dosáhnout zelené je snadné. Udržet ji vyžaduje pravidelné měření a někoho, kdo ho čte.
Core Web Vitals jsou tři měření, kterými Google posuzuje, jak stránku vnímají skuteční návštěvníci: jak rychle se objeví hlavní obsah (Largest Contentful Paint), jak rychle stránka zareaguje na klepnutí nebo kliknutí (Interaction to Next Paint) a jak moc rozvržení při načítání poskakuje (Cumulative Layout Shift). Web malé firmy, zvlášť statický, projde všemi třemi bez speciálních nástrojů. Většinou stačí nenačítat nic, co blokuje první vykreslení, správně dimenzovat obrázky a držet skripty lehké. Níže najdete, co metriky znamenají, co jsme změnili na flowsmith.online, měření před a po a jak bráníme tomu, aby se web zase zhoršil.
Tři metriky a jejich hranice
| Metrika | Co měří | Dobré | Špatné |
|---|---|---|---|
| LCP, Largest Contentful Paint | Kdy se vykreslí největší viditelný prvek, často úvodní obrázek nebo nadpis | ≤ 2,5 s | > 4 s |
| INP, Interaction to Next Paint | Jak dlouho stránce trvá viditelně zareagovat na kliknutí, klepnutí a stisk klávesy | ≤ 200 ms | > 500 ms |
| CLS, Cumulative Layout Shift | Jak moc se obsah při načítání nečekaně posouvá | ≤ 0,1 | > 0,25 |
Google každou metriku hodnotí na 75. percentilu skutečných návštěv za posledních 28 dní, tedy podle takzvaných terénních dat od uživatelů Chromu. Mladý nebo malý web na terénní data často nemá dost návštěv. Pak jsou k dispozici jen laboratorní čísla: PageSpeed Insights načte stránku na simulovaném telefonu střední třídy přes zpomalené připojení. Laboratorní čísla jsou přísnější než většina skutečných návštěv, a proto jsou užitečným, opatrným vodítkem.
Odkud jsme začínali
Vlastní weby hlídáme nástrojem Standard, malým hlídačem kvality, který jsme si postavili. Podle plánu spouští PageSpeed Insights pro mobil i desktop a uchovává historii. Dne 20. října 2026 naměřil na úvodní stránce:
- Výkon na mobilu 90, přístupnost 96, osvědčené postupy 100, SEO 100.
- First Contentful Paint i Largest Contentful Paint na mobilu shodně 2,86 s.
- Největší položka: blokující webové fonty z Google Fonts, zhruba 2,2 s na simulovaném telefonu.
Stránka je statické HTML bez frameworku. Skoro celé zpoždění způsoboval jediný požadavek na externí stylopis, který prohlížeč musel dokončit, než mohl vykreslit jakýkoli text.
Co jsme změnili
Fonty hostované u nás
Obě písma jsme přesunuli přímo na web: 16 malých souborů WOFF2, podmnožiny Latin a Latin Extended, deklarované inline přes @font-face a unicode-range, takže stránka stáhne jen podmnožiny, které skutečně používá. Dva řezy použité v první obrazovce se přednačítají. Soubory fontů se ukládají do mezipaměti na rok jako neměnné. Tím zmizel jediný blokující požadavek i dvě předběžná spojení (preconnect) na cizí servery.
Obrázky, které nepohnou rozvržením
Každý obrázek má výslovně uvedenou width a height, takže prohlížeč mu rezervuje místo dřív, než soubor dorazí. To je většina toho, co CLS od statického webu chce. Na tomto blogu se každá ilustrace servíruje jako AVIF se záložním WebP ve dvou šířkách, 720 a 1376 pixelů, obvykle 5 až 30 kB, a hned se načítá jen první obrázek na stránce. Ostatní čekají, až se k nim návštěvník přiblíží posunem.
Žádný výpočet rozvržení během parsování stránky
Jeden dekorativní skript synchronně měřil velikost prvku ještě během načítání stránky, a nutil tak prohlížeč počítat rozvržení předčasně. Teď první velikost dostává z ResizeObserver. Drobná změna, ale přesně takové věci se na pomalém telefonu projeví.
Výsledek
| Úvodní stránka, mobil (laboratoř) | Před | Po |
|---|---|---|
| Skóre výkonu | 90 | 96 |
| First Contentful Paint | 2,86 s | 1,70 s |
| Largest Contentful Paint | 2,86 s | 2,55 s |
| Přístupnost | 96 | 100 |
Desktop dosáhl 100 ve všech čtyřech kategoriích. LCP na mobilu 2,55 s v laboratoři je pořád těsně nad hranicí 2,5 s a uvádíme ho tak, jak je. Zbývající položky leží většinou mimo repozitář: doba platnosti mezipaměti u analytického měřicího skriptu třetí strany a u widgetu proti spamu, řetězec fontů načítaných až po HTML a práce hlavního vlákna na pomalém simulovaném telefonu. Některé stojí za opravu, jiné jsou kompromisy, které přijímáme.
Měření: PageSpeed Insights přes Standard, úvodní stránka flowsmith.online, 20. října 2026, 01:41 UTC (před) a 10:37 UTC (po). Laboratorní data na simulovaném mobilním zařízení; terénní data pro web zatím k dispozici nebyla.
Kontrolní seznam pro malý statický web
- Žádné blokující požadavky na jiné servery v
<head>: fonty hostujte u sebe, těch pár řádků CSS, které potřebuje první obrazovka, vložte inline. - Obrázky v AVIF nebo WebP, ve velikosti, v jaké se zobrazují, s
widthaheighta s líným načítáním pod první obrazovkou. - Prvkem LCP je úvodní obrázek nebo nadpis: neschovávejte ho za skript, slider ani animaci postupného zobrazení.
- Skripty třetích stran jen tehdy, když si své místo zaslouží, a načítané s
defer. - Dlouhá platnost mezipaměti pro soubory s otiskem v názvu nebo ty, které se mění jen zřídka, nastavená v
_headersna Cloudflare Pages.
Jak zelenou udržet
Weby se málokdy zpomalí najednou. Zpomalují se po jednom vloženém prvku, jednom měřicím skriptu, jedné nekomprimované fotce. Standard naše produkční weby prochází denně a jeho verdikt je záměrně přísný: 100 ve všech čtyřech kategoriích na mobilu i desktopu a žádné otevřené technické nálezy, přičemž každá výjimka je zapsaná i s důvodem. Sám nic neopravuje. Připraví zadání pro toho, kdo web spravuje, se skóre, pravděpodobnými příčinami a kritérii přijetí. Na zvyku záleží víc než na nástroji: měřte pravidelně, uchovávejte historii a každý pokles berte jako ticket.
Soubory, díky kterým se rychlý web dá i najít, popisuje manuál o publikování a dohledatelnosti (zatím anglicky) a náš článek o llms.txt. Manuál Cloudflare Pages (zatím anglicky) se věnuje hlavičkám, mezipaměti a náhledovým nasazením.
Časté otázky
Které jsou tři Core Web Vitals?
Largest Contentful Paint (načítání: dobré do 2,5 sekundy), Interaction to Next Paint (odezva: dobré do 200 milisekund) a Cumulative Layout Shift (vizuální stabilita: dobré do 0,1). Každá metrika se hodnotí na 75. percentilu skutečných návštěv.
Je skóre PageSpeed Insights totéž co Core Web Vitals?
Ne. Skóre výkonu od 0 do 100 je laboratorní test na jednom simulovaném zařízení. Core Web Vitals v hodnocení Googlu pocházejí od skutečných uživatelů Chromu za posledních 28 dní. Malý web často nemá na terénní data dost návštěv, a tak se řídí laboratorním testem.
Ovlivňují Core Web Vitals pozice ve vyhledávání Google?
Patří mezi signály, kterými Google hodnotí uživatelský dojem ze stránky, ale relevance a obsah znamenají mnohem víc. Berte dobré hodnoty jako předpoklad webu, který lidé rádi používají, ne jako trik na lepší pozice.
Co na malém webu pomůže nejrychleji?
Obvykle fonty a obrázky: hostujte webové fonty u sebe a ty, které jsou vidět v první obrazovce, přednačtěte. Obrázky servírujte v AVIF nebo WebP ve velikosti, v jaké se zobrazují, každému dejte šířku a výšku a hned načítejte jen ten první.
Napsáno z našich produkčních systémů. Koncept vznikl s pomocí AI, text zkontroloval Kamil Hrbáček.
Chcete to mít ve firmě?
Flowsmith navrhuje a provozuje takové automatizace pro malé a střední týmy — a vše, co odchází ven, schvaluje člověk.
