First Contentful Paint

Co je First Contentful Paint?

First Contentful Paint (FCP) je metrika výkonu webu, která měří čas od začátku načítání stránky do okamžiku, kdy se v prohlížeči zobrazí první viditelný obsah. Tímto obsahem může být text, obrázek, SVG grafika nebo canvas prvek – cokoliv, co uživatel skutečně vidí na obrazovce. FCP je klíčovým ukazatelem vnímané rychlosti webu, protože říká, jak rychle uživatel dostane vizuální zpětnou vazbu, že se něco děje.

Představte si situaci: otevřete webovou stránku a několik sekund vidíte jen prázdnou bílou obrazovku. I když se na pozadí stahují soubory a web se připravuje, vy jako uživatel nevíte, jestli stránka vůbec funguje. FCP měří okamžik, kdy se tato prázdná obrazovka změní na něco smysluplného – první text nadpisu, logo nebo obrázek. Čím rychlejší FCP, tím rychleji uživatel dostane ujištění, že stránka se načítá správně.

FCP je součástí širší skupiny metrik zvaných Core Web Vitals, které Google používá jako faktor pro SEO hodnocení. Ačkoli FCP samotný není přímo součástí Core Web Vitals (tam patří LCP, FID a CLS), je úzce spojen s uživatelskou zkušeností a výkonem webu. Google sleduje FCP v nástrojích jako PageSpeed Insights a Lighthouse, kde vám ukáže, jak si váš web vede a kde jsou prostor pro zlepšení.

Jak se FCP měří a vyhodnocuje?

FCP se měří v sekundách nebo milisekundách od okamžiku, kdy uživatel klikne na odkaz nebo zadá URL, do zobrazení prvního viditelného prvku DOM. Google doporučuje, aby FCP byl pod 1,8 sekundy pro 75 % návštěv na vašem webu. Pokud je FCP mezi 1,8 a 3 sekundami, je hodnocen jako „vyžaduje zlepšení". Cokoliv nad 3 sekundy je považováno za pomalé.

Nejjednodušší způsob, jak změřit FCP, je pomocí nástrojů:

• Google PageSpeed Insights

Zadejte URL vašeho webu a nástroj vám ukáže FCP hodnotu spolu s dalšími metrikami výkonu. Výsledky se zobrazují pro mobilní i desktopové zařízení. PageSpeed také nabízí konkrétní doporučení, jak FCP zlepšit.

• Lighthouse (integrovaný v Chrome DevTools)

Otevřete Chrome DevTools (F12), přejděte na záložku Lighthouse a spusťte audit. Lighthouse vám ukáže FCP a další metriky s detailními návody na optimalizaci.

• Google Search Console

V sekci „Core Web Vitals" najdete reporty o výkonu vašeho webu na základě reálných dat od uživatelů. Tyto data (tzv. field data) ukazují skutečnou rychlost, jakou zažívají vaši návštěvníci.

• WebPageTest

Pokročilý nástroj pro testování rychlosti webu z různých lokalit a zařízení. Umožňuje simulovat pomalé připojení a podrobně analyzovat, co se děje během načítání stránky.

Co ovlivňuje First Contentful Paint?

FCP je ovlivněn několika faktory, které určují, jak rychle prohlížeč dokáže zobrazit první obsah na obrazovce. Zde jsou hlavní příčiny pomalého FCP:

• Pomalý server (TTFB)

Time to First Byte (TTFB) měří, jak rychlo server odpoví na požadavek prohlížeče. Pokud váš hosting je pomalý nebo server zpracovává požadavky dlouho, FCP se automaticky prodlužuje. Zlepšit TTFB lze rychlejším hostingem, optimalizací backendu nebo použitím CDN.

• Render-blocking zdroje (CSS a JavaScript)

Prohlížeč nemůže zobrazit obsah, dokud nenačte a nezpracuje CSS a JavaScript soubory, které blokují vykreslování. Pokud máte velké CSS soubory nebo JavaScript načítaný v hlavičce bez atributu `defer` nebo `async`, FCP se zpomalí. Řešením je minifikace, asynchronní načítání skriptů a odstranění nepoužívaného kódu.

• Velké obrázky above the fold

Pokud je první viditelný obsah obrázek, FCP závisí na tom, jak rychle se obrázek stáhne. Velké, neoptimalizované obrázky mohou FCP výrazně zpomalit. Používejte moderní formáty jako WebP, správné rozměry a lazy loading pro obrázky mimo viewport.

• Web fonts (písma)

Vlastní webová písma mohou blokovat vykreslení textu, dokud se nestihnout stáhnout (FOIT – Flash of Invisible Text). Použijte `font-display: swap` pro okamžité zobrazení systémového fontu, který se po načtení nahradí vlastním písmem.

• Absence cache a komprese

Pokud prohlížeč musí stahovat stejné soubory při každé návštěvě, FCP trpí. Implementujte cache hlavičky a GZIP/Brotli kompresi pro zrychlení stahování statických zdrojů.

Jak optimalizovat First Contentful Paint?

• Minimalizujte render-blocking zdroje

Přesuňte nezbytné CSS do <head> a použijte inline critical CSS (kritické styly potřebné pro vykreslení první obrazovky). Ostatní CSS načítejte asynchronně nebo s media queries. JavaScript umístěte na konec stránky nebo použijte atributy `defer` a `async`.

• Optimalizujte server a TTFB

Investujte do kvalitního hostingu s rychlou odezvou. Použijte CDN pro distribuci statického obsahu blíže k uživatelům. Povolte HTTP/2 nebo HTTP/3 pro rychlejší přenos dat. Optimalizujte databázové dotazy a backend kód.

• Redukujte velikost obrázků

Komprimujte obrázky pomocí nástrojů jako TinyPNG nebo ImageOptim. Používejte moderní formáty WebP nebo AVIF. Nastavte správné rozměry – nikdy nenačítejte 4000px obrázek, který se zobrazí ve 400px. Implementujte responsive images s `srcset` atributem.

• Použijte preconnect a preload

Direktiva <link rel="preconnect"> připraví spojení k externím zdrojům (fonty, CDN) ještě před jejich stažením. <link rel="preload"> dává prohlížeči najevo, že konkrétní zdroj bude brzy potřeba, a prioritně ho načte.

• Minifikujte CSS, JavaScript a HTML

Odstraňte bílé znaky, komentáře a nepoužívaný kód z vašich souborů. Nástroje jako Terser pro JS, CSSNano pro CSS nebo HTMLMinifier pro HTML zmenší velikost souborů a urychlí stahování.

• Implementujte browser cache

Nastavte správné cache hlavičky (Cache-Control, Expires) pro statické zdroje, aby se prohlížeč nemusel ptát serveru při každé návštěvě. Versionujte soubory (např. style.v2.css), abyste mohli invalidovat cache při změně.

• Optimalizujte webové fonty

Používejte `font-display: swap` pro okamžité zobrazení textu. Načítejte pouze potřebné varianty fontů (weights, styles). Využijte WOFF2 formát, který je nejmenší. Zvažte, zda opravdu potřebujete vlastní font – systémové fonty jsou nejrychlejší.

FCP vs LCP – jaký je rozdíl?

FCP (First Contentful Paint) měří čas do zobrazení jakéhokoliv prvního obsahu, zatímco LCP (Largest Contentful Paint) měří čas do zobrazení největšího viditelného prvku na stránce (obvykle hlavní obrázek nebo nadpis). LCP je důležitější pro Core Web Vitals a SEO, protože odráží, kdy uživatel vidí „hlavní obsah" stránky, ne jen první malý prvek.

Představte si blog: FCP může nastat, když se zobrazí logo v hlavičce (malý obrázek), zatímco LCP nastane, když se načte hlavní článek s obrázkem a nadpisem. Uživatel považuje stránku za plně načtenou teprve při LCP, nikoli při FCP. Proto Google v rámci Core Web Vitals sleduje LCP, ale FCP stále zůstává důležitou metrikou pro celkový výkon.

Optimalizace FCP často zlepší i LCP, protože obě metriky sdílejí podobné faktory (rychlost serveru, render-blocking zdroje, velikost souborů). Zaměřte se na oba a sledujte je pravidelně v nástrojích jako PageSpeed Insights. Více o výkonu webu najdete zde.

Proč je FCP důležitý pro SEO a UX?

Rychlost načítání stránky je jedním z ranking faktorů Googlu. Weby s rychlejším FCP mají lepší šanci na vyšší pozice ve vyhledávání, protože uživatelům poskytují lepší zkušenost. Google preferuje weby, které se rychle načítají a odpovídají, protože ví, že pomalé weby vedou k vyššímu bounce rate a nižší spokojenosti uživatelů.

Z pohledu UX (uživatelské zkušenosti) je FCP kritický pro první dojem. Pokud uživatel čeká několik sekund na prázdné obrazovce, může web opustit ještě dřív, než se cokoliv načte. Studie ukazují, že už prodleva o 1 sekundu může snížit konverze o 7 %. Čím rychlejší FCP, tím spokojenější uživatelé a lepší business výsledky.

Mobilní uživatelé jsou ještě citlivější na rychlost – často mají pomalejší připojení a slabší zařízení. Optimalizace FCP na mobilech je proto ještě důležitější. Google používá mobile-first indexing, což znamená, že primárně hodnotí mobilní verzi webu. Pokud je FCP na mobilu pomalý, negativně to ovlivní SEO i na desktopu.

Související pojmy