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:
They measure how fast your site pages load and the user experience your visitors have. Look at our “What Are Core Web Vitals” post to learn more.
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?
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.
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:
To achieve all of this, we need two plugins – ShortPixel and Nitropack.
They both have free versions available to get you started!
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.
To set up lazy loading we will use the Nitropack plugin (you can also use WPRocket).
NitroPack has a number of features dedicated to serving up media quickly, including lazy loading images.
You need to create an account:
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:
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.
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.
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:
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.
When it comes to optimising your site’s code, JavaScript is public enemy number #1.
JavaScript is the code that makes your website interactive involving JQuery and tracking scripts like Google analytics.
As you can imagine, JavaScript can take forever to load causing a ton of speed issues.
There are three main JavaScript optimisations that you need to make:
And again, we can use either NitroPack or WP Rocket to take care of all of this for us.
With NitroPack, most of this is done automatically for you but not all.
If you want more control over exactly what JavaScript optimisations, you will need to login into your NitroPack account and select the “manual” mode.
Now click on advanced settings and toggle on Combine JS into one resource.
With WP Rocket, you will need to check the boxes to set your JavaScript optimisation settings.
Log in to your WP Rocket account and click on the File Optimisation tab.
Here you check the boxes you want. Done!
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.
Here’s why:
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.
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.
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.
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.
To speed up your server, you will need to use a Content Delivery Network (CDN).
CDNs speed up your website by limiting the physical distance between:
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.
It’s crucial that your visitors are always being served an optimised version of your website.
Why?
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.
NitroPack already does this by default and WPRocket has a similar feature so you shouldn’t need to do anything if you enabled it already.
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:
If it’s time to upgrade your website hosting provider, I would start with either of these two. Check out the full WPXHosting review and Kinsta review (hosts this blog) for more information.
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.
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:
…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.
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:
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.
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.
The absolute best way to improve core web vitals is by the core web vitals report directly inside Google Search Console.
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:
Obviously, the goal here is to make sure that you have 100% good URLs, especially on mobile.
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:
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.
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!
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:
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.
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.
Otherwise…
You can use WPRocket along with PerfMatters and KeyCDN to help improve your core web vitals.
Remember:
Website speed is critical to growing your organic traffic and has a direct impact on your ability to convert visitors into customers.
One Response
Join My Facebook Group
Subscribe to my YouTube
Connect on Linkedin
Follow My Twitter Page
Thanks for this Blog…We are using Wp rocket to improve our site site’s Core web Vitals…Thanks