What Is First Contentful Paint? + An Action Plan to Improve It

If you could improve your website’s performance by 10%, would you?

Assessing website performance is a complex web of metrics, and First Contentful Paint (FCP) is just one factor that Google considers when assessing page load speed. FCP is responsible for 10% of a website’s overall performance rating and plays an important role in creating a positive user experience for visitors.

A site’s first contentful paint (FCP) is the total time it takes a page to load from sending the request to rendering content on the screen.

The higher the FCP score, the slower the content loads. If visitors think a page is taking too long to load, this can be a big red flag. In a study by Top Designs Firms, 42% of people said they would leave a company badly functioning website.

However, a low FCP score shows that the page loads quickly, which means that content is being delivered sooner. And fast loading content is one way to get visitors to scroll your website. In fact, Deloitte found that a 0.1 second improvement in loading time increased conversions by 8.4% for retail sites and 10.1% for travel sites.

When a millisecond makes a difference, it is best to do everything possible to improve your website speed. So let’s take a look at how to lower the FCP to make your website as quick and easy to use as possible.

What is First Contentful Paint?

First Contentful Paint (FCP) is the time it takes for a user to see the first piece of content on a website, be it images, text, logos, background graphics or non-white -Elements. FCP evaluates how users experience a website’s page load speed by measuring what people actually experience, rather than the results of a speed test tool.

In the timeline below you can see FCP playing in the second frame when the first text and image elements appear on the screen.

Image source

First Contentful Paint is one of six metrics recorded by Google Lighthouse performance report, along with Time to Interactive, Speed ​​Index, Total Blocking Time, Largest Contentful Paint, and Cumulative Layout Shift. Each metric measures some aspect of page load speed.

Image source

First Contentful Paint is an important metric in assessing page load time as it marks the point where a user can see something is happening on the screen. Without this assurance, a user could leave the page to browse a faster website.

First Contentful Paint is different from that Core Web Vitals Largest Contentful Paint (LCP) because LCP measures the time it takes for the largest element to become visible on a website. On the other hand, FCP measures the first item to load, which is not necessarily the largest item.

A quick LCP helps reassure people that the main content is useful to them. But a faster FCP reassures people that some happens on the page, which allows them to persist long enough for the rest of the page to load.

How to test the first Contentful Paint

FCP can be measured in the laboratory (pre-release) and in the field (real users).

Testing FCP in the lab is a great way to troubleshoot problems before your website goes live, but it’s not the most accurate way of assessing performance. This is where field tests come in, showing you how people interact with your website when there are differences in devices, network connections, and user interactions.

You can use the following tools to test First Contentful Paint:

Field tools

Laboratory tools

In this article, let’s go through what it looks like to run a test with Lighthouse – an open source automated tool for improving the quality of web pages. (If you’ve never done this audit before, follow the link for easy step-by-step instructions).

After running the test on a specific URL, Lighthouse will open a new tab to share the site performance overview. In the example below, the website does well in terms of SEO and accessibility, but needs to work on performance and best practices.

Image source

The audit goes deeper and also gives ratings for each of the six key performance indicators, including First Contentful Paint (FCP). In the test shown below, the FCP score is 2.5 seconds – a time that “needs improvement”.

Image source

But you need to know what constitutes a “good” score in order to improve FCP.

The ideal first satisfied painting speed

Google recommends a First Contentful Paint rating of 1.8 seconds or less to give your website visitors a good browsing experience.

Image source

But what determines your FCP score?

As with all things on Google, there is a method for the metric. Your FCP score is determined by comparing your site’s FCP time with the FCP times for real sites HTTP archive. You can dive deeper to see how Lighthouse determines thresholds and metric values.

When evaluating your FCP score, Google says, “A good threshold for measuring is the 75th percentile of page loads, segmented by mobile and desktop devices.” This helps to get an accurate representation of the user experience.

If your website has poor FCP score, there are a few steps you can take to save seconds and create a faster website that visitors will want to scroll through. But first let’s examine what leads to a bad score.

What causes High First Contentful Paint

Large text files, slow server response times, and multiple page redirects can all contribute to a high First Contentful Paint score. If you have high First Contentful Paint (FCP) it is likely due to one of these factors:

• Slow font loading time
• Slow server response times (TTFB)
• High number of requests and large transfer volumes
• Render blocking resources
• Unused or inefficient CSS
• Script-based elements above the fold
• Lazy loading over the fold
• Do not embed images above the fold
• Excessive DOM size
• Multiple page redirects

But remember, the Lighthouse Performance Score is a weighted average of all metrics – and the FCP is 10% of that total. As a result, the heavily weighted scores will have a greater impact on your overall performance rating. Here’s how the other Lighthouse metrics are weighted:

Image source

If your overall performance rating needs improvement, it may be best to spend time optimizing for total blocking time or the largest contentful paint before tackling the first contentful paint. If you implement good development practices across the site, your FCP score is likely to go down.

However, if you want to improve your FCP, you can switch from a red to a green score with a few deliberate steps.

How to Improve Your First Contentful Paint

Improving a First Contentful Paint (FCP) score is not always easy. But with the right plan of action, it’s easier to prioritize the biggest failures with the biggest impact. Let’s break down how to do it.

1. Make a list of high priority issues.

The first step in lowering the FCP score for a site is to run the above list of laboratory and field tests to understand this Exactly what to work on.

Let’s get back to the Lighthouse performance report from earlier. If the FCP score is “room for improvement” it is best to refer to the opportunities or diagnostic recommendations in the report. To see all recommendations, switch to the “All” tab. Or go to the FCP tab for recommendations related to First Contentful Paint (FCP) score.

Image source

The above test shares two ways to improve FCP: removing render blocking resources and making sure text remains visible while webfont is loading.

By familiarizing yourself with the top FCP problems, you will get a list of what to focus on and what to fix.

2. Learn what to ignore.

Another helpful feature of the Lighthouse Performance Report is to let you know what you are doing not need to concentrate. This list is created under the Passed Audits section of the Performance Report.

Image source

While it’s okay to ignore these non-issues, you should know that Google is constantly updating its metrics to evaluate page load speed. It is good practice to run tests routinely to make sure site performance is on track. You may need to prioritize a “passed audit” one day.

3. Work with your web team to troubleshoot issues.

Once you know what issues to look out for, all that’s left is to take steps to improve the ones that affect First Contentful Paint (FCP).

This post won’t break into the web development weeds. However, these detailed guides from Google are excellent resources for understanding every factor that affects page speed and performance. If any is affecting your FCP score, here is a look at how to fix it.

Regardless of whether your First Contentful Paint (FCP) score shows red, yellow, or green, there is always room for improvement. It’s the fun – and sometimes frustrating – part of web development.

But remember, small changes can have a big impact. Reducing server response times, compressing images, and paying attention to the above can lower your FCP score, speed up your site, and ensure site visitors have a faster, longer browsing experience.