First Contentful Paint (FCP) is the elapsed time from the start of a page navigation until the browser first draws eligible content, such as text, an image, an SVG, a CSS background image, video, or a non-white canvas. It tells you that the browser has shown something—not that the page’s main content is ready.
Use field data to see what real visitors experience, lab tests to investigate likely causes, and then recheck field data after changes. Judge FCP at the 75th percentile with mobile and desktop separated.
What is FCP?
FCP measures the interval between navigation start and the first paint of content the browser considers meaningful. The eligible content types include text, images (including CSS background images), SVG elements and non-white canvas; MDN also includes video. Content inside a cross-origin iframe is not counted by the parent page. Text can count while a webfont is still loading, so the first paint may not use the final typeface.
MDN summarizes the metric’s purpose as answering: “Is anything happening?” FCP is therefore an early, user-centered loading signal. It is not a completion metric and does not prove that the page is usable or that its primary information is visible.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →#1 Best Overall
FCP versus LCP
FCP records the first eligible visual response. Largest Contentful Paint (LCP) records when the largest visible image or text block in the viewport is rendered. A navigation can have a fast FCP because a small heading or background appears, while the article, product image or other main content remains delayed. Measure both when assessing perceived loading.
What can be included in the time?
FCP can reflect more than rendering work in the browser. Depending on the navigation, the interval can include the previous page’s unload work, connection setup, redirects and server time to first byte (TTFB). These factors help explain why field results differ from a controlled lab run.
What is a good FCP score?
web.dev’s FCP guidance (updated October 19, 2022) classifies 1.8 seconds or less as good and more than 3.0 seconds as poor. Values between those boundaries need improvement.
| FCP result | web.dev interpretation | How to report it |
|---|---|---|
| ≤ 1.8 s | Good | State whether the value is field or lab data, the device segment and the percentile. |
| > 1.8 s and ≤ 3.0 s | Needs improvement | Investigate the page’s measured bottleneck and retest under comparable conditions. |
| > 3.0 s | Poor | Prioritize diagnosis; identify whether server, network, resource or rendering work is delaying the first paint. |
Use percentiles and device segments
Evaluate the 75th percentile of page loads rather than an average or a single run. Split mobile and desktop data so a fast desktop population does not hide a slow mobile experience. The web.dev field thresholds above use the same cutoffs for both device groups; Lighthouse’s lab presentation uses device-specific scoring bands, which are a different comparison context.
When comparing two numbers, label the context: field versus lab, page-level versus origin-level data, mobile versus desktop, percentile versus one run, and FCP versus LCP. A lower lab result does not by itself establish that real users improved.
How to measure FCP
1. Check field performance
PageSpeed Insights and Chrome User Experience Report (CrUX) data can show FCP collected from real visitors. Field data incorporates the networks, devices and conditions that your audience actually uses. It is the appropriate view for deciding whether users experience a problem.
Rank #3
2. Run a lab diagnostic
Lighthouse, Chrome DevTools and the Lighthouse run inside PageSpeed Insights provide controlled measurements and diagnostics. A lab run is useful for reproducing a page load, inspecting the critical path and finding likely opportunities, but it represents the selected test conditions rather than your entire audience.
3. Measure in production code
The Paint Timing API exposes a first-contentful-paint entry through PerformanceObserver. A minimal observer is:
Free tools Windows power users keep installed
One-click scans. No signup required.
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.name === 'first-contentful-paint') {
console.log('FCP:', entry.startTime);
}
}
});
observer.observe({ type: 'paint', buffered: true });For production collection, the web-vitals JavaScript library handles several edge cases more reliably than a raw entry listener. Neither approach can expose paint timing for content in a cross-origin iframe to the parent page.
4. Filter and qualify raw measurements
Do not treat every API entry as a valid page-visit FCP. Exclude pages that were in a background tab, account for back-forward cache restores, and handle prerender activation timing. Record the page, device class and navigation context with the value so later comparisons remain meaningful.
A practical measurement loop
- Inspect field data to establish whether visitors and which device group are affected.
- Run a lab audit on the same page and examine its waterfall, render-blocking resources and diagnostics.
- Make one targeted change tied to the identified bottleneck.
- Repeat the lab test under comparable conditions, then wait for new field data before claiming a real-user improvement.
How to improve FCP
Start with the opportunities and diagnostics for the specific page. Techniques below are directions to investigate, not guarantees; the highest-value fix depends on what delays that page’s first eligible paint.
Remove work that blocks the first render
- Defer or eliminate render-blocking JavaScript that is not needed for the initial view.
- Reduce blocking CSS, minify it and remove rules that the page does not use.
- Remove unused JavaScript and avoid loading features before they are needed.
Shorten the server and navigation path
- Reduce TTFB through server, application and caching improvements.
- Avoid unnecessary redirects, which add navigation and connection time.
- Use efficient caching for static assets so repeat visits do not download them again.
Prioritize early requests
- Preload a key request only when it is genuinely required early in rendering.
- Reduce the number and size of requests on the critical path.
- Reduce critical request depth so the browser discovers first-view resources sooner.
Control payloads and fonts
- Reduce large network payloads and prioritize visible content in the DOM.
- Keep text visible while webfonts load instead of hiding it until the font is ready.
- Inspect DOM size when diagnostics indicate that excessive markup is slowing style or layout work.
Retest the cause, not just the score
After each change, verify that the intended blocking resource, response delay or payload issue actually changed. Re-run the lab test with the same device and network assumptions, then monitor the 75th-percentile mobile and desktop field distributions. A better lab FCP is evidence of a controlled-test change; only follow-up field data can show whether users benefited.
Frequently Asked Questions
Does FCP mean the page is ready?
No. FCP only confirms that the browser painted the first eligible content. Use LCP and other page-specific checks to determine whether the main content has appeared and the experience is usable.
Why can my field FCP be slower than Lighthouse?
Field data includes real devices, networks, redirects, connection setup and server conditions. Lighthouse uses a controlled environment, so its result is diagnostic rather than a direct description of every visitor’s experience.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
