Learn
First Contentful Paint: What FCP Means and How to Improve It
FCP measures when users first see real content. This guide explains what slows it down and which fixes make a page feel faster sooner.
Run a fresh DomainLens audit and use the report as your priority list.
What FCP measures
First Contentful Paint (FCP) marks the moment when the browser first renders real page content: text, an image, SVG, or canvas. It is not the full page load and it is not the main hero element, but it tells you how long users stare at a blank screen.
A fast FCP builds confidence that the page is working. A slow FCP makes the site feel broken even when the rest of the page eventually loads. That is why it belongs in a performance audit even though Core Web Vitals focus more directly on LCP, INP, and CLS.
What usually slows FCP
- Slow server response before the browser receives the first HTML.
- Render-blocking CSS that must download and parse before anything appears.
- Synchronous JavaScript in the head that blocks parsing.
- Web fonts that delay visible text or cause invisible text while loading.
- Heavy HTML, tag managers, or third-party scripts loaded before critical content.
How to improve FCP
Start at the beginning of the request. Improve TTFB with caching, a faster origin, fewer database queries, and a CDN for static assets. The browser cannot paint content it has not received.
Then reduce render-blocking work. Inline the smallest useful critical CSS, load the rest asynchronously where safe, defer non-critical JavaScript, and keep above-the-fold HTML simple. For fonts, preload the primary font file and use font-display: swap so text can appear quickly.
Mistakes to avoid
- Optimizing images only, while CSS and JavaScript still block the first paint.
- Loading every analytics, chat, and ad script before the page renders.
- Using custom fonts without preload or a visible fallback strategy.
- Measuring only desktop, where slow first paint is easier to hide.
- Confusing FCP with LCP and fixing the hero image while the blank-screen delay remains.
How to validate the fix
Run Lighthouse or PageSpeed Insights before and after the change and compare FCP, TTFB, render-blocking resources, and main-thread work. A real FCP fix should make the first text or visible structure appear earlier, not only improve the score.
After deployment, rerun DomainLens and check mobile results first. If field data is available, confirm that users on slower devices and networks also see better early rendering.