$2,000 Free Audit

Get A Proposal
blog

Everything To Know About Google’s Core Web Vitals

When it comes to a high-ranking and high-converting website, speed is a huge factor. Here, we introduce Google's latest Core Web Vitals. Find out everything you need to know about achieving the perfect score.

You might have observed that page speed has taken centre stage in SEO community discussions lately, and most of these talks are about Google’s new speed metric WebVitals. 

But here’s the catch. SEOs have tried to achieve the best page speed score ever since Google and other search engines said user engagement is a major ranking factor.

However, these optimisation efforts were mostly around a few myths that speculated on the ideal page speed score. 

This is exactly what Google busted with the introduction of Core Web Vitals.

With Google’s announcement about the new Web Vitals metrics, website owners now know what the ideal speed they must aim for, but they are a bit more worried! 

Nowadays, websites concentrate more on the accumulated scores that show up on tools such as Pagespeed SpeedInsights, Pingdom, and GTMetrics. 

Perfect page speed score

Even though these are great tools to check the speed of a web page, the impetus has always been on the overall speed rather than the individual user experience metrics, which mattered more. 

Google has come up with the concept of Core Web Vitals to make sure the webmasters spend quality time in improving the speed metrics that matter to the users and not the browser or Google bots for that matter. 

What are Core Web Vitals? 

Core Web Vitals, or just Web Vitals, are a new set of performance metrics that analyse the speed signals essential to delivering a superior user experience on the web. In short, Web Vitals are a set of specific factors that will be part of Google’s “page experience” score, measuring how users experience the speed, responsiveness, and visual stability of a page. 

Core Web Vitals are part of Google's page experience score(Image Source: Search Engine Journal)

Core Web Vitals are made up of three specific page speed and user interaction engagement measurements: largest contentful paint (LCP), first input delay (FID), and cumulative layout shift (CLS).

 

Why are Core Web Vitals important?

Importantly, Web Vital compliance is going to be the latest entry to Google’s ranking signals. Starting in 2021, Google will make page experience an official ranking factor. 

Google will introduce Core Web Vitals 2021

(Image Source: Google Search Central)

The core web vitals, along with the existing page experience metrics like mobile-friendliness, safe browsing, HTTP security, and no intrusive interstitial, will be defining elements of future Google Algorithm Updates that decide which websites to rank.

Where and when is this going to affect rankings?

Google has announced that Core Web Vitals will become ranking signals for search results in May 2021.

Core Vitals to become ranking signals May 2021

But, while a great page experience score will help you rank higher, it won’t magically push you to the #1 in Google. In fact, Google notes that page experience is still just one of many ranking factors that they use to rank sites in search.

Google Core Vitals page experience vs relevant content(Image Source: Google Search Central)

In this article, you’ll learn more about how the Core Web Vitals will affect rankings, what site owners can do to improve their performance metrics, and get some of the tools and know-how you can use to get started - and get ahead.

Let’s dive in.

Core Web Vitals Metrics

The Core Web Vitals, introduced in May 2020, are valuable metrics related to site speed, responsiveness, and visual stability. 

Performance metrics for each Web Vital statistics are graded according to three outcomes:

  • Good (passes)

  • Needs improvement

  • Fail

Google classifies these three metrics as follows: 

(Image Source: Search Engine Journal)

 

Largest Contentful Paint (LCP) 

LCP is measured by the amount of time it takes for a page’s primary content to load. In layman’s terms, it is the time from clicking on a link to seeing the content on-screen. LCP is hugely influenced by the render time of the largest image, video, or text in the viewport. Site owners can improve LCP by:

  • Removing any unnecessary third-party scripts

  • Upgrading their web host

  • Setting up lazy loading

  • Removing large page elements

The ideal LCP measurement should be 2.5 seconds or faster. 

First Input Delay (FID)

 FID measures the time it takes for a page to become interactive. In layman’s terms, it is the amount of time it takes for a page to be ready for user interactivity such as clicks, scrolls or keyboard input. Google considers FID important because it takes into account how real-life users interact with websites. Site owners can improve FID by:

 

  • Minimising (or deferring JavaScript)
  • Removing any non-critical third-party scripts
  • Using a browser cache

 

An ideal measurement for FID is less than 100 ms. 

Cumulative Layout Shift (CLS)

CLS measures the visual stability of a page. In layman’s terms, this is the amount of unexpected layout shift of visual page content. Site owners can minimise CLS by: 

  • Using set size attribute dimensions for any media (video, images, GIFs, infographics, etc.)

  • Making sure ads have a reserved space

  • Adding new UI elements below the fold

The ideal measurement of CLS is less than 0.1.

It should be noted that the Core Web Vitals speed scores are not a permanent set of metrics that define page experience

As technology improves, the current scores may change based on what users expect a good web experience to be. 

 

Tools to measure and report Core Web Vitals

Now that you know the three signals that go into Core Web Vitals, let’s focus on what’s most important - measuring and reporting. In other words, do you measure how you’re doing with Core Web Vitals, and if you have an issue, how do you go about fixing it?

Since Google believes that the Core Web Vitals are critical to all web experiences, it has made tracking them very simple. Google’s Chrome User Experience Report collects anonymised, real user measurement data for each Core Web Vital. This data enables site owners to quickly assess their performance without requiring them to manually instrument analytics on their pages. It also powers tools like PageSpeed Insights, and Search Console's Core Web Vitals report.

Tools to measure and report Web Core Vitals

(Image Source: web.dev)

Google Search Console and PageSpeed Reports

The first thing you need to do is look on Google Search Console, where you’ll find a new report called Core Web Vitals Report. This is designed to show how your pages perform based on real-world usage data (sometimes referred to as field data). The report will also tell you which of your URLs are poor, which need improvement, and which are good.

To further diagnose and troubleshoot issues, you’ll want to use Google PageSpeed Insights, which is linked to every report in Search Console. Here is an example of a PageSpeed Insights report for LCP:

(Image Source: Backlinko)

PageSpeed is powered by Lighthouse, a suite of performance metrics tools. These can be pretty technical, so you may need a web developer or page speed expert to address the issues that appear.

 

How to achieve the perfect Web Vitals score?

Core Web Vitals score

Most SEOs overlook the slow speed of a website as it requires more expertise than changing the title and description of a page. And more importantly, you need a certain level of technical SEO experience to achieve the desired results. 

Adding a cache plugin and optimising the images, CSS, and JavaScript are some of the easy fixes that webmasters come up with. These optimisation efforts definitely help in improving the server response time and reducing the overall resource size. 

However, from the research that we have done in the last month, we have identified that despite these easy fixes, the websites were not able to achieve the ideal Core Web Vitals score. 

Here’s why: 

  1. Cache plugins speed up the site performance and improve the server response time only when the users revisit your site or when they browse through multiple pages within the same session. If the cache is set to expire soon, this advantage is also wasted. 

  2. Images, JavaScript, and CSS are integral to the overall look and feel of any website. Delaying the sequence of when to fire each of these can result in a poor user experience, and this often ends up breaking the site. 

  3. If you’re running a CMS, you may require multiple Plugins or Apps to optimise each of the resources. This can result in your website becoming even slower.

What you’re about to see is a strategy that has worked for many of our clients. We’ve helped them achieve the perfect WebVitals score by following the process you find below. 

We identified that if the same web server is trying to deliver primary and secondary resources, achieving the ideal WebVitals score will be hard. 

However, there are hosting platforms like WP-Engine and AWS, which come with all the features mentioned above inbuilt. Moving forward, choosing such hosting providers will be a key, which means SEO begins even before you decide on the host. 

You may be wondering how some websites hosted on WP-Engine and in Amazon Web Server can achieve the perfect WebVitals score. The remaining part of this article is going to discuss precisely this.

 

Resource optimisation for Core Web Vitals

Several factors contribute to slowing down the page load time. Large image files, Javascripts, CSS files and the requests generated by each one of these increases the payload on browsers and keeps users waiting for long.

Fortunately, there are a couple of Google-recommended solutions that can make sure a pleasant user experience on your site, which, in turn, will improve your ROI. 

These are the same techniques that we used to get the perfect Web Vitals score for the client you just saw above. 

 

Optimising images for Page Speed

Large image files are responsible for the maximum payload on browsers. Optimising the images can help in speeding up a site and offer a good user experience as well. 

  1. Image CDN: If your images load from the same server, it might put a lot of load pressure on your server. The most effective way to dismiss this problem is by using a CDN server. AWS and Cloudflare are currently the best picks if you're looking for a good Image CDN provider. 

  2. WebP Format: You have to also ensure that the CDN you have selected converts the images into WebP format, which is the Google Recommended Image format for Web images.

  3. LazyLoad: Implementing a lazy loading technique also increases the score of WebVitals as only the onscreen image resources come along with the initial payload. The off-screen images will load as and when the viewers reach near the particular image viewpoint on the website. During the loading process, only the dimensions of the off-screen images load to avoid page break. 

Optimising Java and CSS

  1. GZip Compression: GZip compression has become a standard practice for almost all websites. However, this is still important as it makes the files smaller and enables faster network transfer.

  2. Minifying Resources: The first step to optimise the JavaScript and CSS is to minify these resources. Minification is a process where the non-critical and redundant resources are removed to speed up the process. This is a basic feature offered by most optimisation plugins. 

  3. Combine CSS and Javascript: Using a single file for loading the JavaScript code and CSS will reduce the number of requests and can speed up the rendering. 

    By enabling this, a single file will be used to deliver all the CSS resources and each resource will be grouped by media type. 

    The same happens with the JavaScripts as the number of DOM requests can be reduced, which will increase the overall speed performance. 

  4. Reduce Render Blocking: The most common reason for slow PageSpeed score is the excessive use of Javascript and CSS. Though some Java and CSS files are critical for the overall stability of the websites, not all have to load above-the-fold, which makes it render-blocking. 

    It’s important to optimise the execution of non-critical JavaScript and CSS. Make sure that these files are rendered only after the user interaction with the site is detected. This option can drastically improve the PageSpeed score and additionally help you to achieve the perfect WebVitals score.

    I know by now, most of you may be thinking, "I have done all of these but still my WebVitals Score is not up to what Google expects." If that’s the case, it’s because you missed out one important aspect of CSS and Java delivery - the CDN again. 

  5. Deliver CSS and JavaScript Using CDN: Once again, until you implement the CDN for loading JavaScript and CSS, you are banking on the speed of your server to deliver all these resources. 

    Most of the time, without the CDN, you can reduce the load put on the server but it will still sweat. 

    To be frank, there is a ton of it. Our tests have come out with mind-blowing results for websites that have enabled it. 

Optimising the font

Font rendering behaviour is one of the most important speed drainers. 

Browsers are trained not to render the text unless the font loads from the payload. This causes a lot of delay in rendering the pages and results in slower page speed. 

To optimise the font, ensure your CDN can override font rendering behaviour. A good CDN can swap the font of the rendered text and display the original font as soon as it loads from the CSS. 

In normal cases, this happens within a few microseconds as both resources are delivered from the same CDN server simultaneously. This can significantly decrease the Cumulative Layout Shift and give you a perfect WebVitals score. 

Embed Codes

Embedding images and videos on a website can slow down a site. However, many businesses cannot choose to get rid of these videos since they are a part of a product demo or introduction video.

Google recommends a quick fix for embedded images and videos where you can lazy load these assets too. Also make sure the video resources load only when a user clicks on the “Play media/video” button. 

When we implemented this optimisation, it showed a 70% improvement in performance in Lighthouse. 

AMP Pages

A slow server can significantly affect the performance of a website. AMP cache can help optimise delivery, but enabling AMP for desktop may cause significant UI changes and impact conversion. So ensuring your server is responsive and fast still remains essential.

Conclusion

This introduction of Core Web Vitals may seem overwhelming to the website owners, but on achieving the perfect score, it gives better user experience and can improve the conversion multi-fold. 

According to Google, the average page load time for mobile devices and desktop is less than 3 seconds. The majority of top traffic-driving websites load within 4 seconds or less.

If your website takes up a lot of time to load, your visitors will automatically choose to opt-out from your webpage and visit your competitor’s site instead. 

Often, this situation leads to “click rage,” which are moments when a user repeatedly clicks on a web page due to frustration arising from a delayed response from the site.

For many marketers, the click rage is an actionable insight to improve their site experience. 

With Google laying out these metrics, it will be easier for webmasters to optimise their site for improved SERP rankings and prioritise user experience above everything else. 

 

New call-to-action

Let's increase your sales.

Claim your $2,000 Audit for FREE by telling us a little about yourself below. No obligations, no catches. Just real, revenue results.