First Contentful Paint (FCP)

Co je First Contentful Paint?

First Contentful Paint neboli FCP je metrika měřící čas od okamžiku, kdy uživatel začne načítat stránku, do momentu, kdy se na obrazovce zobrazí první viditelný obsah. Tímto obsahem může být text, obrázek, SVG prvek nebo jakýkoliv jiný vizuální element (kromě bílého pozadí nebo prázdného plátna). FCP odpovídá na klíčovou otázku: „Kdy uživatel poprvé vidí, že se něco na stránce skutečně děje?"

Pro návštěvníky vašeho webu je FCP důležitý okamžik, kdy získají první vizuální potvrzení, že stránka se načítá správně a nepracuje naprázdno. Představte si to jako rozdíl mezi bílou obrazovkou, na které se nic neděje, a první vizuální odezvou – třeba nadpisem nebo logem. Rychlý FCP vytváří dojem, že web reaguje promptně, což pozitivně ovlivňuje uživatelskou zkušenost a snižuje pravděpodobnost, že návštěvník ztratí trpělivost a stránku opustí.

FCP je součástí širšího ekosystému metrik Core Web Vitals, které Google používá jako faktor pro hodnocení kvality uživatelské zkušenosti a rychlosti webu. I když FCP samotný není přímo jednou ze tří hlavních Core Web Vitals metrik (to jsou LCP, FID a CLS), hraje významnou roli jako ukazatel počáteční odezvy stránky. Optimalizace FCP často vede ke zlepšení dalších metrik výkonu, protože řeší základní problémy s načítáním a vykreslováním obsahu.

FCP a Core Web Vitals

Google v rámci své iniciativy Page Experience Update zdůrazňuje důležitost rychlosti a kvality uživatelské zkušenosti na webu. Zatímco hlavní pozornost je věnována třem klíčovým metrikám Core Web Vitals – Largest Contentful Paint (LCP), First Input Delay a Cumulative Layout Shift – First Contentful Paint slouží jako důležitý doplňkový ukazatel, který pomáhá diagnostikovat problémy s počátečním vykreslováním stránky.

FCP je často první metrikou, která se zlepší, když optimalizujete technickou stránku webu. Pokud má váš web pomalý FCP, je vysoce pravděpodobné, že i ostatní metriky budou trpět. Rychlý FCP je indikátorem dobře optimalizované infrastruktury – znamená, že váš server rychle odpovídá, CSS a JavaScript neblokují vykreslování a prohlížeč může rychle začít zobrazovat obsah uživateli. I když FCP přímo neovlivňuje SEO ranking tak výrazně jako LCP, stále je součástí celkového obrazu o výkonu webu, který Google hodnotí.

Jaká je ideální hodnota FCP?

Google definuje tři kategorie pro hodnocení FCP, které vám pomohou pochopit, jak dobře si váš web vede. Dobrá hodnota FCP je 1,8 sekundy nebo méně – to znamená, že první viditelný obsah se zobrazí do necelých dvou sekund od začátku načítání stránky. Toto je cílová hodnota, ke které byste měli směřovat u všech stránek vašeho webu.

Hodnota mezi 1,8 a 3 sekundami spadá do kategorie „vyžaduje zlepšení" – váš web sice funguje, ale uživatelé už mohou pociťovat lehkou prodlevu při načítání. V této kategorii byste neměli zůstávat dlouho, protože návštěvníci jsou stále méně trpěliví a konkurence s rychlejšími weby má výhodu. Špatná hodnota FCP je vše nad 3 sekundy – to je červená zona, kde výrazně klesá spokojenost uživatelů a roste pravděpodobnost, že stránku opustí dříve, než se vůbec načte.

Podle statistik z Chrome User Experience Reportu přibližně 75% náhodně vybraných návštěv by mělo dosahovat „dobré" hodnoty, abyste měli celkově pozitivní hodnocení. To znamená, že nestačí mít rychlý web jen pro některé uživatele – optimalizace musí fungovat konzistentně napříč různými zařízeními, připojeními a geografickými lokacemi. Zvlášť důležité je testovat FCP na mobilních zařízeních a pomalejších připojeních, kde se problémy s výkonem projevují nejvýrazněji.

Co ovlivňuje FCP?

• Doba odezvy serveru (TTFB)

Time to First Byte je čas, který trvá, než server odpoví na první požadavek prohlížeče. Pokud váš server odpovídá pomalu (kvůli přetížení, špatné konfiguraci nebo pomalému hostingu), FCP automaticky trpí. Rychlý TTFB je základem rychlého FCP – bez něj nemůžete začít vykreslovat obsah. Optimalizace zahrnuje použití kvalitního hostingu, server-side cachování, CDN a optimalizaci databázových dotazů.

• Render-blocking CSS a JavaScript

CSS a JavaScript soubory mohou blokovat vykreslení stránky, pokud prohlížeč musí čekat na jejich stažení a zpracování, než může zobrazit cokoliv uživateli. Kritický je zejména CSS, protože prohlížeč nechce zobrazit nestylovaný obsah. Řešením je inline kritické CSS přímo do HTML, používat atribut defer nebo async u JavaScriptu a minimalizovat množství blokujících zdrojů v hlavičce stránky.

• Velikost a složitost HTML

Čím větší a složitější je vaše HTML, tím déle trvá prohlížeči jeho zpracování a vykreslení prvního obsahu. Nadměrně velký DOM (Document Object Model) se stovkami až tisíci elementů zpomaluje parsing i rendering. Snažte se udržet HTML co nejčistší, odstraňte zbytečné elementy a komentáře, minifikujte kód a používejte efektivní strukturu.

• Webové fonty

Načítání vlastních webových fontů může výrazně zpozdit zobrazení textu (jev zvaný FOIT – Flash of Invisible Text). Pokud prohlížeč čeká na stažení fontu, text zůstává neviditelný, což negativně ovlivňuje FCP. Používejte font-display: swap pro rychlé zobrazení textu se záložním fontem, nebo ještě lépe preloadujte kritické fonty pomocí <link rel="preload">.

• Velikost a komprese zdrojů

Velké nekomprimované CSS, JavaScript a HTML soubory zabírají více času na přenos přes síť. Moderní kompresní algoritmy jako Gzip nebo Brotli dokážu zmenšit velikost textových souborů až o 70-80%. Kombinace minifikace (odstranění bílých znaků a komentářů) a komprese výrazně zrychlí načítání a tím i FCP.

Jak měřit FCP?

Nejjednodušším způsobem, jak zjistit FCP vašeho webu, je Google PageSpeed Insights (pagespeed.web.dev). Stačí zadat URL stránky a nástroj zobrazí aktuální hodnotu FCP včetně hodnocení (dobrá/vyžaduje zlepšení/špatná) a dat z reálných uživatelů z Chrome User Experience Reportu. PageSpeed Insights také nabídne konkrétní doporučení, jak FCP zlepšit.

Lighthouse je další mocný nástroj od Googlu, který je integrovaný přímo do Chrome DevTools (F12 → záložka Lighthouse). Lighthouse provede komplexní audit výkonu, dostupnosti a SEO, přičemž FCP je součástí sekce Performance. Výhodou je, že můžete testovat i lokální verze webu před publikací a simulovat různé podmínky (mobilní zařízení, pomalé připojení).

Pro pokročilejší testování slouží nástroje jako WebPageTest (webpagetest.org), který umožňuje detailní analýzu včetně vodopádového grafu (waterfall), video záznamu načítání a testování z různých geografických lokalit a na různých zařízeních. Chrome DevTools také obsahují záložku Performance, kde můžete nahrát podrobný timeline načítání stránky a přesně vidět, kdy nastává FCP a co jej ovlivňuje. Pro průběžné monitorování můžete nastavit Google Search Console, která reportuje Core Web Vitals data z reálných uživatelů vašeho webu.

Jak optimalizovat FCP?

• Optimalizujte server response time (TTFB)

Vyberte kvalitní hosting s rychlými servery, ideálně v geografické blízkosti vašich návštěvníků. Implementujte server-side cachování (např. Redis, Varnish) pro dynamický obsah a optimalizujte databázové dotazy. Zvažte použití CDN (Content Delivery Network), které doručí statické zdroje z nejbližšího serveru k uživateli. Podle Google by TTFB měl být pod 600 ms.

• Eliminujte render-blocking CSS a JavaScript

Inline vložte kritické CSS přímo do <head> pomocí <style> tagu, aby se stránka mohla vykreslit okamžitě bez čekání na externí soubory. Zbylé CSS načítejte asynchronně pomocí media atributu: <link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">. JavaScript umístěte na konec stránky před </body> nebo použijte atributy defer/async.

• Používejte resource hints

Využívajte <link rel="preconnect"> pro důležité third-party domény (fonty, analytiku), aby prohlížeč navázal spojení předem. Pro kritické zdroje použijte <link rel="preload">, který říká prohlížeči, aby je stáhl s vysokou prioritou. Například: <link rel="preload" href="font.woff2" as="font" crossorigin>.

• Optimalizujte webové fonty

Používejte pouze fonty, které skutečně potřebujete, a omezte počet řezů (tučné, kurzíva atd.). Přidejte font-display: swap do @font-face pravidel, aby se text zobrazil okamžitě se záložním fontem místo čekání na vlastní font. Preferujte moderní formáty WOFF2, které jsou výrazně menší než TTF nebo OTF. Preloadujte nejdůležitější fonty.

• Minifikujte a komprimujte zdroje

Minifikujte HTML, CSS a JavaScript – odstraňte bílé znaky, komentáře a zkraťte názvy proměnných (u JS). Používejte nástroje jako Terser pro JavaScript, cssnano pro CSS. Zapněte Gzip nebo ještě lepší Brotli kompresi na serveru – většina moderních webserverů (Apache, Nginx) to podporuje nativně. Komprese může zmenšit soubory až o 80%.

• Redukujte velikost DOM

Udržujte DOM strom co nejmenší a nejjednodušší. Zbytečně hluboké vnořování elementů a přemíra divů zpomaluje parsing i rendering. Google doporučuje mít méně než 1500 DOM elementů, hloubku maximálně 32 úrovní a žádný rodičovský element by neměl mít více než 60 dětí.

• Implementujte lazy loading

I když lazy loading primárně pomáhá s LCP a celkovou rychlostí stránky, správná implementace zajistí, že prohlížeč nemusí zpracovávat obrázky a prvky pod čarou při prvním vykreslení. Použijte nativní loading="lazy" atribut u obrázků nebo moderní JavaScript knihovny pro pokročilejší lazy loading.

FCP vs LCP – jaký je rozdíl?

First Contentful Paint (FCP) měří čas do zobrazení prvního jakéhokoliv obsahu – může to být třeba malý text nebo ikona v hlavičce. Largest Contentful Paint (LCP) měří čas do zobrazení největšího viditelného prvku na stránce – obvykle hlavního obrázku, videa nebo velkého textového bloku. Zatímco FCP říká „něco se začíná zobrazovat", LCP říká „hlavní obsah je viditelný".

Z hlediska uživatelské zkušenosti je LCP důležitější metrika, protože odpovídá na otázku, kdy uživatel skutečně vidí užitečný obsah stránky, kvůli kterému přišel. Proto je LCP součástí Core Web Vitals a přímo ovlivňuje SEO ranking. FCP je spíše technickým ukazatelem počáteční odezvy webu. Může nastat situace, kdy máte výborný FCP (zobrazí se rychle header), ale špatný LCP (hlavní obsah se načítá dlouho).

Ideální je optimalizovat obě metriky současně. Mnoho optimalizací platí pro obě – rychlejší server, eliminace render-blockingu, komprese zdrojů. Rozdíl je v tom, že pro LCP musíte navíc optimalizovat konkrétně největší prvek – optimalizovat velikost a formát hlavního obrázku, použít CDN, prioritizovat jeho načtení pomocí preload nebo fetchpriority="high". Pokud zlepšíte FCP, často se zlepší i LCP, protože řešíte základní infrastrukturální problémy.

Související pojmy