Core Web Vitals: Be ready for Google’s new ranking factor

Reading Time: 6 minutes

Google, don’t we all just love Google. You are no doubt aware that they currently use what has been referred to as “Web Vitals”, as a factor when deciding whether or not a site should appear within SERPS. 

Ultimately, when this was first implemented the main objective was to improve the user experience. Google reiterates that it is essential for the long-term success of any site on the web. Whether you’re a business owner, marketer, or developer, Web Vitals can help you quantify the experience of your site and identify opportunities to improve.

Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.

Google has provided many tools over the years to measure and report on performance. Some developers are experts at using these tools, while others have found the abundance of both tools and metrics challenging to keep up with.

We have found that business owners should not have to be performance gurus to understand the quality of experience their website is delivering to their users. The Web Vitals initiative aimed to simplify the landscape, and helped sites focus on the metrics that matter most. Which most recently is the newest update, the Core Web Vitals.

In 2020 Google announced that Core Web Vitals are to be a ranking factor in May 2021.

What are Core Web Vitals? 

So, what are CWV I hear you ask? Well…

Core Web Vitals are the subset of Web Vitals that apply to all web pages & should be measured by all site owners. Each of the Core Web Vitals represents a distinct facet of user experience, is measurable, and reflects the real-world experience of a critical user-centric outcome.

Google has confirmed that the exact metrics that make-up Core Web Vitals will evolve over time. The current set for 2021, that I am discussing in this blog focuses on three aspects of the user experience—loading, interactivity, and visual stability—and includes the following metrics (and their respective thresholds):

The three specific page aspects are:

1. Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading
2. First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of less than 100 milliseconds
3. Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of less than 0.1

What is LCP? 

The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading.

Good LCP values are 2.5 seconds, poor values are greater than 4.0 seconds, and anything in between needs improvement.

As currently specified in the Largest Contentful Paint API, the types of elements considered for Largest Contentful Paint are:

• <img> elements
• <image> elements inside an <svg> element
• <video> elements (the poster image is used)
• An element with a background image loaded via the URL() function (as opposed to a CSS gradient)
• Block-level elements containing text nodes or other inline-level text elements

What is FID?

We all know how important it is to make a good first impression. It’s important when meeting new people and it’s also important when building experiences on the web.

FID measures the time from when a user first interacts with a page (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser can begin processing event handlers in response to that interaction.

To provide a good user experience, you should strive to have a First Input Delay of 100 milliseconds or less. To ensure you’re hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.

What is CLS? 

Have you ever been reading an article online when something suddenly changes on the page? Without warning, the text moves and you’ve lost your place. Or even worse: you’re about to tap a link or a button, but in the instant before your finger lands—BOOM—the link moves, and you end up clicking something else!

CLS measures the total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.

A layout shift occurs any time a visible element changes its position from one rendered frame to the next. 

To provide a good user experience, sites should strive to have a CLS score of 0.1 or less. To ensure you’re hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.

What can you do? 

So, what can you do? We recommend looking at your site individually, making sure you understand the back end of your website, if not getting some support here. I cannot stress highly enough, please do not make any changes in the backend of your website if you are not 100% on what it is that you are doing. I will not be liable for any broken websites, they give me nightmares.

My first recommendation when you are looking into improving your Core Web Vitals is to run your website through an audit tool to understand where your website currently stands. 

A couple of tools I would recommend are:

• Google Search Console – Welcome to the Google Search Console 

If you have not already got a Google Search Console set up, do it now. It will not only give you a thorough breakdown of which pages are letting you down for CWV, but it also gives you a lot more insight into the opportunities within your search marketing and any potential issues. 

• Chrome UX Report – Chrome UX Report Comparison Tool 

This is one of my favorite tools for the Core Web Vitals Update as you can also look at your competitors’ websites and whether they are optimised for the newest update. Or whether you can take advantage of owning the opportunity that surrounds being the first and gaining that boost. 

• Google Lighthouse – Lighthouse – Chrome Web Store 

Another good tool as it allows you to look into more than just your Core Web Vitals. However, I would recommend using this if you are already aware of a lot of the terminology that Google uses as it can be quite complex and possibly overwhelming. 

• GTMetrix – GTmetrix | Website Performance Testing and Monitoring 

As an agency, we have been recommending GTMetrix for years. It is an incredible tool to understand your website’s performance. The most recent update shows not only the breakdown of the Core Web Vitals but also the “Waterfall” of how long each element on your website is taking to load. Which provides an incredible opportunity to tweak those specific areas. 

• Page Speed Insights – Google PageSpeed Insights 

 Another fantastic way to look at each page on your website and understand where they are in terms of their current Core Web Vitals. It uses a fantastic and easy-to-follow traffic light system to allow you to pinpoint the sections that need extra attention. 

Once you have found your scores, depending on the results, I would recommend that you look at each aspect of the CWV separately and work your way through improving each. 

To improve your LCP: 

LCP is primarily affected by four factors:

• Slow server response times
• Render-blocking JavaScript and CSS
• Resource load times
• Client-side rendering

Other solutions include:

• Apply instant loading with the PRPL pattern
• Optimising the Critical Rendering Path
• Optimise your CSS
• Optimise your Images
• Optimise web Fonts
• Optimise your JavaScript (for client-rendered sites)

To improve your FID:

To learn how to improve FID for a specific site, run a Lighthouse performance audit and pay attention to any specific opportunities the audit suggests.

While FID is a field metric (and Lighthouse is a lab metric tool), the guidance for improving FID is the same as that for improving the lab metric Total Blocking Time (TBT).

Other solutions include: 

• Reduce the impact of third-party code
• Reduce JavaScript execution time
• Minimise main thread work
• Keep request counts low and transfer sizes small

To improve your CLS:

For most websites, you should avoid all unexpected layout shifts by sticking to a few guiding principles:

• Always include size attributes on your images and video elements
• Never insert content above existing content, except in response to a user interaction. This ensures any layout shifts that occur are expected
• Prefer transform animations to animations of properties that trigger layout changes. Animate transitions in a way that provides context and continuity from state to state

Again, I reiterate, please do not try to do these changes if you are not sure what to do. 

Conclusion 

Why does this matter? 

Well, Google has expressed that when the update first rolls out at the end of May 2021, you will not be penalised for not being optimised for the three Core Web Vitals discussed in this post. However, you will gain a boost if all three are optimised. There is every chance that in the future, similarly to when they rolled out the original Web Vitals update, you will be penalised. 

So get yourself a boost and get your Core Web Vitals optimised, before June 1st 2021. 

If you have any questions on anything that I have discussed please feel free to reach out to me at jessica@ecomone.com or LinkedIn.