First Contentful Paint (FCP)
First Contentful Paint (FCP) is a performance metric that measures the time from when the page starts loading to when any part of the page's content (text, image, SVG, or canvas element) is rendered on screen.
FCP marks the moment the user sees something other than a blank screen. Google considers FCP good under 1.8s. While LCP measures when the main content is visible, FCP measures the very first visual feedback — even a loading spinner counts.
FCP is heavily influenced by TTFB (you cannot paint before the first byte arrives), render-blocking resources (CSS and synchronous JS in the head), and font loading behavior. A large gap between FCP and LCP suggests your main content loads much later than initial shell elements.
Optimize by inlining critical CSS, deferring non-critical JavaScript, using `next/font` for font loading, and leveraging server-side rendering or streaming (React Server Components in Next.js) to send HTML content early.
Related terms
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) is a Core Web Vital metric that measures the time from when the page starts loading to when the largest text block or image element is rendered in the viewport.
Time to First Byte (TTFB)
Time to First Byte (TTFB) is a metric that measures the duration between a user's HTTP request and the first byte of the server's response reaching the browser.
Core Web Vitals
Core Web Vitals are a set of three Google metrics — Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) — that measure real-world user experience.
Page Speed
Page speed is the measurement of how quickly a web page's content loads and becomes interactive, typically measured by metrics like Time to First Byte (TTFB), First Contentful Paint (FCP), and Largest Contentful Paint (LCP).
Stop shipping broken SEO
Indxel validates your metadata, guards your CI/CD pipeline, and monitors indexation — so you never miss an SEO issue again.