First Contentful Paint (FCP) marks the first point during page load when the user can see anything on the screen. This could be text, an image, SVG, or even a non-white canvas element.
Why FCP matters
FCP is important because it marks the first point when the user gets visual feedback that the page is loading. A fast FCP helps reassure users that something is happening.
FCP thresholds
- Good: 1.8 seconds or less
- Needs Improvement: Between 1.8 and 3.0 seconds
- Poor: More than 3.0 seconds
FCP vs LCP
While FCP measures when any content appears, LCP measures when the main content appears. FCP might fire when a small loading spinner appears, while LCP waits for the hero image or main text to load.
Improving FCP
- Reduce server response time (TTFB)
- Remove render-blocking resources
- Minify CSS
- Remove unused CSS
- Use efficient font loading strategies
How VitalSentinel tracks FCP
VitalSentinel's RUM monitoring reports FCP from real visitor sessions, so you can see when render-blocking changes or font loading regressions slow down the first paint. Page-level breakdowns reveal which templates fall outside the 1.8 second threshold, and you find out in hours when a deploy introduces a regression.
Related Terms
Critical Rendering Path
The sequence of steps the browser takes to convert HTML, CSS, and JavaScript into pixels on the screen.
Largest Contentful Paint (LCP)
A Core Web Vital that measures how long it takes for the largest content element visible in the viewport to render.
Speed Index
A performance metric that measures how quickly content is visually displayed during page load.
Time to First Byte (TTFB)
A performance metric that measures the time between the request for a resource and when the first byte of a response begins to arrive.