Core Web Vitals: Google’s New Page Experience Ranking Factor

Written by Dileep Thekkethil

Updated on Oct 5, 2020
Category: Technical SEO

Think about this; you are enjoying the 2021 New Year’s eve party. 

You rejoice while telling your friends about the success story ranking #1 on Google for top business keywords. 

But behind the scenes, Google is making some hard tweaks to their algorithm. 

You are completely unaware that tomorrow all those keyword positions are going to tumble down! 

This is not an exaggerated apocalypse type of prediction that I’m making here. 

With Google announcing the Core Web Vitals as an integral ranking factor starting 2021 (let’s hope they don’t roll it out during the beginning of the year), you have to seriously consider averting such an experience that sends chills down your spine. 

More importantly, 90% of site owners are unaware of what Core Web Vitals are and how to check their site for compliance. Google Core Web Vitals

Have you done the testing?

If not, you should get professional SEO help now to analyze it or do it yourself by following the steps that I’m going to explain below. 

Before that, let me give you a brief understanding of Core Web Vitals and how it got all this attention in such a short period. 

Page Speed has been a part of SEO discussion for a long time, and webmasters tried their best to make sure that they are getting an overall score above 80% or 90%. 

If you have used tools such as Pingdom or GTMetrix, adding a cache plugin or minimizing the CSS or JavaScript might give you a good speed score, which of course, makes you feel good. 

But these are bots and not real humans who are doing the analysis. 

Speed is now a secondary factor, and the user experience signal has taken the central stage. 

This is where Core Web Vitals come into the picture. 

What’s Web Vitals?

According to Google, Web Vitals is a user experience signal that analyzes a web page’s quality.

It is a unified guide that webmasters can keep as a benchmark. It is largely believed that Web Vitals-friendly sites give users a superior page experience. 

Metrics Within Web Vitals 

There are 9 metrics within the Web Vitals that can be found in the Chrome user experience report. Webmasters can optimize the user experience of their website using these 9 key user experience metrics. 

These metrics are used to interpret the page experience of websites either using field data analysis or through real-time simulations.

First Paint: The first paint refers to the key moments after the browser starts rendering the page. This involves the rendering of non-default background paints. 

First Contentful Paint: This is the critical juncture in webpage rendering wherein the browser displays any text or images (not essentially with the exact CSS styles.) This is the first time users see a visual element on their browser window. 

DOMContentLoad: DOMContentLoaded is the time frame wherein the initial HTML is rendered completely. 

Onload: This is the moment when all the dependent resources, including stylesheet and images, are loaded. 

First Input Delay: FID measures the experience a user has when trying to interact with a partially loaded page. 

Largest Contentful Paint: At this point, users see the main critical content within the page. 

Cumulative Layout Shift: Users may experience a shift in layout after a page loads the CSS. If this shift happens when the user is on the verge of taking a decisive move, it results in a bad user experience signal. Making the Cumulative Layout Shift as low as possible gives the page visual stability and ensures a better user experience. 

Title to First Byte: Time to First Byte is a user experience metric that aids in knowing the responsiveness of the web server and other network resources.

Notification Permission: The Notifications API allows web pages to control the display of system notifications to the end-user.

Out of these 9 web vitals metrics, three are critical to user experience signals, and they combine to form the Core Web Vitals. 

What is Core Web Vitals?

A great content supplemented with quality links should be able to help your rank on top, right? Sorry, starting 2021, this whole ranking dynamic is going to go for a toss. Here is why.

Google is going to measure the Core Web Vitals score of your web pages along with the other ranking factors before pushing your up to the top tier. That essentially means you have another factor joining the list of Google’s 200+ ranking signals. The good thing is that you know it’s coming and you can optimize your website before anybody else.

By now, you may already be thinking about what’s this new ranking factor and how your website can achieve the perfect web vitals score. But before that, let me clarify: Core Web Vitals is a set of page experience metrics that analyze the page load speed, interactivity, and, most importantly, the visual stability.

Google will analyze each of these separately to know the overall user experience provided by a page.

Which are the 3 Core Web Vitals Metrics?

1. Largest Contentful Paint (LCP): Largest Contentful Paint: LCP refers to the largest piece of content that is on a page. This is usually an image or video that takes the maximum time to render as page loads. According to Google, it’s ideal to keep the Largest Contentful Paint below 2.5 seconds. Anything above 4 seconds is considered poor, and it can impact the rankings starting 2021.

LCP Core Web Vitals

2. First Input Delay (FID):

While the Largest Contentful Paint is related to the page load speed, the First Input Delay (FID) is more focused on interactivity. The data is related to the responsiveness of the page when the user first tries to interact with it for example clicking the read more link. The idea FID is less than 100ms.

FID Web Core vitals

3. Cumulative Layout Shift (CLS): CLS is the most critical aspect of Core Web Vitals, and it is related to the stability of a web page. Google considers the visual stability of a page as an important usability factor. A shift in the position of design elements can end up confusing the users and sometimes, even resulting in unintended actions. This causes great annoyance to the users, and Google now wants such pages to be pulled down in the search results. Any unexpected layout shift that occurs during the loading of a page, mostly due to position changes in the viewport, results in low CLS. The ideal measurement of CLS is less than 0.1. 

CLS Core Web Vitals

I recommend you want the official Google Video that explains the Core Veb vitals for a better understanding of it.

Importance of Core Web Vitals

Google announced in June 2020 that Core Web Vitals would become part of its ranking algorithm starting 2021. 

This move from Google aims at making website owners aware of the importance of page experience signals. 

By announcing Core Web Vitals compliance as a ranking signal, the search engine giant makes the tough statement that they are concerned about the satisfaction of the users who visit the pages within its search results. 

This means, starting 2021, despite having high-quality content and countless backlinks, a site may not rank on the first page if the page experience it provides is subpar. 

The object-based approach of analyzing the page speed is efficient than all of the currently used metrics (like the score provided by third-party tools) 

Here, Google assigns a specific score for each object element – LCP, FID, CLS. 

With a combined score, where each element is assessed separately, Google decides whether the page experience is good or bad. 

Core Web Vitals is Not a Flour Ingredient Recipe to Rank #1

Let me make this clear for you. 

An improved Web Vitals score is not the secret recipe to rank on Google!

Content and links will remain as the core elements that decide the primary ranking of a page on search results. Consider Web Vitals as a secondary ranking factor.

Like I always say, Google has over 200+ ranking signals, and not all have the same weightage as the other. 

Just don’t orphan content and links from your strategy as there are many takers for them (your competitors) who are waiting to grab the opportunity. 

So, where do you think Google is going to place the Core Web Vitals signal? 

Remember the announcement Google made back in 2014 and 2016 about HTTPS and intrusive interstitials elements

The Core Web Vitals will find a sweet spot within the same section in Google’s algorithm where intrusive interstitials, mobile-friendly, safe browsing, and HTTPS have been placed. 

These are all factors that are directly related to the page experience of the users. However, Web Vitals may get the upper hand or a bigger share of signals when compared to the rest. 

core web vitals calculation

The catch here is that Google says the Core Web Vitals is subject to changes as the internet ecosystem evolves. 

This is one important clause within the announcement made in June that not many took cognizance of. 

Google has stated that Core Web Vitals metrics will see new additions over the coming years as it plans to evaluate and add new user experience objects annually. 

Know Your Core Web Vitals Score Using Chrome Extension

Before I give you tips to improve the Core Web Vitals score, you need to assess your current website performance. 

Thanks again to Google, they have provided a free Chrome Extension to check the page experience signals by analyzing all three objects within the Core Web Vitals. 

Just download it from core WebVitals extension

You can see the overall report for Core Web Vitals with details of the individual score received by all three user experience factors.

This is a foolproof and the most recommended extension to check Core Web Vitals as it uses the web-vitals library that Google will use starting 2021 for ranking and indexing purposes. 

How to Analyze Mobile and Desktop Core Web Vitals Scores

Now that you have installed the Web Vitals Chrome extension, you want to check the score.

But before you do that, here is something you must know. The Core Web Vitals score for mobile and desktop varies.

Don’t worry, the same extension can be used to check for both devices or if you are not comfortable installing a Google extension for privacy concerns, which we all understand. Just use the Google LightHouse tool or PageSpeed Insight tool.

Both the Google tools allow you to analyze the Web Vitals Score of your website.

Checking Core Web Vitals Using Google LightHouse

Step 1: Just open the site in your browser

core web vitals site analysis

Step 2: Select Developer Option

web vitals extension

Step 3: Click on LightHouse Tab on the far right

lighthouse webvitals

Step 4: Toggle between Mobile and Desktop

toggle web vitals to see score

Step 5: Click on Generate Reports and Check the Performance

web vitals report

Checking Core Web Vitals Using PageSpeed Insight

NB: The data shown via page speed insight are usually based on Field Data of real chrome users collected over 28 days. If the page is new and if Google is unable to get enough samples for generating aggregated field data, a simulated load of the page is rendered, and the score is displayed.

Step 1: Go to Page Speed Insights Tool

Page Speed Insights for Web Vitals

Step 2: Input your URL and Analyzepage speed insights core web vitals analysis

Step 3: Toggle between Mobile and Desktop

Toggle Mobile and Desktop Web Vitals Score

Step 4: Look for Field or Stimulated Data (Lab Data)

Field DataField Data of core web vitals

How to Check Core Web Vitals Issues Using Google Search Console

In addition to these Google tools, Search Console also offers a great deal of information about the page performance.

Recently, they added the Core Web Vitals as an enhancement feature on the search console, which now indicates whether all the pages within the site are Web Vitals compliant.

Checking Core Web Vitals Issues Using Google Search Console

Step 1: Log into Google Search Console Dashboard

Step 2: Click on Core Web Vitals in Enhancements Tab

Step 3: Check the Score for Mobile and Desktop Devices

Step 4: Open Reports to See Issues

Difference Between Core Web Vitals Lab Data and Field data

As you start doing the above-mentioned process to check the core web vitals score, you may encounter discrepancies in the data.

I’m not talking about the different scores you get as you check multiple pages. But I’m specifically talking about the data you see for the same page using multiple tools mentioned above.

The lab data you see is more of stimulation that is done by Google Chrome Browser API. This data is collected based on the event timers triggered and also by calculating the approximation of user interactivity.

When a real user visits the page, depending on factors including the connection speed and the device used, this score is subjected to changes.

On the other hand, field data is collected based on the Chrome User Experience data that is collected over 28 days from a variety of samples. This data is more accurate or closer to the real-time user experience.

Lab Data of core web vitals

If you are not getting the field data, rely on the lab data for page experience optimization. In the later stage, check the search console for real user experience data for individual pages and make the tweaks.

Don’t think that these are highly technical SEO stuff. If Google has added Core Web Vitals to the search console, SEOs must learn inside out about its implications, and the same is applicable for developers.

How to Improve Core Web Vitals Score?

Thinking that optimizing the website for Core Web Vitals is the task of the developer? This also means that SEOs cannot take the credit of ranking higher because all the hard work is done by the developer. 

SEOs have to be equipped with technical knowledge in order to keep pace with the changing trends.

If you’re not familiar with coding, you should try to understand how the fixes will improve the site speed and user experience. This is very critical if you want to give the right instructions to the developers. 

Installing a cache plugin, minimizing the CSS and JavaScript can all help in speeding up the site and these are some of the fixes that even a newbie SEO can do. But will all this improve the Web Vitals? 

The answer to this question is both Yes and No. The reason being that some of the fixings can help in making a little improvement, but when it comes to the goal of improving the web vitals, they have little impact. 

This is quite evident in the research done here at Stan Ventures. We analyzed the Web Vitals score of some of the in-house websites after making minor changes. 

  • Installed a Cache Plugin
  • Minimized the CSS
  • Minimized JavaScript
  • Used Defer Attribute
  • Enabled GZip
  • Enabled LazyLoad

The result was nothing impressive worth sharing. The GTMetrics and Pingdom tool said we were doing great, but the Google Web Vitals Extension said the page experience signals sucked. 

The bottom line of our research was that moving the elements from top to bottom and removing the render-blocking javascript will all help you only if you have the strong technical backing. 

Here is why: 

1. Server response time can be improved by installing a cache plugin, but it only works when the users revisit your site. This is very useful when your users browse through multiple pages. But let’s say that you haven’t set the right expiry for the resources, the whole purpose of adding the cache plugin may be futile. 

2. Making drastic changes to the load sequence of JavaScript and CSS can result in bad page experience. Those you may get a 90+ rating on third party tools, users may experience volatile changes as the page unfolds in the browser. 

3. There is no one panacea for all the fixes for page speed. If you are running a WordPress site, or any other CMS, you need to install multiple plugins for optimization. This can further deteriorate the speed of the site. 

Optimizing Images for Page Speed

One of the prime reasons for bad page experience is the heavy payload of images that are rendered by browsers as page loads. 

Better image optimization will speed up the site and help you to achieve the perfect Web Vitals score. Here are a few quirky ways to optimize images:

Use Image CDN: If you have an image-heavy design, your server is already stressed out when delivering the resources to the user’s browser. It also provides other resources within the payload simultaneously to the browser, making the user wait long for the whole page to load.CDN for Web Vitals

Using the image CDN servers, you take the pressure off from your server as the images are served using CDN servers in the closest proximity to the user’s location. Currently, AWS and CloudFlare are the best Image CDN providers in the market. 

WebP Format: Ever tried using the WebP format for your images? This is a Google-approved image format that reduces the image size by at least 36% compared to JPEG.webp format for images

Most of the modern-day CDNs deliver images in WebP format as it supports transparency, and typically provide 3× smaller file sizes compared to PNG.

LazyLoad: LazyLoad has been there for a long time, and this is a tried and tested strategy to reduce the load speed.

We found that lazy loading images will improve the web vitals score as the server is not loaded with image requests all of a sudden.LazyLoad for images

With LazyLoad enabled, only the initial set of images are rendered while users land on the page, giving them a seamless user experience. 

The other images load only when the users reach the particular viewpoint. 

Optimizing Java and CSS

GZIP Compressiongzip for speed

When you enable GZIP compression, it can reduce the size of the transferred resource significantly, and hence reduces the time to download the resources as well. GZIP compression has become a standard practice for the majority of websites. 

Minifying Resources

minify scripts

Minification is the process of removing redundant data from your JS and CSS files. It is done to reduce load time on websites and bandwidth usage. 

To minify JS, CSS and HTML files, comments and extra spaces need to be removed. This can be done with the help of most optimization plugins. 

Combine Javascript and CSS

Combine Java CSS scripts

When you combine Javascript and CSS files, it reduces the number of requests and speeds up the process of rendering. For example, if your page loads 5 external Javascript and CSS files each, combining them will result in 8 lesser requests. 

Moreover, CSS files are all rendered blocking, which means the more CSS files are loaded, the more likely it is to interrupt a page’s critical path. Multiple Javascript files can also limit the parsing of your HTML document when deferred improperly.

Reduce Render Blocking

reduce render blocking resources

Slow PageSpeed is often the result of excessive use of Javascript and CSS. Before eliminating render-blocking scripts, you need to identify which scripts are causing the problem. You can use the PageSpeed Insights tool to analyze which scripts are slowing down your site.

You can force JS files to wait to load until other elements of the page are ready. One of the most sought after ways to defer JS is through asynchronous loading.

Deliver Javascript and CSS using CDN

Unless you use CDN, you are using your server bandwidth for loading Javascript and CSS files. It is possible to reduce the load on your server without the CDN, but only to a certain extent.

We’ve analyzed that websites that have enabled the below features successfully reduced the server load and allowed faster rendering.

 Optimizing the Font

Custom fonts may make your site look really attractive, but such font rendering behavior can increase the load on servers and slow down your site. 

To fix this issue, ensure that your CDN can override font rendering behavior.

By doing so, your CDN can swap the rendered text and display the original text as it loads on the CSS. Since both resources are delivered simultaneously from the same server, the actions occur in a few microseconds. 

Embed Codes

Embedded images and videos can slow down the speed of a website. Many businesses cannot choose to ignore these features on their site. For them, Google recommends lazy loading, which means that these media files will load only when promoted by the users. 

Implementing this technique has shown a 70% performance improvement in LightHouse.

AMP Pages

AMP cache can offer a faster experience across mobile devices, but it comes with significant UI changes and may affect desktops’ conversions. Therefore, you need to ensure that your server loads fast and is responsive for optimum performance.

Additionally, Google has confirmed that only web vitals compliant publishers will be featured on the Top Stories section of SERPs. 

Currently, Google mandatest AMP-friendliness for showing up on Top Stories but starting 2021, AMP will not be mandatory, but Core Web Vitals score will replace it. 

Conclusion

The Core Web Vitals might seem like a complicated concept but achieving a perfect Core Web Vitals score isn’t a mammoth task. It will enhance the user experience by several folds and aids in conversions.

If your web page takes forever to load, people will choose to leave your site and visit your competitors, or they’ll keep clicking on your webpage in frustration. This action is known as “click rage,” which is an actionable insight for many webmasters to improve their site loading speed. 

Google has benchmarked the average page load speed of webpages on mobiles and desktops to 3 seconds. The majority of high ranking websites fall under this speed threshold. With the Core Web Vitals, Google will now ensure that websites prioritize user experience above everything else. Failing to do so will lead to consequences like losing web traffic and SERP rankings.

About Dileep Thekkethil

Dileep Thekkethil, a Journalism Postgraduate, was formerly with a US-based online magazine, is the SEO Expert at Stan Ventures. A He is a frequent blogger who keeps a tab on the latest updates in SEO and technology arena. Reach me @ Mail | LinkedIn | Twitter | Facebook or View all posts by Dileep

You May Also Like…

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *