Throughout June & August 2021, Google made some big changes to its algorithm.
Google’s algorithm implemented new metrics to help them evaluate whether your website provides a good user experience or not.
This was called the Google Page Experience update which is based around the core web vitals metrics.
The three core web vitals are made up of:
- Largest contentful paint (LCP)
- First input delay (FID)
- Cumulative layout shift (CLS)
They measure how fast your site pages load and the user experience your visitors have.
So, in this post, I’m going to show you, step-by-step, how to improve core web vitals to make Google happy.
What Will I Learn?
- How To Improve Core Web Vitals Step by Step
- Why You Should Care About Core Web Vitals
- 6x Tools To Measure & Improve Core Web Vitals Scores
How To Improve Core Web Vitals Step by Step
All of this might sound very technical. But I have good news-
It only takes 6x simple steps that can be done in under 15 minutes to make huge improvements.
Best of all…
If you have a WordPress website, you can do all of these with plugins. No technical knowledge is required.
1. Optimise Your Images
Images are one of the biggest culprits for a slow website. So, the first thing you need to do is optimise your images so they load fast.
To do this you need to:
- Compress them
- Set up lazy loading
- Adapt the dimensions
- Optimise image file sizes
Heavy images take a long time to load. You need to compress each of your images to make sure they are as small as possible.
But, manually compressing every image on your website is out of the question. It will just take too long.
Thankfully you can use Shortpixel to do the work for you.
Install and activate the ShortPixel plugin on your website.
Now you can bulk compress each image to make them all as small as possible.
This should dramatically improve the load speed of your website already but…
…I have one more trick up my sleeve to take it a step further.
You can compress images by an extra 25-36% off your images by checking 2 boxes and deploying the WebP image format-
Ta-da! Your images are now compressed and serving as fast as possible.
Set Up Lazy Loading
NitroPack has a number of features dedicated to serving up media quickly, including lazy loading images.
You need to create an account:
- Go to NitroPack
- Select your plan (they have a free plan)
- Enter the details
- Accept the terms & conditions
Now you just need to connect NitroPack to your website.
Download the NitroPack plugin and install it on your website. Once NitroPack is installed, you’ll see a screen that looks like this:
To finish up, all you have to do is:
- Go back to your NitroPack account
- Go to Dashboard & Connect Your Website
- Copy Your Site ID & Site Secret to your connector
- Click on Connect
Lastly, click on Connect and NitroPack is ready to use.
Immediately after connecting NitroPack to your website, the cache will start to work but let’s go a step further.
To do that, you need to turn on the Automatic Warmup Cache feature.
Done! Lazy loading (plus a ton of other speed optimizations) are now set up correctly.
Adapt Your Image Sizes
Think about it… Images on your website are viewed on a number of different devices:
Each of these devices’ screens are completely different sizes.
To maximise speed, you want to serve images only at the size they need to be for each device.
If you have installed NitroPack, adapting your images has already been taken care of automatically, so don’t worry.
Otherwise, you can use the ShortPixel plugin called – ShortPixel Adaptive Images to do it.
2. Optimise Your CSS
CSS is what makes your website look good. This is what allows your web pages to be designed a certain way shaping the site’s overall look and layout.
Here’s the problem:
When browsers encounter a site resource to download (CSS, JS, images, fonts) they put it in a load queue. CSS being the style of the web page is prioritised by browsers first.
That’s why you often see CSS being talked about as a “blocking” resource. CSS has to be loaded first before a lot of the other webpage files.
There are four key CSS optimisations to make:
- Minify Your CSS
- Inline Critical CSS
- Combine Your CSS FIles
- Preload Your CSS
Thankfully you can use two plugins to accomplish this.
If you are already using NitroPack, as long as you have either the medium, strong, ludicrous mode selected, it will do all of the CSS optimisations for you automatically.
An alternative plugin you can use is WP Rocket. It has similar functionalities to NitroPack so you make sure that you choose one or the other.
Install WP Rocket and navigate to the File Optimisation tab.
Here you can check each of the boxes under CSS optimisation to ensure that each file is minified and optimised for delivery.
That’s it! Your CSS is now optimised for maximum speed.
To learn more about WP Rocket, check out my full WP Rocket Review.
- Minify JS Scripts
- Minimize & Consolidate JS Scripts
With NitroPack, most of this is done automatically for you but not all.
Now click on advanced settings and toggle on Combine JS into one resource.
Log in to your WP Rocket account and click on the File Optimisation tab.
Here you check the boxes you want. Done!
4. Optimise Your Fonts
Your website’s fonts are loaded in by browsers the same way images are. Web fonts can be pretty heavy and take up valuable time when loading into the page.
Ever notice that a web page seems to load and then it will suddenly “shift up”?
When this happens, the font finally loads properly, changing the overall layout of the page. This is a big offender, affecting your cumulative layout shift score.
There are two easy steps to make sure that your web fonts are optimised.
Use Only The Fonts You Need
This is pretty easy to understand.
When you create a web page, don’t use lots of different fonts.
Ideally, you should have only 1-2 fonts for your entire site.
Preloading fonts just means that an optimised copy of your fonts is stored in each cache so that it can be delivered faster.
Most caching plugins preload fonts automatically and serve them from your server rather than Googles. NitroPack and WP Rocket both have features to help with font optimization.
5. Minimise Third-Party Scripts
Third-party scripts are any script hosted on a domain that’s different from yours.
This can include anything from tracking pixels through to those social media icons you just had to have on your website.
Third-party scripts make your website bloated and load slower.
As the page loads, Google calculates how long it takes to load each individual script. If it takes longer than 250ms – it fails the audit and can affect your core web vitals score.
You should use WebPageTest to see exactly what scripts your site is using and remove any that you no longer need.
6. Speed Up Your Server
Next up, we have to make sure our server is responding as quickly as possible. There are a couple of things that you can do here.
Use A CDN
CDNs speed up your website by limiting the physical distance between:
- The user
- Your server
For example, if you have a website visitor in Sydney, Australia but your server is located in Canada, each file has to travel all the way around the world.
Using a CDN, the visitor in Sydney can have the website files delivered locally from Sydney which is so much faster.
My go-to plugin for this is yet again…
NitroPack has 215 locations globally and is powered by Amazon CloudFront- the super-fast CDN tool from Amazon Web Services.
Not bad, right?
By default NitroPack’s CDN is configured automatically. So you don’t have to do anything.
Looking for another option?
KeyCDN is a great CDN that has a good global presence and performs very well.
It is very popular amongst WordPress users because of its integrations with other plugins.
KeyCDN offers a 30-day free trial so you can comfortably test it out.
Preload Your Cache
It’s crucial that your visitors are always being served an optimised version of your website.
Because this dramatically improves the speed at which the website loads.
One of the ways to do this is to preload your website cache. That means that visitors will be served cached versions of the site when possible.
Change Your Website Host (Last resort solution)
What if you have done everything above and the server is still too slow?
The truth is your website is only as fast as the foundation it is built on. Tweaks and plugins can only carry it so far.
If you are paying less than $10 a month for your hosting, your website is likely stuck on a server with thousands of other websites. This could be the culprit.
I recently did a test to find out who really offers the fastest WordPress hosting.
The results were surprising, to say the least. Turns out the most expensive provider is not always the best.
In short, these are my top two hosting provider recommendations:
Why You Should Care About Core Web Vitals
That was a lot, right?
But don’t worry, your hard work is going to pay off. There are a couple of big reasons why you should improve your core web vitals.
Core Web Vitals Are Official Ranking Factors
For me, this alone is reason enough.
Anytime Google confirms something as a ranking factor, I will be paying attention.
Why does Google care so much about core web vitals?
Google ran some internal and external tests about websites and user experience. As you know, Google is all about making sure its users have the best experience possible.
They found that:
- Visual stability
…dramatically impacted the overall experience users would have on a website.
Because of these findings, Google came up with metrics to measure each of them.
To make sure that site owners paid attention to the new core web vitals they built it into the Google search engine algorithm with the Page Experience update.
This Is Only The 1st Core Web Vitals Update
In November 2020, Google announced a core web vitals update for 2021.
That update started rolling out in June 2021, with Google announcing the full update to be completed by August 2021.
What does the update mean for you?
Google is really starting to focus heavily on:
- User experience
- Page experience
You need to make sure that your website offers the best experience for humans and search engines.
Check out my Google Page Experience Update checklist to learn more because I’m sure they’ll be making more updates in the future.
6x Tools To Measure & Improve Core Web Vitals Scores
We’ve helped all our clients prepare for this update, so I want to share with you what tools we used for this.
Each of these tools is going to show your site’s problems- if any.
Google Search Console Core Web Vitals Report
Login into Google Search Console and click on the Core Web Vitals tab.
The report breaks down URLs into three categories on both mobile and desktop:
- Poor URLs
- URLs need improvement
- Good URLs
Obviously, the goal here is to make sure that you have 100% good URLs, especially on mobile.
Google Search Console Page Experience Report
Once you have 100% good URLs for your core web vitals on mobile, you will see your page experience report.
The report combines the core web vitals report with other page experience metrics like:
- Safe browsing
- Intrusive interstitials
- Ad experience violations
The page experience report details the percentage of URLs that provide a good user experience and the number of impressions in the search results over time.
Google PageSpeed Insights
Want to see what Google thinks of your core web vitals in real-time?
Google PageSpeed Insights is the fastest way to see your core web vitals for any URL on your website.
Better still, you can scroll down and get a detailed list of how to improve core web vitals.
It doesn’t get any easier than that!
Chrome UX Report
The Chrome User Experience Report (CrUX) is a more advanced way to look at your core web vitals.
CrUX analyses core web vitals of Chrome users as they use a website in real-time.
Let me explain:
With Google PageSpeed Insights, the Google crawlers review your website and produce a report whilst CrUX delivers a report on exactly what real people experienced when they loaded the site.
Google said that the goal is to “capture the full range of external factors that shape and contribute to the final user experience.”
Although CrUX is a more advanced tool, you can see how your website performs for real users and how it compares to your competitors.
Chrome DevTools is a set of web developer tools that are built directly into the Chrome browser.
What can you do with them?
Chrome DevTools allows you to view and change a web page while on Google Chrome.
This enables you to:
- Make changes to your web pages in the browser.
- See the impact in real-time.
In other words, you can see how the changes impact your core web vitals without actually affecting the live page.
If the changes are positive, you can copy them over to your live page to make them permanent.
Lighthouse is a must-have tool for any SEO.
It is similar to Google PageSpeed Insights but takes it to another level.
Lighthouse provides you with information on how to improve the performance and SEO of your website.
It goes beyond measuring just page speed load times.
You can install the Lighthouse Chrome extension for free, which enables you to analyse any page quickly.
Wrapping It Up
The next evolution of Google’s search algorithm updates will be focused on ranking websites that provide the best user experience for their visitors.
The best way to future proof your website against updates is to improve core web vitals.
NitroPack is the best tool to improve core web vitals, easily. It takes less than 15 minutes to set up and takes care of most issues automatically.
Check out my NitroPack review to see exactly how you can take full advantage of this tool.
Website speed is critical to growing your organic traffic and has a direct impact on your ability to convert visitors into customers.