In this post, we're going to explain more about the various parts of the Core Web Vitals scoring system, and show you how you optimize your WordPress site for better scores.

If you want to get traffic to your website from Google, there are many factors to consider;  on-site structure, backlinks and domain authority are just a few.

Well you now also need to consider the experience a visitor has on your website...

Google is now scoring your site through it's Core Web Vitals (CWV) system and has announced that CWV scores will now have an impact on your rankings in their search results.

In this post, we're going to explain more about the various parts of the Core Web Vitals scoring system, and show you how you optimize your WordPress site for better scores.

Let's get started.

With Google’s Core Web Vitals, you are now able to know exactly what performance metrics to look for.

In the eyes of Google, these are considered important and will play an important part in your SEO rankings moving forward.

The benefit of this is it will provide a better user experience for your visitors as no one really wants a slow website.

But even if a website is fast, it doesn’t mean that other elements of the page will be functional, which can disrupt the overall user experience.

To stop this from happening, Google has introduced 3 key metrics, which we will now look at:

Let's take a look at each of these criteria in detail:

The easiest way to describe LCP is to look at how fast meaningful content on your website is displayed. These are typically your images and content above the fold.

If you’ve ever felt frustrated that an image on a page took forever to load, which delayed you from consuming the content, this is a result of a poor LCP.

This affects the user experience, which is why Google has now highlighted this as an SEO ranking factor.

Simply put, the faster the load time, the smoother the user experience. 

And the smoother the user experience, the less likely for the visitor to leave your website; increasing engagement and the chances of getting an email subscriber or a loyal customer.

According to Google’s scoring criteria, 2.5 secs or below is considered good, with less than or equal to 4.0 being average. More than 4.0 secs is considered poor and needs to get looked at urgently.

FID is measured by how long your web browser processes an event that a user took on your web page. 

If you’ve ever clicked on a link or a button on a web page and the delay between taking an action and viewing the information was too long, then you may have likely clicked out of the page due to a poor FID, resulting in a drop in engagement.

This is generally a difficult metric to optimize for because most web pages are heavily affected by the Javascript present on a website.

It is also relative to the device you’re using. 

A mobile device may have a harder time viewing and interacting with a page due to the time it takes processing the Javascript running in the background.

We will get into the best methods to optimize for this a little bit later. But as a general rule, a 100ms or less response time is what Google is expecting, with less than or equal to 300ms being average. Above 300ms is considered unsatisfactory.

Lastly, CLS is measured by how much your content shifts as your webpage is loading.

If you’ve ever visited a news based website with lots of advertisements, then you may well have experienced a lag in page load as well as having to constantly scroll due to new ads being loaded on the page.

This is considered very poor in Google’s eyes as it affects the user experience.

A score of 0.1 or less is considered good, with 0.25 or less considered average. Anything above 0.25 is generally very poor and needs optimizing.

These scores relate to the percentage movement of content as it is loading over the space of the viewport (what the user can see).  So if your content shifts 75% of the way down the page - this would result in a score of 0.75.

There's a significant difference in user experience on a site with little or no CLS - with content not shifting on page load.  This improved user experience is what Google is looking for with this page ranking factor.

In addition to the 3 Core Web Vitals Google wants to see optimized, there are also 4 additional web vitals that are just as important and used to measure web experience:

These are pretty self-explanatory and have been mentioned as a ranking factor for quite some time.

Mobile Friendly: Google is very insistent on making sure that all sites are mobile optimized. In an age of smartphones and heavy mobile use, it is no surprise why more websites need to be correctly optimized to be viewed on mobile.

Safe Browsing: Always make sure that your website doesn’t contain malicious links or malware. Installing a virus plugin on your website will prevent you from getting hacked and having unwanted code placed inside your website.

HTTPS: Having https now is crucial if you’re an ecommerce store owner in particular. Thankfully, many of the most popular web-hosting providers have provided free tools to help setting this up easy and straightforward.

Intrusive Interstitials: Your pages should not have any elements that block the main content from being consumed. Reducing this will improve user experience and overall engagement.

In looking at these metrics, it’s clear that the key message is to provide the best user experience. 

Not only will this improve SEO rankings, but will also improve conversions and overall business practices.

Google only wants the best performing and most relevant websites in their search results. 

Once we understand their key objective; to provide the best user experience when searching, we’ll have a better idea of the types of sites they want to see. 

This will ensure that we have a good chance of ranking in their search engine.

So let's now look at the different tools to allow you to test these metrics on your website.

There are a wide range of free tools you can use to begin testing these metrics in real-time.

There are a wide range of free tools you can use to begin testing these metrics in real-time.

There are two types of tools you can run depending on the metric.

Lab Tools: These tools will allow you to test certain conditions based on how potential users will see your page; allowing you to optimize your page accordingly.

Field Tools: These tools will offer you data based on how users interacted with your page in real-time.

Here are 5 of our recommended tools to begin auditing your page:

Google’s PageSpeed Insights provide both Lab and Field reports for both mobile and Desktop versions of your website.

The tool is very simple to use and navigate and provides you with a snapshot of how your website performs based on the metrics they’re looking for.

Upon running the page, the first thing you’ll see is the overall score and the Field Data of your page.

Note: Field data will only be shown if your site has enough traffic through it for Google to track average visitor scores.

Each score will be different depending on whether you’re viewing the results for Mobile or Desktop.

Below the field data will display the Lab Data of your page, giving you useful data of what potential issues are that you can begin looking at fixing.

Google is kind enough to also display a list of suggested fixes that you can begin making. Eliminating any guesswork involved when it comes to looking at fixing the problems.

Lighthouse is a website auditing tool that is built into the Google Chrome web browser.

It’s main purpose is to help developers look for ways to improve the user experience and have recently added CLS and LCP as additional metrics to track for their latest version.

They have also included Total Blocking Time (TBT) to measure FID in a Lab environment.

Clicking on the Lighthouse tab will open the window to begin running a report.

After running the report, Lighthouse will show you all the metrics for Performance, Accessibility, Best Practices, SEO and Progressive Web App, along with recommended suggestions for improving the data.

The data found in the Search console is based on users visiting your page in real-time. 

The pages are organised by status, metric type and url group.

The search console will display all of the data based on the LCP, FID and CLS metrics with recommended suggestions for improvement.

Note: Google Search Console is the best place to check for a real view of exactly how Google is seeing your site.  You can see a history of how your pages in the Google index are scoring over time - and identify places for improvement.

You'll also be able to see actual FID scores here which cannot be seen in lab tools.

Web.dev is powered by PageSpeed insights and provides a prioritized list of improvements to be made and how to do it.

Web.dev will display a very clean list of issues that’s beautifully presented and easy to read.

You can then use the links under the guide to click directly to the issue and begin fixing the issues.

GTMetrix is a third-party tool not directly owned by Google, but is a popular tool used by webmasters for auditing a website.

There is also a Pro version available for more detailed analytics. But the Free version is generally all you need to get started.

GTMetrix will show you a snapshot of the key performance metrics that are colour coded and easy to read.

Clicking on the “Structure” tab will reveal a more detailed look at the things recommended for improvement.

As we’ve listed the different tools you can use to begin testing your web assets. The next stage is to know how to correctly optimize it.

It’s also a good opportunity to ensure that we maintain good housekeeping in order to remove any additional problems moving forward.

First things first, while it is crucial to optimize for Core Web Vitals. None of these metrics will matter if your website is not built on the right foundations.

Here are three of the most important things to consider:

There are thousands of web hosting providers currently in the market with not all of them being equal. 

As a startup business owner with a small budget, it often seems easy and logical to choose a provider that offers the cheapest monthly service. 

However, this can prove to be a problem in the long run.

Cheaper hosts might look appealing, but your website performance can suffer because these hosts put many sites on each server, and limit server resources as a result, leading to slow performance.

So we recommend picking a provider that offers a healthy balance between performance and value for money.

Here are three web hosting providers we recommend and actively use across our businesses:

For a more detailed look at some other recommended hosting providers, please see our trusted web hosts article.

To help you further, here’s a list of hosts we strongly do not recommend.  This list is based on companies and hosts we consistently find perform slower for our customers and see the most complaints around these hosts:

If you’re using any of these hosts, you’re most likely going to struggle to achieve optimal results in your Core web vitals checks, no matter how much on-site optimization you do.

The beauty of WordPress is that it provides the ability to expand your site functionality with  a range of different plugins including paid/premium plugins and those available freely from the WordPress Repository.

However, this can slow down performance and cause unnecessary conflicts if you overload your site with plugins that add little value or contain features you already have available from other plugins (or that you're not using).

So we recommend using only the essential and lightweight plugins that you absolutely must use in order to keep your site running.

Our default setup for most sites where we use the OptimizePress Suite includes around 8-10 plugins in total.  These include an SEO plugin (we typically favour RankMath), Anti-spam plugin (Akismet works best in our tests), and possibly a membership plugin (WishlistMember or Restrict User Access).

Take a look at your own site and consider removing:

Keeping your active plugins in check is a great way to ensure your site operates at maximum speed.  Where you're not sure about a plugin - it's a good idea to test your site with it deactivated to see if any functionality was affected.

Where possible we recommend fully deleting plugins you're not using (you'll need to deactivate first).  For those plugins you think you might use again in the future you can always keep them deactivated (they won't use server resources then but may pose a security issue if their code is not updated).

Tracking your site visitor activity is an important part of helping you analyse and improve your site performance.  However, we often see sites with many different tracking scripts from tools which the site owner is no longer utilizing.

Every single additional tracking script or plugin you have active will add more requests to the page load - meaning slower load times and worse web vitals scores.

While it is important to track site visitors, you should only keep codes on your site for scripts/services you are actively using.  In most cases, this is Google Analytics/Tag manager and Facebook pixel. 

If you're no longer advertising on certain networks but still have their pixel, you should remove it as this will save requests and loading time.

As we highlighted earlier, a good LCP should ideally be 2.5ms or below.

As LCP is a speed metric, a few things are highlighted by Google that directly affect LCP:

Please do not feel overwhelmed by the jargon. We will take each of these issues in turn and look at how you can begin improving it in simple terms.

Of all the elements on a website, images are by far the most resource intensive. 

Whether it’s images used on a page, background images, image sliders or carousels, the size of these images quickly add up, making it more difficult for a page to load.

Many users will often upload large image files only to resize them in the WordPress editor later.

This is generally a waste as it’s far better to know the dimensions you’ll be using first and reduce the image resolution and file size accordingly.

The PageSpeed insights report will clearly identify pages on your site that will benefit from image optimization.

Here's an example from the Mindvalley.com home page where we can see a huge saving could be had with image optimization:

Optimizing images on your site is a quick win when it comes to optimization. It's very simple to do and there are many options available to do this efficiently for you.

If you have images you need to optimize on your existing site - you can use free tools like TinyPNG or Squoosh to reduce the file size before uploading.

With the Imagify plugin, you will be able to do all of this automatically. Though it is a premium plugin and will require a subscription.

When uploading images to your size - it's advisable to only use images with a maximum of 2x the size of the image on your page (to cater for retina screens).  We also advise (where supported by your page builder) you set lower resolution images for mobile and tablet screen sizes.

The WebP image format is a new image format that is smaller in size to JPEG and PNG by up to 25-34 percent.

The only downside to this format however is that it will not be compatible with all web browsers. 

Thankfully, there are now a few free WordPress plugins available that will convert images into WebP format automatically.  A few notable ones are:

Serving an image depending on the device being used will be a great way of reducing LCP scores.

Desktop images for example will contain more data than mobile images. So serving an image meant for desktops to be run on mobile can heavily affect your scores.

Lastly, with the rising popularity of tablets, you can also specify specific images to additionally run on tablets as well, providing a much more flexible viewing experience.

By default, most of your assets that you upload into WordPress will get stored locally, which overtime can increase the workload of your server and make it difficult to load.

With a CDN, you will be able to offload all of these assets to an external area that gets called when needed.

This will dramatically speed up your website and reduce the workload of your web server.

Some hosting companies (such as Kinsta) include a CDN as part of their service, so there's no work to be done on your side.

If you want to use an external CDN, you could consider KeyCDN or Cloudflare

As we mentioned in the fundamentals, a good server will help your site tremendously and will often remove the bulk of the issues a website might have.

Generally, when selecting a good web server, the faster the processor and the more memory present, the better the performance will be.

As a startup, we recommend investing in a shared hosting plan with a decent processor and memory. This will differ depending on the hosting provider.

You can gradually upgrade to a more expensive cloud hosting solution as your budget and the traffic coming to your website increases.

The more elements the browser has to render for your “above the fold” content (that’s the content that is visible when your website is loaded in the visitors screen), the longer this process will take.

By simplifying your content, you can often improve LCP.

Consider testing the following tweaks to your "above the fold" content on your website:

Optimizing FID can be tricky as it has to be measured by interactions made by actual visitors.

However, as we know how it’s measured and what Google’s looking for, we can look at the things we can do to technically improve the scores from a lab environment.

A key thing to consider is how quick assets load in the background.

The longer this process takes, the longer the delay between loading and a user interacting with the page.

A few things to look at:

Each time CSS and Javascript is added to a site, the web browser will pause the loading of a page until the CSS and Javascript has finished loading.

The browser will then continue to load until it hits another CSS and Javascript file, which repeats the process.

This process is called a ‘render-blocking asset’.

You can clearly see how this would negatively impact the speed of a site.

A simple fix would be to defer the rendering of the code so that the page can be quickly loaded, which will allow the visitor to interact with the page.

Using caching plugins like W3 Total Cache, WP Super Cache and WPRocket will have the option to set this up automatically.

A more advanced method that can help your pages perform well in PageSpeed testing is to delay the rendering of javascript on your pages until the user interacts with your page.

Because tools which test your pages do not interact with them directly like a user would, this means that javascripts they are delayed would not be loaded.  This means any load added by those scripts would be removed in page speed reports (giving you a better score).

An example PageSpeed Insights report showing many javascripts loaded on a page - delaying these scripts can provide a huge speed improvement.

This method should be used with care, and only on sites and pages which do not use javascript for layout functionality.  You should also note that delaying javascripts for tracking means that only users who interact with your page will be tracked.

Implementing this on your site manually would require some advanced development/coding knowledge.  If you use WPRocket - they do now include an option to delay rendering of javascript on your pages as an advanced optimization option.

As we discussed in the fundamentals, it’s always advised to remove any code running in the background that can potentially slow down your website.

Not all code will behave the same, with some affecting your site more than others.

You will be able to identify which code is fast or slow using Lighthouse, which will help you make an informative decision on which scripts to keep and which ones to remove.

Most issues surrounding CLS generally revolve around the load and positioning of assets on a page.

As we highlighted earlier, assets that move around on a page will greatly affect the user experience and increase the likelihood of the user to bounce or leave the site entirely.

Not only do we want a quick and smooth page load, but to ensure that all assets are loaded and positioned correctly without the need for any adjustments.

So the following needs to be considered:

When adding images to your pages, you should always specify the dimensions the image will occupy when loaded.  This means that the browser knows to leave space for this image, and you prevent the "shifting" of content as the image loads.

If you take this post for example, the image at the top of the post has a specific height and width set.  You can see this in the screenshot of our code below:

In most cases, your page builder platform will handle this for you.  In cases where you are adding your own images or code, just ensure you set the dimensions of your image in the code.

If you're using external fonts (such as Google fonts) on your pages, the associated font files will need to be loaded when the visitor first visits your site.

During the time taken for the external font files to load, your site will most likely show a system font (these are fonts all computers have already installed) and then replace this font with the external font when it's loaded.

This can negatively impact on user experience and CLS as the user sees a flash of one font, then the other font replacing it.  This is sometimes referred to as flash of unstyled text (FOUT) or flash of unstyled content (FOUC).

An example of flash of unstyled text

Some instances of FOUT may not impact on your pags' CLS score, but font loading issues can impact on user experience when visiting your pages.

To help avoid font loading issues - it's advisable to limit the number of external fonts to 2 maximum.

You may also wish to test the placement of font scripts on your page to optimize the speed at which they are loaded.  Tweaking this may require some developer experience.

As we’ve come to the end of this article, we want to leave you with one final thought... 

Please don’t get bogged down by the details of speed metrics and getting 100% scores. 

While they are important, the reality is, there are many variables that determine a good website in the eyes of Google.

If you’ve read our SEO guide, good page structure and external link building also play a key role in getting ranked in the search engines. 

But by using this guide and maintaining a good site, you’ll have a broader picture of what it takes to have a nice performing website and be well on the way to seeing long-term success in your business.

The all-in-one platform for marketers using WordPress.  100% of this page was built with OptimizePress.

Copyright © 2010-2024 OptimizePress® · All Rights Reserved.   Privacy Policy   ·   Legal Information