First Contentful Paint (FCP): What is it and How Can it Be Fixed?

February 18, 2021   |   5 min read time    Austin Walker Austin Walker
Topics:

First contentful paint (FCP): what is it and how can it be fixed?

To understand exactly what the first content paint is, let’s look at the definition given from Mozilla:


First Contentful Paint (FCP) is when the browser renders the first bit of content from the DOM, providing the first feedback to the user that the page is actually loading. The question "Is it happening?" is "yes" when the first contentful paint completes.

The First Contentful Paint time stamp is when the browser first rendered any text, image (including background images), non-white canvas or SVG. This excludes any content of iframes, but includes text with pending webfonts. This is the first time users could start consuming page content.”

Alright, so ultimately this is the point when a user first sees that a page is loading, and can start to navigate through the page.

Why is this something Google is paying such close attention to?

According to Kissmetrics, 47 percent of visitors expect a website to load in less than 2 seconds, and 40 percent of visitors will leave the website if the loading process takes more than 3 seconds.

Let’s also think a little more in-depth about Google’s main objective: provide the user the best experience possible.

If Google provides an amazing user experience, they’ll keep coming back to the site in order to find what they’re looking for.

If the search engine sends traffic to a page that is having difficulty loading, the user is going to have a worse experience. Easy, right?

Ultimately, they’re providing the same valuable experience someone has come to expect, so that the user will continue to use the search engine over and over again.

And when someone is coming back to Google over and over, it offers them more of an opportunity to serve more ads, get clicks, and get paid.

The secret really isn’t that difficult, is it? They want to make more money by providing a better user experience. That’s pretty fair.

So what do we do about it?

There are a few ways that you can improve the speed of your First Contentful Paint (FCP) in HubSpot.

First, PageSpeed Insights to see what scores specific pages have on your website.

pagespeed insights

Your top report should look something like this, with your page score on top, and suggestions on how to improve down below.

So if you have a higher score for your First Contentful Paint, here’s how we can improve:

Update Your Website Templates

If your website hasn’t been updated in a long time, there’s a good chance that your website speed can be affected.

Throughout the years there have been a lot of changes to HubSpot and how it functions - along with the code that it uses to perform.

Let’s say that your blog has 100 pages. Your blog template is what loads all of those pages.

With as many changes that can come with technology in a short amount of time, it may not be functioning in best practices.

Let us know if you’d like to run a diagnostic on your site to see if new templates could help you.

Compress Header and Template Images

Almost all blogs within HubSpot have a header image, and sometimes even have images that are loaded into templates.

Compress these images using a compressor like TinyPNG.

compress images

But even before you compress the image, go ahead and shrink it down to about the size you’ll utilize. 

This Bob Ross meme could do with a little shrinking.

bob ross meme

Go into the Editor of your software and adjust the size:

adjust image size

 

Fortunately for us, the file size was already only 89 KB. Sometimes you can have photos that are high resolution and are huge.

Adjust the width to 1080 pixels or even less. It will still be seen by users well.

After you’ve saved the new file size, upload to TinyPNG.

download compress image

As you can see, the image was already compressed, so the file savings weren’t large. But if your photo hasn’t been compressed before, it should minimize the file size.

Then, upload back into HubSpot.

Lazy Load Images Below the Fold

Although lazy loading the images below the fold may seem like it’s not going to help us improve our score, if you consider that lazy loading means the photo doesn’t load until we scroll there, you can slightly increase your FCP score.

Since we’re already uploaded our new compressed photo into HubSpot, now click on the photo and select “Edit.”

Click into the Advanced option, then select lazy load from the next prompt.

Update the page.


Website Content Planner Guide

Download our Website Content Planner Guide to help kick off your HubSpot website redesign project!

Download Now ›

HubSpot Website Content Planner


If you found this helpful, please share.

facebook twitter

Want more? Subscribe Now!

Free Design Assessment