How to Improve First Contentful and Meaningful Paint

You’re not optimizing your site to please a stopwatch. You’re optimizing your site for real people. So how can you determine if you’re achieving your goal?

You need to include metrics such as First Contentful Paint and First Meaningful Paint in your performance assessment in order to measure how your site is performing from your user’s perspective. Both will tell you more about how your site is behaving in the wild so you can optimize the things that will really improve your user’s experience.

In this post, we’re going to focus specifically on how to reduce the amount of time it takes to load content on your WordPress site so you can shorten the amount of time to the First Contentful Paint and First Meaningful Paint and improve your Google PageSpeed Insights score in the process.

Here’s everything you need to know about the First Contentful Paint & First Meaningful Paint, and how to improve them:

• What is First Contentful Paint (FCP)?
• What is First Meaningful Paint (FMP)?
• Using Google PageSpeed Insights to Find FCP and FMP
• 5 Recommendations for Reducing Paint Times

What is First Contentful Paint (FCP)?

First Contentful Paint, or FCP, is a performance metric that measures how much time has elapsed before the browser begins to display the first elements of the site.

Usually, the first content paint elements in WordPress are header elements, so the visitor will first see the site logo or the navigational menu.

The First Contentful Paint is important because it provides the visitor with feedback that their request is in the works. Have you ever clicked on a link or a button and then clicked it a couple more times because nothing happened? The FCP’s job is to communicate “we heard you and we’re working on it.” This assures the reader that they can expect your site to function correctly and provide content.

What is First Meaningful Paint (FMP)?

First Meaningful Paint is when the good stuff actually loads. When the content the user is looking for appears on the page, this is referred to as the first meaningful paint.

Visitors come to your site for content, not to see the logo and navigation menu, so the content holds more value for the visitor. The first meaningful paint is one of the most important metrics for evaluating how long your visitor is waiting to receive the information they visited your site for. The first meaningful paint also includes the time it takes to load web fonts since they’re needed to render your content.

The most valuable content elements on your web page are known as hero elements. This varies from site-to-site, but it isn’t hard to determine what the most valuable part of a page is.

For video pages on YouTube, the most important element is the video. On social networks, the first posts in the timeline that are above the fold are the most important. For blogs, the body of the blog post and the featured image (if it is featured above the fold with the blog content) are the most important because this is what the visitor sees first.

Other content, such as images, can be deferred until the visitor needs them.

Using Google PageSpeed Insights to Find FCP and FMP

Both First Contentful Paint and First Meaningful Paint are known as user-centric performance metrics. Google rewards sites that deliver a better user experience with higher search rankings. Since Google wants to encourage site owners to optimize their sites for users, FCP and FMP are two metrics that are measured in Google PageSpeed Insights.

Since November 2018, Google PageSpeed Insights has started using an open source tool called Lighthouse to simulate how your site loads for visitors. Lighthouse returns 6 metrics in the Lab Data section, that paint a rich picture of your site’s performance:

• First Contentful Paint
• Speed Index
• Time to Interactive
• First Meaningful Paint
• First CPU Idle
• Estimated Input Latency

First Contentful Paint and the First Meaningful Paint are time-based metrics that are measured in seconds. To achieve a favorable score in the eyes of Google, you want both the FMP and the FCP to be less than a second.

5 Recommendations for Reducing Paint Times and Improving Your PageSpeed Insights Score

When you run Google PageSpeed Insights, Google provides you with tailored suggestions on how you can fix your site. Running a test is the best way to see how your site falling short.

The following five suggestions are straight from Google for all sites on how to improve first meaningful paint and how to improve first contentful paint.

Our goal with the first four recommendations is to improve First Contentful Paint by speeding up the time it takes to download resources and remove obstacles that block the browser from registering DOM content. The last suggestion is to improve the First Meaningful Paint.

We’re about to get into some techy details, but if you want a simple solution, Hummingbird can help. Try Hummingbird Pro free and see what a difference it makes for your site. Version 3.0 is now available to our members with an all-new scanner that includes Lighthouse recommendations.

And for our WordPress.org Hummingbird free users, you can expect to see the new scanner sometime next week… or upgrade to pro and get it now ;)

1. “Minimize the number of render-blocking external stylesheets and scripts upon which the page depends”

What is render blocking? When a visitor is loading a webpage, anything that is getting in the way of rendering the DOM is referred to as render-blocking. They’re code obstacles that the browser has to process first before it can do anything else.

Sometimes they’re important. Your CSS files, for instance, are render-blocking, but they’re critical.

Other times, the render-blocking resource can wait. This is why you should move JavaScript files from the header of your webpage if they’re not needed to render the DOM. Load them after the DOM to improve user experience.

If you can, the best way to optimize page speed is to eliminate render-blocking resources altogether. If they don’t spark joy, then byeeeee….

2. “Use HTTP Caching to speed up repeat visits”

Caching is a reliable way to improve site speed for your visitors by storing assets in a cache for faster retrieval. There are several kinds of caches.

With HTTP caching, the browser stores a copy of assets downloaded via HTTP by the user in its cache, so it will be able to retrieve them without making an additional trip to the server. This dramatically improves performance for repeat visitors when done properly.

We recently compared Hummingbird to other popular caching plugins and Hummingbird out optimized all of them.

3. “Minify and compress text-based assets to speed up their download time”

Your webpages consist of text-based HTML, CSS and JavaScript files. If you can’t eliminate a file because it is essential, then you need to reduce the file size as much as possible.

There are two ways to do this:

Minify your files
When you minify your text files, you remove all extraneous characters and spaces, creating a compacted file that is much more difficult for humans to read, but much smaller. The browser doesn’t mind the lack of readability and will be able to download the file much more quickly.

Compress your files
Compressing your files is similar to the process of compressing your images. During the compression process, the compressor detects patterns and duplication in the text file and encodes them much more efficiently.

Both minifying and compressing your text files removes extra bytes that don’t affect your webpage negatively but reduces paint times.

4. “Do less JavaScript work on page load”

JavaScript is one of the worst offenders when it comes to slowing down your site. For one, JavaScript files take more resources to process when compared to other assets. Images, for instance, must be decoded, but JavaScript must be parsed, compiled, and then finally executed, taking up lots of valuable time.

It also doesn’t help when JavaScript code is rolled together into one huge file. I know that feels counterintuitive, but creating one big file doesn’t help performance one bit.

You’re much better off splitting up your code into bite-sized chunks with a process known as code-splitting. Then you can move the chunks that aren’t critical out of the head of your site, reducing the first paint time.

Another way to minimize your JavaScript files is to prune out code that is no longer being used. This process is known as tree shaking. As your site matures, you add in snippets of code, but not all of it is used in the long term. You should periodically go through your JavaScript code and remove what you don’t need.

5. “Optimizing the Critical Rendering Path to achieve a faster First Meaningful Paint”

The critical rendering path refers to all of the assets that the browser needs to render to respond to the visitor’s current request. You want to prioritize the assets that are most important right now and load them as quickly as possible. 

It’s like traveling. If you need to get to an appointment on time and you’re running late, it’s probably not the best time to run quick errands or do a little sightseeing. Do that after!

This recommendation encompasses removing render-blocking resources, but it takes a broader perspective. You need to look at all of the work that the browser is doing to deliver the webpage and find a better way to serve the important bits and put off everything that can wait. If it isn’t critical then you can defer it or load it asynchronously in order to deliver a better performance.

Keep in Mind

As you start to optimize your site, it is important that you remember that the results returned by Google PageSpeed Insights only represents a single perspective. They’re simulated results, but they don’t fully capture reality.

Visitors who are visiting your site on crappy devices on a shoddy mobile connection will experience FCP and FMP that are much much longer. All the more reason to continue improving even if you get a perfect 100.

Your goal should always be to optimize your site for real users, not a gold star ;)

Summary

First Contentful Paint and First Meaningful Paint are user-centered metrics that can tell you a lot about how long your visitors are waiting for content. Both should be less than a second for the best user experience. You can find out how your site scores with Google PageSpeed Insights.

If your site is too slow, the best way to improve time to first paint is to minimize render-blocking resources, use HTTP caching, minify and compress text-based assets, do less JavaScript work and optimize the critical rendering path. If you’re not sure what you need to do, running a Google PageSpeed Insights test will give you targeted suggestions for your site.

If you’re not sure how to improve your paint times, Hummingbird makes it easy. Get Hummingbird free on WordPress.org or try Hummingbird Pro free.

Tell me more about your experience with Google PageSpeed Insights. What have you done to improve your score and shorten the time to first paint?

Tags:

• Google PageSpeed Insights
• site speed optimization
• website speed