fbpx

How To Improve Your Core Web Vitals In 15 Minutes

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.

how to improve core web vitals with the page experience report

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.

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

To achieve all of this, we need two plugins – ShortPixel and Nitropack. They both have free versions available to get you started!

Compressing Images

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.

shortpixel image optimiser

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-

enable webp images

Ta-da! Your images are now compressed and serving as fast as possible.

Set Up Lazy Loading

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.

advanced caching

You need to create an account:

  • Go to NitroPack
  • Select your plan (they have a free plan)
  • Enter the details
  • Accept the terms & conditions

nitropack

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:

nitropack connect site

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.

cache warmup

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:

  • Mobile
  • Tablet
  • Laptop
  • Desktop

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.

shortpixel adaptive images

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.

nitropack optimisation settings

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.

wp rocket

Install WP Rocket and navigate to the File Optimisation tab.

WPRocket File Optimization

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.

3. Optimise Your JavaScript

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:

  • Minify JS Scripts
  • Minimize & Consolidate JS Scripts
  • Defer JavaScripts Loading

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.

manual optimisation settings

Now click on advanced settings and toggle on Combine JS into one resource.

combine javascript

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.

WPRocket JavaScript Files

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.

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.

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.

Use only the fonts you need

Ideally, you should have only 1-2 fonts for your entire site.

Preload Fonts

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

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:

  • 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.

content delivery network

My go-to plugin for this is yet again…

NitroPack.

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.

keycdn

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.

Why?

Because this dramatically improves the speed at which the website loads.

page speed

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.

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.

As an absolute last resort upgrade your website hosting.

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.

YouTube video

In short, these are my top two hosting provider recommendations:

  1. WPXhosting
  2. Kinsta

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.

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.

page-experience-signal

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:

  • Speed
  • Responsiveness
  • 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.

They called these metrics core web vitals.

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.

google page experience update announcement

What does the update mean for you?

Well, if you haven’t paid much attention on how to improve core web vitals, it’s time that you do.

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.

GROWTH HACK: Sign up for my free video training series and get access to a copy of our internal private SEO tool.

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.

tools to improve core web vitals

Each of these tools is going to show your site’s problems- if any.

Google Search Console Core Web Vitals Report

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.

core web vitals report gsc

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.

page experience report

The report combines the core web vitals report with other page experience metrics like:

  • HTTPS
  • Safe browsing
  • Mobile-friendliness
  • 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.

pagespeed-insights-core-web-vitals

Better still, you can scroll down and get a detailed list of how to improve core web vitals.

things to fix

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.

YouTube video

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

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.

chrome web developer tools

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.

Google Lighthouse

Lighthouse is a must-have tool for any SEO.

It is similar to Google PageSpeed Insights but takes it to another level.

google lighthouse report

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

Core web vitals are here to stay!

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.

Get Started With NitroPack

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.

What are your thoughts?

* Name, Email, Comment are Required
4 Shares
Share
Tweet4
Share