What Is First Contentful Paint (FCP)?
Learn what First Contentful Paint measures, how it is captured, and what causes a slow FCP score.
Expected Interview Answer
First Contentful Paint (FCP) is the time from navigation start until the browser renders the first piece of DOM content — text, an image, a non-white canvas, or an SVG — giving the user their first visual confirmation that the page is actually loading.
FCP is captured by the browser’s paint timing API, which records the timestamp of the first paint that includes content, distinguishing it from an earlier 'first paint' that might just be a background color change with nothing meaningful on screen yet. FCP sits early in the loading timeline, after the HTML and critical render-blocking CSS/JS have been fetched and parsed enough to paint something, but well before the page is fully loaded or interactive. A slow FCP is usually caused by render-blocking resources in the head (synchronous CSS or JS), slow server response times (a poor Time to First Byte), or redirect chains that delay the HTML from arriving at all. Because it is one of the earliest meaningful signals users perceive, FCP is commonly used alongside Largest Contentful Paint to diagnose whether a slow perceived load is a server/network problem or a rendering-pipeline problem.
- Gives the earliest signal that something is happening, reducing perceived abandonment
- Diagnostically separates server/network delays from later rendering-pipeline issues
- Directly measurable via the browser Paint Timing API with no extra tooling
- Feeds into Lighthouse and other lab tools as a core loading-speed signal
AI Mentor Explanation
FCP is like the exact moment a fan walking toward the stadium first glimpses even a sliver of the floodlights over the stand wall. It is not the full view of the pitch, just the first proof that something is actually there and the ground is real. That first glimpse reassures the fan enough to keep walking rather than turning back, even though the seats and scoreboard are still out of view. That earliest meaningful visual proof is exactly what FCP measures for a webpage.
Step-by-Step Explanation
Step 1
Navigation starts
The browser begins fetching the HTML document at navigationStart / time origin zero.
Step 2
Critical resources are parsed
Render-blocking CSS and JS in the head must download and execute before layout can begin.
Step 3
First paint occurs
The browser may paint a blank or background-only frame with no content yet.
Step 4
First contentful paint is recorded
The Paint Timing API records the timestamp of the first frame containing actual text, image, or SVG content.
What Interviewer Expects
- Clear definition distinguishing First Paint from First Contentful Paint
- Knowledge of the Paint Timing API as the measurement mechanism
- Ability to name causes of a slow FCP (render-blocking resources, slow TTFB, redirects)
- Understanding of where FCP sits relative to LCP and TTI in the loading timeline
Common Mistakes
- Confusing First Contentful Paint with Largest Contentful Paint
- Assuming FCP means the page is fully loaded or interactive
- Ignoring server response time (TTFB) as a major contributor to a late FCP
- Not knowing FCP is captured via the Paint Timing API in the browser
Best Answer (HR Friendly)
“First Contentful Paint is the moment a visitor first sees anything real on the screen — some text, an image — rather than a blank white page. It is an early signal that reassures users the page is actually loading, even though the rest of the content is still on its way.”
Code Example
const paintEntries = performance.getEntriesByType('paint')
const fcp = paintEntries.find(
(entry) => entry.name === 'first-contentful-paint'
)
if (fcp) {
console.log('FCP:', fcp.startTime.toFixed(0), 'ms')
}Follow-up Questions
- How does First Contentful Paint differ from Largest Contentful Paint?
- What server-side changes would you make to improve a slow FCP?
- How do render-blocking stylesheets affect FCP specifically?
- What is the difference between First Paint and First Contentful Paint?
MCQ Practice
1. What does First Contentful Paint measure?
FCP marks the first paint that includes real content, not just a background color change.
2. Which of these commonly delays FCP the most?
Blocking resources and slow TTFB delay the browser from painting anything at all.
3. What API does the browser use to expose FCP?
performance.getEntriesByType('paint') exposes both first-paint and first-contentful-paint entries.
Flash Cards
What is FCP? — The time until the browser paints the first real content — text, image, or SVG.
What API exposes FCP? — The Paint Timing API, via performance.getEntriesByType('paint').
What commonly delays FCP? — Render-blocking CSS/JS, slow TTFB, and redirect chains.
FCP vs First Paint? — First Paint can be a blank/background frame; FCP requires actual content.