What is the the First Contentful Paint?

The first contentful paint (FCP) is the first piece of content loaded after the navigation. It is a useful metric for testing the page speed performance.

Since the FCP is the first measured content, it provides feedback to users that the webpage is loading. Website admins often optimise their pages to load the first piece of content as quickly as possible.

Pagespeed Insights FCP and DCL Timings

How can I check my First Contentful Paint?

There are several tools that can be used to measure your first contentful paint. On this page I have used images taken from Pagespeed Insights, GTMetrix and the Lighthouse Audit tool.

The most accurate is the lighthouse audit tool and it is installed directly into Chrome’s browser. To access this you will want to use the following shortcuts:

  • Ctrl + Shift + I for Windows
  • CMD + Shift + I for Macintosh

This will open Chrome’s built-in console. Then, once this is open, you will want to visit the Audits tab along the top.

Lighthouse Audit Settings

Once you have found the Lighthouse Audit Tool, there are three main settings you need to know. These are the Simulated Throttle, Applied Throttle, and No Throttle settings.

Simulated Fast 3G, 4X CPU Slowdown

This is used to simulate the website load through 3G connection and slowdown of CPU. Because it’s simulated the results are delivered back to the user faster than the applied test. The throttled processing means that everything is simulated to load slower than normal.

Simulated Throttle in Lighthouse Audit

Applied Fast 3G, 4X CPU Slowdown

In this test, instead of simulating slowdown of the 3G and CPU, it instead has an actual throttle. This causes the connection and CPU to slowdown significantly so that you can get real-world and accurate data of worst-case scenarios.

Applied Throttle in Lighthouse Audit

No Throttle

This is when you’re not stress testing performance and want to get a reflection of how the website works without extra load or poor signal. It includes no simulated or applied network and CPU slowdowns.

If you want to test this for yourself, then here’s what you can do:

1) Disable Wi-Fi on your mobile so that you’re using mobile data.
2) Disable 4g on your mobile so that you’re using 3G connections.
3) Open pages for real-world examples

You’ll notice that results will vary a lot, but generally, it should most likely resemble the test without throttling.

Lighthouse Audit FCP and DCL Timings

How can I fix my First Contentful Paint?

There are lots of great tools to help analyse your website’s page speed. However, improving the page speed is a lot harder. To improve your page speed, you should consult with an expert in development or search engine optimisation.

GTMetrix FCP and DCL Timings