What Is First Contentful Paint (FCP) in Google Page Speed Insights

Google has added a new experimental speed report in Google Search Console, which they announced in the beginning of 2019. I’ve had a lot of questions come my way regarding what these new metrics mean. The new metrics in the report are First Contentful Paint (FCP) and First Input Delay. For today’s post we are going to discuss the First Contentful Paint (FCP) metric.

Everyone needs to know that these new features are purely experimental. This tool still requires revision on Google’s part.

Let’s take a deeper dive into what first contentful paint (FCP) is, what it means for you, and how it is measured.

How Does Google Collect These Metrics?

Some users believe this data is collected by Lighthouse and Page Speed Insights. This is incorrect. While, the goal of Lighthouse and Page Speed Insights is to provide an analysis in an easy to understand fashion, this is not the case for these new metrics.

The source of this information is from the Chrome User Experience Report (CrUX), which collects data anonymously from real-world Chrome Users. Google collects this data from various devices under variable network conditions and from different locations. If a URL does not contain enough data, Google does not include it in the Chrome User Experience Report.

This means that even after optimizing a website, seeing tangible improvement in Google Search Console is not always immediate. Additionally, other factors like user location, network conditions, and even the sample of data Google uses to generate the report, means you still might get poor or moderate performance.

What Does First Contentful Paint (FCP) Mean?

First Contentful Paint or FCP measures the time from the moment the user navigates to the website and when the browser paints the first content on the screen. Google Defines it as the following.

FCP 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.

Google Dev Team

In simple terms, it’s the amount of time it takes for the browser to show any content to the user. A white screen of emptiness can lead users wondering whether or not the website is loading properly.

How To Reduce First Contentful Paint Time?

You have two choices when it comes to improving the first contentful paint time.

  • Improve the delivery speed of the resources.
  • Load those resources in a non render-blocking fashion.

Improving your time to first byte (TTFB) also affects the first contentful paint time (FCP), but it improves the the load time of your entire website as well. Thus, it is an obvious fix.

The techniques used to improve first contentful paint time can be complicated. For example, on websites that use a heavy theme or page builder, fixing all the common pain points is not possible.

Final Thoughts

First Contentful Paint (FCP) is one of the new metrics measured in the Google Search Console Speed Report.

First Contentful Paint or FCP measures the time from the moment the user navigates to the website and when the browser paints the first content on the screen.

If you need your website optimized feel free to contact me via the contact form and we can discuss what kind of optimization your website needs.

scott hartley

About the author

Scott is a web performance geek, lover of all things coffee, and avid video game player. His WordPress work delves into web performance, web security, and SEO.

Leave a Comment