Core Web Vitals: Ways to Improve the New Ranking Factor
Google has confirmed that Core Web Vitals will be part of it’s ranking factor starting May 2021.
This means you have to seriously consider optimizing the page speed experience to avert any ranking drop.
Are you new to the concept of Core Web Vital?
Most site owners are unaware of what Core Web Vitals are and they don’t know how to check their site for Web Vitals compliance.
A study conducted by ScreemingFrog across 20,000 URLs found that only 12% of Mobile and 13% of Desktop results passed the Core Web Vitals assessment.
This means there is a long way to go for website owners to provide a great page speed experience.
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%.
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.
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.
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.
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
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 – The Ranking Factor
We spoke a lot about Core Web Vitals and its implications. But it seems like Google has figured out that tons of sites out there are yet to be Web Vitals-friendly.
Wishing all those sites to comply with the WebVitals standards that too within May 2021 seems to be a far-fetched desire (not only for us SEOs but also for Google.)
However, Google made an announcement that helped many SEOs vent a sigh of relief. A few days back, the search engine giant said that the Core Web Vitals will impact only mobile search results.
That was a pretty big announcement in itself. This is the first time that Google is fore-warning the implications of Core Web Vitals when it becomes a ranking factor in May 2021.
There has been a lot of discussions after Google made this big statement last week, and one of these was about websites that have AMP enabled.
As you know, AMP makes the pages lighting fast, and since the pages are rendered from Google’s cache, they load in split seconds on mobile devices. So, does that mean that such AMP-enabled pages are automatically Web Vitals friendly?
According to the FAQ answer provided by Google on Core WebVitals, it’s almost certain that all AMP pages meet the minimum requirements of passing the WebVitals score.
Over the last few months, we here at Stan Ventures found that optimizing the mobile Page Speed Experience is tricky and requires a lot of backend tweaks.
Since AMP is meant to make sites load quickly, offering the best page speed experience. This means that most of the sites out there have already become Web Vitals-friendly without breaking a sweat.
Google also warns that despite the possibility of most of the AMP-enabled pages being web vitals friendly, heavy images and things outside of AMP’s control could impact the speed.
So if you have an AMP-enabled website, check how it’s performing on Google’s cached version.
Here is how you check it:
Step 1: Open Inspect Element in Chrome and choose any responsive design from the toggle.
Step 2: Do a Google search for the keyword you are ranking to see the AMP version of the page on the search.
Step 3: Click on the result to see the AMP version of the page rendered from Google’s server.
Step 3: Copy the URL and paste it into PageSpeed Insights tool.
Step 4: Click on Analyze to Generate Report
Core Web Vitals Alone Can’t Rank You #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?
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.
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
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
Step 2: Select Developer Option
Step 3: Click on LightHouse Tab on the far right
Step 4: Toggle between Mobile and Desktop
Step 5: Click on Generate Reports and Check the Performance
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
Step 2: Input your URL and Analyze
Step 3: Toggle between Mobile and Desktop
Step 4: Look for Field or Stimulated Data (Lab Data)
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.
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.
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
- 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.
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.
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.
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.
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.
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
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.
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.
Reduce Render Blocking
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.
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.
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.
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.