What Is First Contentful Paint (FCP)?
First Contentful Paint (FCP) is a web performance metric that measures the time from when a page starts loading to when any part of its content, such as text, an image, or an SVG, is first rendered on the screen. FCP marks the moment a visitor sees something other than a blank page. Google considers an FCP of 1.8 seconds or less 'good' and treats it as an important loading-speed signal.
- Good threshold
- 1.8 seconds or less (Google web.dev)
- Needs improvement
- 1.8 to 3.0 seconds (Google web.dev)
- Measured by
- Lighthouse, PageSpeed Insights, CrUX field data
- Weight in Lighthouse score
- 10% of the Performance score (Lighthouse v10+)
What does First Contentful Paint actually measure? #
First Contentful Paint records the exact instant a browser paints the first piece of DOM content after a navigation begins. That content can be a headline, a paragraph, a background image with text, an SVG logo, or a canvas element, but it must be visible pixels, not an empty container. Anything painted before that, such as a plain white or colored background, does not count. FCP answers a simple question that matters to every visitor of a plumber or dentist website: how long do I stare at nothing before the page proves it is working? Because it captures the first sign of life, FCP is often the earliest loading milestone teams optimize. It sits between Time to First Byte, which measures server response, and Largest Contentful Paint, which measures when the main content finishes. A fast FCP reassures users the site is responsive, reducing the chance they hit the back button. Learn how it fits the bigger picture in our /wiki/website-speed-guide.
How is FCP different from Largest Contentful Paint? #
FCP and Largest Contentful Paint (LCP) sound similar but measure different moments. FCP fires when the browser paints the very first content, which might be a small line of navigation text or a logo. LCP fires later, when the single largest visible element, usually a hero image or main heading, finishes rendering. A page can have a fast FCP of one second but a slow LCP of four seconds if a big banner image loads late. Both are useful. FCP tells you when the page stops looking broken, while LCP tells you when it looks essentially complete. LCP is one of the three Core Web Vitals Google uses in ranking, whereas FCP is a supporting diagnostic metric that helps you understand why LCP might be slow. If your FCP is already poor, LCP almost always suffers too, so FCP is a smart first target. Our team explains both when we run /services/speed-optimization audits for local businesses.
Why does FCP matter for local business websites? #
Local customers searching on a phone for an emergency plumber, an open restaurant, or a nearby dentist are impatient by nature. Studies from Google show that as page load time climbs, the probability of a bounce rises sharply, and a blank screen during the first seconds is the fastest way to lose them. A quick FCP signals competence and keeps the visitor engaged long enough to read your offer and find your phone number. Beyond user experience, FCP feeds into the overall Lighthouse Performance score that tools like our /tools/website-grader report, and it correlates strongly with the Core Web Vitals that influence search rankings. For a service business competing in the /wiki/what-is-the-map-pack, every fraction of a second of perceived speed helps conversions. A site that paints content instantly feels professional, while one that lingers on white feels broken, regardless of how good the design eventually looks.
What causes a slow First Contentful Paint? #
Several common issues delay FCP. A slow server response, or high Time to First Byte, pushes everything back because the browser cannot paint until it receives HTML. Render-blocking CSS and JavaScript in the document head force the browser to download and parse those files before painting anything, which is a frequent culprit on bloated WordPress themes. Large, uncompressed CSS files, too many third-party scripts such as chat widgets and analytics, and slow web fonts that hide text until they load all contribute. Redirect chains, missing caching, and a distant or overloaded host add latency before the first byte even arrives. On many local business sites we rescue, the biggest wins come from reducing render-blocking resources and upgrading hosting. You can measure your own render-blocking resources with our /tools/website-grader, and if the report looks alarming, a professional cleanup through /services/speed-optimization or /services/website-rescue usually resolves the worst offenders quickly.
How do you improve FCP? #
Improving FCP starts with getting HTML to the browser fast, then removing anything that blocks the first paint. Reduce Time to First Byte with quality /services/managed-hosting, server caching, and a content delivery network so your HTML arrives quickly no matter where the visitor is. Inline the small amount of CSS needed for above-the-fold content, a technique known as critical CSS, and defer the rest so the browser paints without waiting. Defer or async non-essential JavaScript, and trim third-party scripts that add nothing to the first view. Use font-display: swap so text appears immediately in a fallback font instead of staying invisible. Compress and minify CSS, enable gzip or Brotli, and preconnect to critical origins. Each of these removes a delay between navigation and first paint. Most local business sites can reach a good FCP with disciplined front-end work, and our /services/speed-optimization service applies these fixes methodically rather than guessing.
How is FCP measured, lab versus field? #
FCP appears in two flavors. Lab data comes from synthetic tools like Lighthouse and PageSpeed Insights, which load your page in a controlled environment with a simulated device and network. Lab FCP is repeatable and great for debugging because conditions stay constant. Field data, also called real user monitoring, comes from the Chrome User Experience Report (CrUX), which aggregates actual Chrome visits to your site. Field FCP reflects your real audience, including slow phones and weak connections, and it is what Google uses when assessing real-world experience. The two can differ significantly. A page might score a fast lab FCP on a powerful test machine yet show a slower field FCP because many local customers browse on mid-range phones over cellular. Always check both. If field FCP lags lab FCP, your test conditions are too generous, and you should optimize for the slower real-world scenario your customers actually experience.
What is a good FCP target for 2026? #
Google's official thresholds classify FCP as good at 1.8 seconds or less, needs improvement between 1.8 and 3.0 seconds, and poor above 3.0 seconds. These thresholds are measured at the 75th percentile of page loads, meaning 75 percent of your visitors should experience the good range for the page to pass. For a competitive local business site, aim comfortably under 1.8 seconds so you have headroom for slower devices and networks. On modern hosting with a clean front end, an FCP well under one second is achievable and worth pursuing because it improves the whole loading experience downstream. Remember that FCP is a leading indicator: if you fix it, LCP and the visitor's overall perception of speed usually improve too. Track it over time rather than once, since new plugins, images, and scripts can quietly erode it. Our /wiki/website-speed-guide covers realistic targets for each metric.
How does FCP relate to Core Web Vitals and SEO? #
FCP is not itself a Core Web Vital, but it is closely tied to them and to search performance. The three current Core Web Vitals are Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift. FCP is a diagnostic metric that helps explain a poor LCP, because content cannot become the largest paint until the first paint has happened. Google has confirmed that page experience, including Core Web Vitals, is a ranking factor, and fast-loading pages also earn better engagement, which indirectly supports rankings. As AI-driven search surfaces grow, speed still matters because slow pages frustrate users regardless of where they arrive from. See /wiki/what-are-ai-overviews for how modern results are changing. Improving FCP rarely hurts and usually helps every downstream metric, so it belongs in any serious performance plan alongside the work we do in /services/conversion-optimization to turn that speed into booked jobs and calls. Because FCP is easy to measure and directly tied to how quickly a visitor perceives the page working, it makes an excellent first checkpoint when auditing a slow local business site before tackling the deeper rendering and interactivity metrics.
FAQ
Is FCP a Core Web Vital?
No. The three Core Web Vitals are Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift. First Contentful Paint is a supporting diagnostic metric in Lighthouse and PageSpeed Insights. It is not used directly for ranking, but it strongly influences LCP and overall perceived speed, so it is still worth optimizing.
What is a good FCP score?
Google considers an FCP of 1.8 seconds or less 'good,' 1.8 to 3.0 seconds 'needs improvement,' and above 3.0 seconds 'poor.' These are measured at the 75th percentile of real visits. For competitive local sites, aim well under 1.8 seconds so slower phones and networks still land in the good range.
Why is my FCP slow but my design looks fine?
FCP measures the first paint, not the finished look. A slow server response, render-blocking CSS and JavaScript, or invisible-until-loaded web fonts can delay that first paint even when the eventual design is attractive. Fixing render-blocking resources and hosting through /services/speed-optimization usually improves FCP without changing how the finished page looks.
How do I measure First Contentful Paint?
Use Google PageSpeed Insights or Lighthouse for lab measurements, and the Chrome User Experience Report for real-user field data. Our /tools/website-grader also surfaces FCP alongside other speed metrics. Check both lab and field numbers, since a fast test machine can hide the slower experience your real customers have on mid-range phones.
Does FCP affect SEO rankings?
Not directly, but it is tightly linked to Largest Contentful Paint, which is a Core Web Vital and a confirmed ranking signal. A slow FCP almost always means a slow LCP. Improving FCP improves loading perception, engagement, and the downstream metrics Google actually measures, so it supports SEO indirectly.
What is the difference between FCP and Speed Index?
FCP marks the single moment the first content appears. Speed Index measures how quickly the visible area fills in overall, capturing the whole progression of rendering rather than one instant. A page can have a fast FCP but a poor Speed Index if content keeps popping in slowly after that first paint. Both appear in Lighthouse reports.
Was this helpful?