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
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.