What is First Contentful Paint (FCP)?
First Contentful Paint (FCP) is the stopwatch reading at which a blank screen stops being blank. The browser starts navigating to a page, and at some point it paints the first piece of real content from the document: a heading, a logo, a line of text, an image. The milliseconds between those two moments are FCP. A background color or a spinner does not count; it has to be content.
Google reports it in PageSpeed Insights, Lighthouse and the Chrome User Experience Report, with thresholds of 1.8 seconds or under for good and over 3 seconds for poor. It is not one of the Core Web Vitals (Largest Contentful Paint took that role), but it is the metric closest to the feeling of a page being slow to start.
Why it matters
Why FCP matters
FCP is the first proof of life. Until something paints, a visitor does not know whether the link worked, and the longer the blank, the more of them leave. Most of the delay lives in the parts of a page nobody sees: a slow server, render-blocking stylesheets and scripts, fonts the browser is waiting on. FCP exposes all of it in one number.
It also sets up everything that follows. A page that paints late records a late Largest Contentful Paint as well. Improving FCP is usually the first and cheapest step toward passing the Core Web Vitals, and the one most visible to a person waiting on a phone.
In practice
How FCP works in practice
- 01
Measure it in the field first, from real visitors in the Chrome User Experience Report via PageSpeed Insights, and then in the lab with Lighthouse to see what is delaying the paint. The usual suspects, in order: server response time (Time to First Byte), render-blocking CSS and JavaScript in the head, web fonts that block text from showing, and redirect chains before the page starts.
- 02
Then remove them. Cache pages and use a CDN so the HTML arrives fast. Inline the critical CSS needed for the first screen and defer the rest. Load scripts with defer or async, and push third-party tags below the fold or behind consent. Set font-display to swap so text paints in a fallback face while the brand font loads, and preconnect to the hosts you will need. Each change should move FCP measurably; retest after each one rather than guessing.
At RIOT
FCP at RIOT
Our own homepage opens on the RIOT brand reel, which is the slowest kind of thing a page can start with. The rule we hold ourselves to is that the page paints before the film arrives: the first screen comes from the HTML and the critical styles, and the reel loads behind it. A visitor should see RIOT immediately and the reel a moment later, never a blank screen that resolves into both at once.
Watch out
What people get wrong about FCP
Calling it a Core Web Vital. It is not, though it is reported next to them and often confused with Largest Contentful Paint, which measures when the biggest element paints rather than the first. The second mistake is gaming it with a placeholder: painting a skeleton screen early improves the number and does nothing for the person waiting. The third is optimizing the lab and ignoring the field. A page that scores well on a fast machine can still paint late for a real visitor on a mid-range phone over cellular, and the field number is the one Google uses.
