How To Optimize First Contentful Paint (FCP) For a Better User Experience?

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:

• text,
• 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 tools

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:

Chrome DevTools

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.

Lighthouse

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.

Field tools

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

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: 

1. Use the CrUX API. If you don’t have experience with APIs, consult your developers or follow the official Google documentation on CrUX API.
2. Create a Looker Studio CrUX dashboard using a ready-made template. (this option is beginner-friendly but doesn’t provide granular data.
3. Query the CrUX datasets using Google BigQuery.

JavaScript API

If you have some experience with using JavaScript, you can use the Paint Timing API to capture FCP in the page load.

However, how the actual FCP metric is calculated and what the API reflects may differ. That’s why, to avoid unnecessary confusion, Google recommends using the web-vitals JavaScript library for measuring FCP.

But remember that the web-vitals library also has its limitations. For example, it’s impossible to measure cross-origin iframes in JavaScript whereas to calculate FCP you need to be able to measure all iframes.

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,
• render-blocking CSS and JavaScript resources,
• 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.
Minify or remove unused CSS and JavaScript	Minify unused CSS and reduce JavaScript to minimize resources consumed by the network activity by, e.g., deferring non-critical CSS or using code splitting.
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.

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.

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.

Wrapping up

1. 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.
2. 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.
3. 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.
4. 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.
5. 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.