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 PageSpeed Insights field data analysis or through real-time simulations.
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.
DOMContentLoaded is the time frame wherein the initial HTML is rendered completely.
This is the moment when all the dependent resources, including stylesheets 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 webserver and other network resources.
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 web 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 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?
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 web rankings starting 2021.
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.
Cumulative Layout Shift (CLS)
Google’s CLS score is the most critical aspect of Coreweb score, 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 page speed experience 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.
A New Ranking Factor
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 an upcoming ranking factor. Google’s Official Announcement says Core Web Vitals will become 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?
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 Page Experience Metric 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 the new Page Experience metrics will see new additions over the coming years as it plans to evaluate and add new user experience objects annually.
Know Your Core Vitals Score Using Chrome Extension
Before I give you tips to improve the Page Experience 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 Github and unpack the extension in your Chrome browser.
You can see the overall report with details of the individual score received by all three user experience factors.
This is a foolproof and the most recommended extension 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 Chrome extension, you want to check the score.
But before you do that, here is something you must know. The score will different for mobile and desktop.
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 score of your website.
Checking Web Vitals Score 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: PageSpeed Insights Field Data is 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 PageSpeed Insights Tool
Step 2: Input your URL and Analyze
Step 3: Toggle between Mobile and Desktop
Step 4: Look for pa 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 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 Page Speed Experience Issues Using Google Search Console
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 Lab Data and Field data
As you start doing the above-mentioned process, you may encounter discrepancies in the data.
I’m not talking about the different speed 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 Page Experience Score?
Don’t think that optimizing websites for better page speed experience is the task of 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
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 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 this new ranking factor, 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.