First Contentful Paint
First Contentful Paint (FCP) measures when content first starts appearing on a website. FCP is measured in milliseconds and used to assess the loading speed of a website.
This article explains how the First Contentful Paint is defined, and how to measure and optimize it.
What is First Contentful Paint?
The First Contentful Paint metrics marks the rendering milestone where the user first has something useful to look at. Usually this means that text or an image have has rendered.
FCP stands in contrast to two other metrics measuring rendering progress:
- First Paint marks the time when the page first starts rendering – unlike FCP this could be an empty box with no content
- Largest Contentful Paint marks the time when the largest content element on a page is rendered
If all page content appears at the same time then these three metrics can have the same value. However, if they are different then the First Paint occurs before the First Contentful Paint, and the First Contentful Paint occurs before the Largest Contentful Paint.
This image shows the rendering progress an example website:
- At first only empty boxes are shown (First Paint)
- Then a logo appears at the top of the page (First Contentful Paint)
- Additional content appears, including a paragraph that's the largest page element (Largest Contentful Paint)
Do background images count as content?
Yes, if a background image is rendered the paint will be considered contentful.
Changes to how Largest Contentful Paint is defined
Different versions of Chrome measure FCP slightly differently. Google keeps track of changes to the FCP definition here.
What is a good First Contentful Paint?
Websites should have an FCP of 1.8 seconds or less.
While First Contentful Paint is not one of the Core Web Vitals that impact Google rankings, it is still one of Google's broader set of Web Vitals metrics.
|< 1.8 seconds||Good|
|< 3.0 seconds||Needs Improvement|
|> 3.0 seconds||Poor|
How to optimize First Contentful Paint
The most common cause of a slow FCP are render-blocking scripts and stylesheets.
For example, take a look at this DevTools recording of the DebugBear homepage. What resources need to load before content starts to appear on the page?
- The HTML document
- Two CSS files
The two CSS files are render-blocking and placed in the document
head element. You could avoid this by inlining the CSS directly into the document HTML as a
style tag. However, this would mean re-downloading the CSS as part of every document request, rather than using the cache after the first visit.
In this case we only have three render-blocking resources. The longest request chain is 2 requests long, because both CSS requests are triggered at the same time and can be made in parallel. So overall the FCP in this example isn't too slow.
This chart shows another website, this time for a site with multiple render-blocking scripts. All of these need to be loaded before any page content starts to show.
script tags could be moved further down in the HTML, for example to the end of the body tag. Moving the
script tags there will ensure they are no longer render-blocking. Alternatively, you can add the
async attribute to the script element.
If you're loading scripts on your website, keep in mind that they not just need to be downloaded, but also parsed, compiled, and executed.
Fonts and First Contentful Paint
Web fonts are fonts that need to be downloaded before the text using that font is displayed. Accordingly, using web fonts will make FCP worse in most cases.
The website in the previous section loads a CSS file that then in turn loads a Google Font.
However, the browser doesn't block rendering until the font is loaded, thanks to the
font-display: swap CSS property. This property means that if the font isn't available yet, then the browser uses a fall-back font instead. On Google Fonts you can achieve this by appending
&display=swap to the CSS URL.
Reduce server response time
You can check the response time of your server in the DevTools Network tab. The entry is the request for the initial HTML document. In this case, the server took 2.2s to respond and in total the request took 2.7s from start to finish.
Try to keep your server's response time below 600ms to reduce First Contentful Paint.
Slow server responses are more likely if the backend is responsible for rendering the page content. For example, if you have a Wordpress site with lots of plugins this can cause significant rendering delays. On the flip side, rendering content on the server also reduces processing time in the browser and avoids unnecessary network round trips.
Read more about improving server response time.
How to measure First Contentful Paint
There are many different tools that can measure FCP in different environments.
First Contentful Paint in PageSpeed Insights
Google PageSpeed Insights can provide both aggregate data from real Chrome users and run one-off lab-based tests.
The number shown in the FCP section of the real-user data shows that 25% of users experienced an FCP worse than this value. In this example, this means 25% of user experiences had an FCP of 2.2 seconds or worse, while 75% of user experiences were faster than 2.2 seconds.
If you click on Expand view you can see a more detailed breakdown of Good, Ok, and Poor experiences.
When testing a page, PageSpeed Insights also runs a one-off test from a Google server. This allows them to provide additional debug information that's not available for the real-user metrics.
The lab-based data is also useful if the page you're testing doesn't receive enough traffic to provide real user metrics.
First Contentful Paint in Lighthouse
You can find the FCP in the top left of the top of the Lighthouse Performance section.
To find opportunities to improve First Contentful Paint you can select FCP in the Show audits relevant to options.
How does First Contentful Paint affect the Lighthouse performance score?
In Lighthouse 9.1 the First Contentful Paint metrics accounts for 10% of the overall Performance score. This table shows the maximum FCP you'd need to achieve a certain subscore.
|FCP subscore||Max FCP (Mobile)||Max FCP (Desktop)|
The initial document request requires at least 4 network roundtrips on an HTTPS connection (DNS, TCP, SSL, and HTTP). Lighthouse simulates a roundtrip time of 150 milliseconds on mobile, so a perfect Lighthouse FCP would be 600 milliseconds.
This does not include your server response time or time the data spends travelling from your ISP to the website's data center.
On desktop Lighthouse uses a roundtrip time of 40s, so the minimum FCP would be 160ms.
First Contentful Paint in Chrome DevTools
You can measure FCP in DevTools by creating a Performance recording.
FCP is marked in both the Timings lane and in the Web Vitals lane if you have it enabled. You can also see the rendering progress in the filmstrip.
Measuring First Contentful Paint programmatically
You can get the First Contentful Paint for current page from the Paint Timing API:
First Contentful Paint on DebugBear
You can find the First Contentful Paint and Lighthouse Performance score in the page Overview tab.
The Lighthouse tab also shows the full Lighthouse report.
Use the project overview to view historical trends in the First Contentful Paint metric.