What is First Contentful Paint in Google’s PSI Tool?

If you’ve been asking search engines what First Contentful Paint is, you’ve probably been checking your page load speed in Google’s PageSpeed Insights (PSI) tool recently and are a bit confused!

Don’t panic because I’m going to explain precisely:

• What First Contentful Paint is.
• How it impacts your page load.
• What you can do to reduce the time it takes for First Contentful Pain to complete.

Firstly then, let me explain what it is… as simply as I can!

So What Exactly is First Contentful Paint?

First Contentful Paint, or FCP as it’s also known, is one of the things examined by Google’s PageSpeed Insights tool (PSI), which checks how quickly a webpage loads. Your page load speed is super important these days as it’s a signal that search engines use to rank your site in search results. Slow loading sites do not tend to do as well as faster ones, as they offer a poor user experience.

FCP is one of several PSI Lab Data tests, which include:

• First Contentful Paint
• First Meaningful Paint
• Speed Index
• First CPU Idle
• Time to Interactive
• Max Potential First Input Delay

The Lab Data tests result in an overall page speed score of between 0 – 100 (100 being the fastest).

The First Contentful Paint specifically tests how long it takes a browser to generate (or paint) the first items specified in the Direct Object Model (DOM) of your page when someone lands on it. The DOM is a tree-like structure that defines the objects within your page and the sequence in which they load.

So the First Contentful Paint timer kicks in when it encounters items specified in the DOM such as:

• Text.
• Images.
• Scalable Vector Graphics (SVG).
• Canvas elements (containers for graphics).
• Webfonts.

In terms of the PSI tool, the idea of FCP is that it represents the time it takes for a visitor to see content when a page loads, even though it might not be fully meaningful at that point.

As with the overall results of the Lab Data tests, First Contentful Paint (along with the other tests) is given a score between 0 and 100 (again 100 is the top score). Here’s how the PSI scores rate FCP speed.

How to Improve FCP Speeds

Google generally advises not to focus upon trying to fix one specific PSI Lab Data metric to improve page load speeds. Instead Google suggests fixing the elements reported beneath the PSI Lab Data section, titled Opportunities. These highlight specific ways you might increase overall page speed load times, but do not specifically address one single metric.

However, there are a couple of exceptions:

1. Font loading.
2. Images.

As mentioned above, fonts and images are loaded as a part of the FCP process… and we can most definitely do something here.

Font and image load times are exceptions because they both occur in the First Contentful Paint period. So, to improve the speed of the FCP, you should explore ways to speed up font and image loads.

I’ve written about streamlining font loading in this post: Ensure Text Remains Visible During Webfont Load. This outlines a simple way to reduce font painting times with the simple addition of a few lines of CSS. I implemented the same steps for SideGains, and improved my page load speed times dramatically.

In terms of images, you should optimize all your images as much as possible, without losing quality and serving up something fuzzy! You can do this through your favorite graphics editing software, an online image optimizer or a plugin for the CMS you use.

Optimizing Images for FCP

I use a bunch of different software for editing my images… Photoshop being my preferred tool. If you don’t use such a behemoth, you can optimize images with an free online tools, such as:

• Pixlr Editor (a pretty decent graphics editor actually… though you need to permit Flash).
• JPEG Optimizer (for compressing JPEG files).
• Kraken (for compressing JPEG, PNG and GIF files).
• Tiny PNG (compresses JPEG and PNG files).

Since I use WordPress for SideGains, it seems right for me to discuss ways you can reduce FCP if you use WordPress too!

How to Improve First Contentful Paint in WordPress

If you’re like me and use WordPress for your blog, there are a few nifty plugins that will optimize your images automatically.

SiteGround’s SG Optimizer

If you use SiteGround as your hosting provider (highly recommended, as it’s the host I use), you can use the SG Optimizer plugin. This manages a whole bunch of optimzation functions to make your pages run load more quickly, including:

• Caching.
• Compression.
• Minification.
• Image optimization.

It’s image optimization tool can be configured to optimizae all your images automatically on upload, or you can run it against all existing images that have not been optimized.

Read my review and why I use SiteGround for hosting here: A Review of SiteGround (by Someone Who Uses It!)

You can only use the SG Optimizer if you use SiteGround as it WILL NOT WORK on another hosting provider.

reSmush.it

With over 100k active installations, reSmush.it is a tried and tested image optimizer for WordPress. It permits optimization on image upload and bulk optimization on existing images.

The free version of reSmush.it permits optimizing of on JPG, PNG and GIF images up to 5MB.

EWWW Image Optimizer

EWWW Image Optimizer has over 700k active installations and is another free plugin (the paid version offers more features). It offers optimization for JPG, PNG, GIF and PDF, and will even work on images you have on your blog that are outside of your WordPress media library.

Using these plugins to optimize images will help to improve First Contentful Paint in WordPress and lead to an overall decrease in page load speed.

Summary

• First Contentful Paint is a measurement that Google uses to assess how quickly the first items on your page load when someone visits it.
• It’s one of a series of Lab Data tests in the Google PageSpeed Insights tool.
• Ensuring your font remains visible during webfont load and optimizing your images will make the First Contentful Paint much more lean, leading to faster page load speed times overall.
• A faster FCP provides a better experience for your visitors.

That’s it for now!

Paul

Feel free to leave me a comment and let me know how you’ve improved your FCP!