First Contentful Paint (FCP) is a web performance metric that measures how long it takes for the first element of a page to be rendered and visible in the user’s browser.
Although FCP is not a Core Web Vitals metric, you shouldn’t ignore it if you care about your user experience.
Why? Because fast FCP means that your users can see that your content is loading, and how fast it’s happening contributes to their satisfaction. And the more satisfied your users are, the more eager they are to stay on your page, explore your content, and convert.
Without further ado, learn how to measure and improve your FCP score to provide your website’s visitors with a positive experience.
What does First Contentful Paint (FCP) mean?
First Contentful Paint (FCP) is a user-centric metric calculating the time it takes to render the first content element on a page that’s loading in a browser.
In other words, FCP tracks the time between when a page starts loading and when the first content element is visible in the user’s browser.
To be even more precise, FCP measures how long it takes to render the first Document Object Model (DOM) element that’s:
- image (including background images,)
- non-white <canvas> element, or
- <svg> element.
FCP is an important metric from the UX perspective as it measures how real users perceive the page load and decides on the first impression users have of your page.
For example, imagine users waiting too long for your page to load, seeing only the default background.
How long is ‘too long’ for users to get irritated and want to exit a page? Long enough is when users can already notice the delay.
Fast FCP indicates that ‘something’ is happening in the background. For your users, the first element being rendered on the screen reflects that:
- the page is working correctly, and
- there is some content on the page users may want to further explore and interact with.
From that perspective, FCP is a metric you shouldn’t ignore.
How to measure FCP?
First Contentful Paint (FCP) can be analyzed based on field and lab data.
You may combine these two ways of measuring performance to ensure unbiased FCP results.
Lab data allows you to measure your FCP score in a test environment with predefined settings.
The following tools can help you track your FCP measured in a lab:
To measure FCP in Chrome DevTools, open the ‘Performance’ section and click the ‘Reload’ button to let the tool analyze your page.
To find your exact FCP on the page load timeline:
- go to the ‘Timings’ section, or
- tick the box containing ‘Web Vitals’ below the main Chrome DevTools navigation bar and head to the ‘Web Vitals’ section on the timeline.
To measure your FCP score in Lighthouse, head to Chrome DevTools and open the ‘Lighthouse’ tab to run a performance audit.
Lighthouse will gather the data and generate the report outlining your FCP score in the ‘Metrics’ section.
Moreover, Lighthouse provides specific suggestions on what you can improve for better FCP. To see them, all you need to do is to filter out the results for FCP above the ‘Opportunities’ and ‘Diagnostics’ sections.
To improve your FCP score for a better user experience, field data is an invaluable source of information as it shows how real users interact with websites on the web.
The important thing is that Google’s field data is based on the Chrome User Experience Report (CrUX), “used by Google Search to inform the page experience ranking factor.” This means that by tracking and optimizing the real user data collected in CrUX, you can directly impact Google’s assessment of how performant your pages are.
The following tools can help you track your FCP based on field data:
PageSpeed Insights combines lab and field data from Lighthouse and CrUX, respectively.
To measure FCP using PageSpeed Insights, you just need to insert the URL you want to analyze in the tool’s search bar.
Except for the Lighthouse lab data that you can see in the ‘Metrics’ section, PageSpeed Insights allows you to see how real users experience the analyzed page both on mobile and desktop devices.
Also, similarly to Lighthouse, PageSpeed Insights provides detailed recommendations on improving your FCP in the ‘Opportunities’ and ‘Diagnostics’ sections.
Chrome User Experience Report
Chrome User Experience Report (CrUX) represents how real-world Chrome users experience websites on the web.
There are several ways to access the CrUX data for your website:
- Use the CrUX API. If you don’t have experience with APIs, consult your developers or follow the official Google documentation on CrUX API.
- Create a Looker Studio CrUX dashboard using a ready-made template. (this option is beginner-friendly but doesn’t provide granular data.
- Query the CrUX datasets using Google BigQuery.
What is an ideal First Contentful Paint score?
As FCP measures the time it takes for the first element of your page to render and be visible on the screen, the lower your score is, the better, so you provide your website’s visitors with a positive browsing experience.
It means you should aim for an FCP score of 1.8 seconds or less. To be even more precise, Google advises having an FCP score of 1.8 seconds or less for 75% of all your page views.
To ensure you’re hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.source: web.dev
Thresholds for First Contentful Paint
To get a better understanding of your FCP score, you should follow the thresholds developed by Google.
Each FCP threshold is marked with a different color, making it easier to interpret the score using various tools.
Here are the exact thresholds specified for FCP values:
|FCP time||How to analyze your score|
|0-1.8 seconds||Good (green)|
|1.8-3 seconds||Needs improvement (orange)|
|Over 3 seconds||Poor (red)|
To determine your FCP score, Google compares your page’s results to the real websites’ data from the HTTP Archive.
What causes high First Contentful Paint?
The First Contentful Paint (FCP) score may be negatively affected by various factors contributing to how fast your resources can be loaded and rendered at the beginning of page load.
However, among the most common causes of the high FCP score, you can find:
- slow server response time,
- lazy loading above the fold,
- an excessive DOM size, and
- slow font loading time.
Although understanding what aspects may contribute to poor FCP is essential, remember that analyzing your FCP score and identifying the potential causes of your issues is half the battle.
Why? Because only an in-depth diagnosis of your problems can help you efficiently optimize your FCP for better load speed and user experience.
Therefore, let’s dive into FCP optimization.
How to improve First Contentful Paint?
To begin with, you may use the specific FCP recommendations included in the Lighthouse performance audit in the ‘Opportunities’ and ‘Diagnostics’ sections.
On the other hand, you may also want to know what aspects don’t need to be further optimized for a better FCP score. You can find this information in Lighthouse’s ‘Passed audits’ section.
But in general, according to Google’s official documentation, there are several ways of improving FCP for any website. Let’s dive in.
|Recommendations||Plan of action|
|Eliminate render-blocking resources||Optimize the resources that block your page’s first paint by delivering critical CSS and JS inline, deferring non-critical resources, and removing unused ones.|
|Reduce server response time (TTFB)||Optimize Time to First Byte (TTFB) by, e.g., using CDN hosting and service workers.|
|Avoid multiple page redirects||Avoid multiple redirect loops and chains to prevent possible redirect errors and additional delays before the page can be loaded.|
|Preload key requests||Prioritize fetching resources that are requested later in the page load by using <link rel =preload>.|
|Preconnect to required origins||Establish early connections to important third-party origins by adding preconnect or dns-prefetch resource hints.|
|Keep payload size down||Avoid large network payloads by deferring requests until they are needed, caching them, or using WebP images instead of JPEG or PNG.|
|Serve static assets using caching||Configure HTTP caching to speed up the recurring visits to your page by setting up your server to return the Cache-Control HTTP response header.|
|Avoid an excessive DOM size||Remove the unused DOM nodes and create new ones only when needed. If you already have a large DOM tree, simplify your CSS selectors.|
|Minimize critical request depth||Reduce the number of critical resources, optimize their loading order, consider using the async or defer attributes, and optimize the number of critical bytes to reduce the download time.|
|Ensure text remains visible during webfont load||Ensure text is visible to users while fonts are loading. Avoid a flash of invisible text (FOIT) by including font-display: swap in your @font-face style.|
|Minimize request counts and payload sizes||Optimize your images and fonts, replace GIFs with videos, optimize your third-party resources, and take care of the render-blocking CSS and JS resources.
As you can see, there are numerous officially recommended ways by Google to optimize a poor FCP score.
However, as every website is unique, only an expert analysis of your specific performance issues may let you get to the real cause of your problems and improve your FCP score.
That’s why, if you don’t want to go through the optimization process by yourself, we can handle it for you.
Here’s what you can do now:
- Contact us.
- Receive a personalized plan from us to deal with your performance issues.
- Enjoy your organic traffic that converts!
Still unsure of dropping us a line? Check how our web performance services can help you speed up your website and improve your perceived load speed.
First Contentful Paint vs. other web performance metrics
First Contentful Paint isn’t the only metric measuring how fast a page’s elements render and load on the screen.
Because of that, FCP is often confused with other user-centric performance metrics, although they measure different aspects of a page’s performance.
Let’s dive in and compare FCP to other closely related metrics.
First Contentful Paint vs. Largest Contentful Paint
While First Contentful Paint (FCP) measures when the first element on a page renders, Largest Contentful Paint (LCP) calculates how long it takes for the largest element on a page.
The important thing to remember here is that the first loaded element on a page doesn’t have to be the largest one.
Another important difference is that LCP is one of the Core Web Vitals — confirmed by Google ranking factors.
For more details on this Core Web Vitals metric, read our Largest Contentful Paint (LCP) article to learn why it’s important and how to optimize it.
First Contentful Paint vs. First Meaningful Paint
As opposed to First Contentful Paint (FCP) which measures when the first element renders on a page, First Meaningful Paint (FMP) calculates when the primary above-the-fold content of a page is visible.
According to Google, FCP and FMP may equal when the first rendered element on a page constitutes the content above the fold.
On the other hand, FCP and FMP will differ when the content above-the-fold is located within an iframe, as FCP doesn’t measure it by default.
However, an important thing is FMP is no longer used since the Lighthouse 6.0 version, and Google recommends using LCP instead.
First Meaningful Paint (FMP) is deprecated in Lighthouse 6.0. In practice FMP has been overly sensitive to small differences in the page load, leading to inconsistent (bimodal) results. Additionally, the metric’s definition relies on browser-specific implementation details, which means it cannot be standardized nor implemented in all web browsers. Moving forward, consider using Largest Contentful Paint instead.source: Chrome Developers
First Contentful Paint vs. First Paint
Although First Contentful Paint (FCP) and First Paint (FP) seem to be identical, you shouldn’t use them interchangeably as they measure different aspects of a page’s perceived load speed.
FP calculates when the first pixels render on the screen considering the slightest changes, like changing the default background color.
On the other hand, FCP measures the time when the first DOM elements, like text or images, are already rendered.
To provide your users with a positive user experience, FCP and FP should occur simultaneously so that users don’t feel any delay.
First Contentful Paint vs. Time To Interactive
First Contentful Paint (FCP) and Time To Interactive (TTI) measure a page’s perceived load speed and responsiveness, respectively.
So how do they relate? FCP helps you calculate (and optimize) your TTI score because FCP works as a starting point to measure TTI.
In other words, if you want to measure how long it takes for a page to become fully interactive (TTI,) you need to start counting it from FCP.
Read our article about Time To Interactive (TTI) to learn how to improve it for your pages’ better interactivity and responsiveness.
As you can see, focusing only on FCP may not be enough to fully improve your website’s performance and user experience.
Knowing the difference and relationship between all these metrics above will help you optimize your pages’ responsiveness and interactivity throughout the page load lifecycle.
Read our articles about other web performance metrics:
- Largest Contentful Paint,
- Cumulative Layout Shift,
- First Input Delay,
- Total Blocking Time,
- Time To Interactive,
- First Contentful Paint (FCP) marks the time in the page load timeline when the first content element is rendered and visible in the user’s browser.
- You should aim for an FCP of less than 1.8 seconds. Remember that fast FCP makes a visible difference to your users and contributes to their browsing satisfaction.
- The most common causes of a poor FCP score are render-blocking resources, slow response time, and an excessive DOM size. Addressing these issues will help you speed up your pages and improve your overall FCP score.
- While FCP may be confused with other web performance metrics, understanding their differences may contribute to your FCP score and yield better performance results for your website.
- In 2023, when the importance of a good user experience is undeniable, improving FCP is no longer a question of ‘if’ but ‘how’ to maximize your page’s potential. Contact us to see how a personalized plan of action for your website can bring unparalleled SEO and business results.