Core Web Vitals SEO: How to Improve Your Page Speed With These Tips and Plugins

What the f*ck are Core Web Vitals (CWV) and how important are they for SEO? Well, they play quite a big role in Google’s Page Experience signals that might affect your rankings. So let’s optimize them with our easy-to-implement tips and done-for-you plugins. 😄

In this blogpost, the following elements are covered:

• Google Page Experience Update
• What are Core Web Vitals?
• How important are they for SEO?
• Largest Contentful Paint
• First Input Delay
• Cumulative Layout Shift
• How to test and analyse CWV
• Plugins & Chrome extensions
• Create your own data studio dashboard
• Final thoughts & TL;DR

Google Page Experience Update

Google now finished the phased roll-out of the in June 2021 much discussed page experience update. In addition to charging speed and a secure connection (https) the mobile version of your website will now be assessed on three units of measurement (FID, LCP, and CLS) collectively referred to as Core Web Vitals.

It’s easy to guess why Google cares so much about this: when websites load quickly and stable, Google makes more money from the ad network, because misclicks on banners or conversion elements are prevented. In addition, it is good to keep in mind that Google exists by the grace of the users. This includes the best possible user experience within Google itself and the search results that are displayed. Websites full of cookie walls, annoying popups, slow loading websites and staggered templates can be very frustrating and the ultimately entice the user to look for alternatives to Google.

How important are Core Web Vitals for SEO?

The adjustments to Google’s algorithm is now fully rolled out and was closely monitored by the SEO community. The opinions of the impact of the update still widely differs. It is expected that websites with a bad user experience will see a negative impact on rankings. But also the other way around, so if you score well on these metrics, you will likely see an uplift in rankings 📈.

Besides that, a super fast and stable loading site also increases your conversion-rates. Win-win.

What are Core Web Vitals?

The core web vitals consists of three pillars: Largest Contentful Paint (LCP), First Input Delay (FID) and Cumulative Layout Shift (CLS).

In order optimize for CWV, it is good to understand what the Core Web Vitals are exactly. Google Core Web Vitals are performance metrics with regards to loading speed and stability when the webpage loads (CLS, FID and LCP). Let’s take a closer look at each one of them.

Largest Contentful Paint (LCP)

The largest contentful paint is exactly what it says, the largest display with content. To be more precise, the largest visible element in the viewport. The viewport is the visible part of a web page, it can vary for mobile and desktop. In many cases this concerns an image, video or a block of text. Quoted from webdev:

Largest Contentful Paint (LCP) is an important, user-centric metric for measuring perceived load speed because it marks the point in the page load timeline when the page’s main content has likely loaded—a fast LCP helps reassure the user that the page is useful.

Google rates the number of seconds it takes for this largest element to load from the moment the page has started loading. Scoring between 0 and 2.5 seconds is good, between 2.5 and 4 seconds needs improvement and a load time of more than 4 seconds is considered bad.

A good LCP score is achieved by ensuring that the main components of the page can load quickly. This again depends on a whole chain of things, which especially become visible in the waterfall of webpagetest.org.

Think about stuff like handling DNS, connecting, verifying HTTPS, requesting the page, receiving the HTML, processing the HTML and loading other files such as stylesheets, scripts and images. It pays to postpone the elements that are not immediately visible to the user and stuff that should be given priority. To load the other files, it is possible useful to already open the necessary connections if those files are have to come to another place. Think of the connection with a CDN (Content Delivery Network) or third party scripts. Use dns prefetch and preconnect for that.

In addition, it is important that the files are as small as possible. Not just because of download speed, but also because of the time it takes the browser to  process them. Therefore, make sure you have streamlined code (HTML/CSS/JS). Do not load things that do not are used and ensure that images are presented in the correct format (i.e. not too small but certainly not too big).

First Input Delay (FID)

The FID indicates how long it takes for the site to become interactive after an initial action of the user. This can be, for example, a click on a button or link. Often this delay caused by the browser still loading other elements. Quoted from webdev:

First Input Delay (FID) is an important, user-centric metric for measuring load responsiveness because it quantifies the experience users feel when trying to interact with unresponsive pages—a low FID helps ensure that the page is usable.

The FID can be measured with various tools from Google. There should be use be made of the tools that make use of user data. Those are Pagespeed Insights, Search Console and the Chrome User experience report. Google measures the values of the FID in 3 categories, good between a delay of 0 and 100 ms, need improvement between 0.1 ms and 0.3 ms and a bad rating from a delay of 0.3 ms.

It is important to analyze whether there are large scripts that are loaded that cause delays. Usually it is these scripts that cause a delay so that pages not quick to respond to clicks or keystrokes. In that case, there are several ways to improve the FID such as asynchronous or delayed loading of elements.

Cumulative Layout Shift

CLS is about the visual stability of the pages within the website. This is being looked at to elements that shift unexpectedly while loading the page. The layout shift is calculated by the shifts of elements such as images, buttons and Add blocks of text together within a 5 second session window from the first detected layout shift. Each layout shift score is calculated as follows:

Quoted from webdev:

Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts—a low CLS helps ensure that the page is delightful.

Google considers the following score as good, between 0 and 0.1, needs improvement between 0.1 and 0.25 and poor is everything bigger than 0.25.

It is important to analyze whether there are large scripts that are loaded that cause delays. Usually it is these scripts that cause a delay so that pages not quick to respond to clicks or keystrokes. In that case, there are several ways to improve the FID such as asynchronous or delayed loading of elements.

Where can I find my Core Web Vitals?

The dashboard of Google Search Console expanded with a separate page experience section. Under this heading you will find an in-depth look at Core Web Vitals and Mobile Usability. In it is the site vitality broken down into a report for mobile and desktop. The rating of the usability and user experience for desktop and mobile users is hereby split into 2 different reports. The reports are based on actual user experiences (so-called CRUX data, collected by Chromium browser users) from visitors to your website. And that makes it a valuable report. In addition, urls with problems grouped based on the same (errors in the) template or loading speed.

Analysing Core Web Vitals

For analyzing the Core Web Vitals, Google recommends using the (free) Google developer tools they offer. Below is an overview.

If you have ever used these different developer tools, for example Pagespeed Insights, Search Console or Lighthouse to monitor the performance of your website and web pages, it is highly likely that you have heard of the terms Lab and Field data. It is valuable to know what these two forms of data are and how to use them.

Field data

Field data is based on users who have visited your website in the past 28 days. This data is collected from the different geographic locations and from the different devices and network connection they used to connect your website to open. This data is collected in the Chrome User Experience Report. Purpose of this data is to gain insight into actual user experiences within your website and webpages specifically. Field data for your URLs may not be available when there have not been enough visitors to the pages. In addition, it is good to know that the results from field data may vary due to unique users who have different characteristics such as a different network connection or telephone.

Lab data

Lab data is not generated by real users but becomes real-time for you generated by various tools. The data is simulated as if a MotoG4 phone is being used. The network connection being simulated is a fast 3G connection and the location is established from one place. Main goal of the available lab data enables the developer to test and optimize without having to wait 28 days for real user data. Lab data does not contain data about user interactions,  therefore the FID cannot be measured with lab data, instead lab data is based on total blocking time.

The image below shows schematically which tools use Lab data and which use real user data.

Core Web Vitals Plugins & Extensions

Luckily for us, we can make use of plugins that do most of the heavy lifting for us. Here is an overview of useeful plugins and chrome extensions to consider:

Chrome Extensions

• Web Vitals
• Core SERP vitals

WordPress plugins

Now, unfortunately there aren’t any good core web vital plugins available. This is due to the fact thay the CWV are part of a broader metrics, namely site performance. So the best thing you can do to optimize your CWV scores is to optimize for site performance in general. Also because these plugins do very simlar things compared to solely optimizing for CWV. The best plugins out there are:

• WP Rocket
• WP Fastest Cache

Other resources to consider are:

• TinyPNG (to make images as small as possible)
• Imagify (bulk compress images)

WP Rocket settings

Since optimizing CWV can become pretty challenging and technical, we usually do two things:

1. Outsource optimization to someone on Upwork
2. Use a plugin to cover most of the basics

Let’s walk through some of WP rocket’s settings in order to optimize for CWV:

We have almost every setting enabled, you need to play around a bit with each feature by turning them on one-by-one. See if your site or functionalities crash, if they do, turn the feature back off again. WP Rocket has a great support desk that helps you with getting the best settings for your site.

Create your own data studio dashboard in 10 minutes

To help users out, Google has published a very nice and free data studio template you can use to monitor your core web vitals over time. Simply follow the steps outlined and you are good to go!

Final thoughts & TL;DR

• Core Web Vitals are part of Google’s Page Experience Signals
• Core Web Vitals consist of the Largest Contentful Paint (LCP), First Input Delay (FID) and Cumulative Layout Shift (CLS)
• Improving your score on these metrics might improve your rankings
• Analyse them by using Search Console and Pagespeed Insights
• Improve them manually (i.e. image compression, dimensions) or with a plugin like WP Rocket
• It gets complicated quite fast, look for developers on Upwork, they are willing to optimize your site performance for $50-$400
• Enjoy your fast site and improved rankings!