Austin Walker
February 18, 2021 | 5 min read time
Topics:
Austin Walker
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: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.
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:
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.
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.
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.
Go into the Editor of your software and adjust the 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.
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.
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.
