Lighthouse: What is First Contentful Paint (FCP) and How to Improve It

Overview

First Contentful Paint (FCP) measures how quickly text, images, or video first appear on your page.

A low FCP improves perceived load speed and page experience.

What does First Contentful Paint Measure?

According to Google:

"First Contentful Paint measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page. Images, non-white <canvas> elements, and SVGs on your page are considered DOM content; anything inside an iframe isn't included."

The faster your page renders consumable content (like text), the better the perceived performance your visitor experiences.

FCP is an important, user-centric metric for measuring perceived performance because it marks the point where visitors can first see any consumable content on the screen.

A fast FCP reassures the user that something is happening during your page load; a slow FCP implies that it's not doing anything, and thus is slow.

By contrast, the First Paint Timing measures the point at which anything is rendered on the screen (e.g., a background color, a border, etc.) - which is far less useful.

First Contentful Paint's Effect on Your Performance Score

This metric accounts for 10% of the total Performance Score.

Optimizing your page to improve FCP usually provides sizeable gains, both, in actual page load times and user perception of your site's performance.

Thresholds for First Contentful Paint

FCP thresholds are, as follows:

• Good - nothing to do here = FCP time of 934 milliseconds or less.
• OK, but consider improvement = FCP time between 934 and 1205 milliseconds.
• Longer than recommended = FCP time between 1205 and 1600 milliseconds.
• Much longer than recommended = FCP time higher than 1600 milliseconds.

How to Improve First Contentful Paint?

Note that the particular audits mentioned below likely contribute the most to your FCP; however, your page's FCP may also be affected by other optimizations that aren't mentioned here.

Improve your FCP by incorporating good development practices into your workflow, such as:

1) Reducing server response time

Reducing server response time helps deliver a fast FCP time on your page. Some of the things you can do here include:

• a) Reducing initial server response time
• b) Using a Content Delivery Network (CDN)
• c) Serving static assets with an efficient cache policy
• d) Avoiding multiple page redirects
• e) Establishing early connections to important third-party origins

2) Eliminating render-blocking resources

Eliminating render-blocking behaviour on your page ensures resources load as fast as possible.

Read our blog article to learn more about this optimization.

3) Minimizing request counts and payload sizes

Try and keep your request counts and payload sizes as small as possible, so that resources can load fast and the browser can start rendering content on your page sooner.

Note: Some of the Structure audits are related; improving one is likely to improve the others.

4) For WordPress Users

If you're using WordPress, you can take advantage of a plugin like WP Rocket to optimize your First Contentful Paint (FCP) in just a few clicks.

WP Rocket automatically applies 80% of web performance best practices right out of the box, making your website load faster and improving your FCP score immediately.

Optimizations like page caching, GZIP compression, CSS/JS minification, and critical image optimization are enabled by default and can improve your FCP right away.

To further boost FCP performance, WP Rocket offers additional powerful one-click features like JS and CSS optimization to eliminate render-blocking resources, and font preloading. These can be easily activated in WP Rocket's user-friendly settings panel.

Read our WordPress optimization guide using WP Rocket