GTmetrix Performance Blog

News, updates and guides on GTmetrix and general web performance

First Contentful Paint Explained

With the recent upgrade of our Chrome browser, we’re excited to introduce a new timing – First Contentful Paint (FCP)!

Along with various other upgrades, Chrome 62 introduced the First Contentful Paint timing, which differs from First Paint. Read on to discover the difference.

 


 

What’s the difference between First Paint and First Contentful Paint?

These two timings have similar names but refer to different points in a user’s experience.
 

First Paint

First Paint is triggered when a render – any render – is detected in the browser. This could be something as subtle and uninformative as a change in background colour.
 

A background colour could be regarded as First Paint in a web page’s load.

 

The issue with this timing is that first paints can be triggered relatively early on in the page load, while not necessarily delivering any content or information to the user for consumption.

Components of websites can load in a staggered fashion and while a background colour may be painted fast, actual content/interactivity may take a longer time to load.

The First Paint timing would be misleading in this case, as your site may not have been useful or usable until much later.
 

First Contentful Paint

First Contentful Paint is triggered when any content is painted – i.e. something defined in the DOM (Document Object Model). This could be text, an image or canvas render.
 

The first content that gets painted – like text, images, canvas render etc – is considered First Contentful Paint.

 

This timing aims to be more representative of your user’s experience, as it flags when actual content has been loaded in the page, and not just any change.

Because the focus is on content, the idea is that this metric gives you an idea of when your user receives consumable information (text, visuals, etc) – much more useful for user experience assessment than when a background has changed or a style has been applied.

 


 

Which one should I rely on?

These timings are may often end up being the same.

 

First Contentful Paint is definitely meant to be more accurate than First Paint – however, often the two timings may end up being the same.

There may be situations where you may prefer to use one or the other however:

  • On faster and lighter websites, it is more likely that First Paint and First Contentful Paint are the same due to the browser being able to render elements quickly. If they’re the same, either First Paint or First Contentful Paint will suffice.
  • On larger, more complex websites – you may see First Paint and First Contentful Paint drift further apart more often, due to multiple elements needing to be handled. First Contentful Paint would be the best metric to use on such sites.

 


 

Where to find First Contentful Paint in GTmetrix?

As with all our timings, First Contentful Paint can be found in the Timings tab in a GTmetrix report page.

You can find First Contentful Paint on the Timings tab under “Contentful Paint.”

 

You must be logged into GTmetrix to generate a First Contentful Paint timing (Sign up if you haven’t – it’s free!).

You can also find it in the Waterfall Chart:

Contentful Paint is on the Waterfall Chart as well – it may be the same time as First Paint, so they will overlap.

 

And it’s also available in our Video player in the legend:

Click on Contentful Paint to skip to its general position in the video playback.

 

You can click on Contentful Paint to its general position in the video playback – again this may be the same time as First Paint depending on your site.

Note: First Contentful Paint is only available on our Chrome browser option.

 


 

Better Timings are Coming…

While First Contentful Paint is an improvement from First Paint, it still has its drawbacks. Content that triggers the timing may not be meaningful – they may be graphical elements, logo taglines, site descriptions, etc – in other words, it may not be what the user came to your website for.
 

First Contentful Paint may still trigger at a point where nothing really useful is displayed yet.

 

In the browser updates coming ahead, another metric called First Meaningful Paint (FMP) will be available, where emphasis is put on content likely desired by the user.

What’s meaningful? – That differs from site to site of course, but the general practice currently is to designate the rendering of your hero elements as the trigger for First Meaningful Paint time.
 

First Meaningful Paint indicates when important sections of your site are complete.

 

Hero elements like marquees, splash images and major headings are likely to be more meaningful to a user when they visit the site, making them good flags for the First Meaningful Paint timing.
 

How can I measure my First Meaningful Paint?

You can’t with GTmetrix just yet. First Meaningful Paint is not standardized because of, “…how difficult it is to determine, in a generic way, what “meaningful” means for all pages.”¹

This is why the general best practice is to use the time when your hero elements are visible on screen.

We’re working on how best to implement First Meaningful Paint in GTmetrix – Follow us on Twitter, Facebook or Google+ to get the latest news and updates.

¹ Reference: Leveraging the Performance Metrics that Most Affect User Experience

 


 

Give it a try today!

Let us know if you run across any bugs or issues and feel free to tell us your thoughts on Twitter (@gtmetrix) or contact us.