Close

Core Web Vitals – A Comprehensive Guide to Create A Better User-Experience

On 28th May 2021, Google announced a new metric called the Core Web Vitals. Beginning from June 2021, these Core Web Vitals will be a key part of Google ranking signals. Basically, it will help Google measure and evaluate the speed, responsiveness and stability of websites which will be important for a website to rank higher than their peers. You need to get it right though, as it is something that you might not have considered before and it may seem overwhelming at first. But, don’t you worry, as we have covered all the key elements around Core Web Vitals in this blog post to help you measure, understand and enhance your Core Web Vitals to offer an improved user experience. So, let’s begin.

What are Core Web Vitals?

Core Web Vitals are a combination of user-based metrics linked to speed, responsiveness and the visual appeal of the website and allow the website owners to measure user experience accordingly. To enhance the user experience of a website, website owners should look to focus on a set of parameters – Core Web Vitals. 

Google is not always open about the details of its algorithm updates, which can be overwhelming and at the same time thrilling for experienced marketers. In that instant, we have been offered with the precise metrics that we should measure to enhance the website performance and take it to the next level. In a way, the Page Experience update will greatly change the way we work on websites. But, it is still not difficult as long as the website audit is precise and to the point. 

Importance of Core Web Vitals

As mentioned above, Google has already announced that Core Web Vitals will be a major ranking factor from mid-June 2021 as it is planning to make page experience an official Google ranking factor. Web users have loved faster websites and this love is growing by leaps and bounds irrespective of the device or location it is accessed from. Hence, if you are offering a great user experience, then you will definitely make more money. 

By passing the Core Web Vitals assessment will result in fewer users going back to the SERP as you have been offering a better user experience. Google has also suggested that they may start providing a “Good Page Experience” badge in their search results. These can also be termed as “indirect ranking factors” as it can greatly influence user behaviour, which can then be fed into Google’s algorithms. 

Google hails Core Web Vitals as the latest real-world page experience variable but it is all about the speed. While conventional methods of speed measurement are more linear, the Core Web Vitals metrics divide speed into three further categories:

1. Largest Contentful Paint

As per Largest Contentful Paint (LCP), the most important element of web page loading time is from the point of view of a real user. To make it simple, it is the time from when a link is clicked to the time when content appears on the users’ screen. By using the Largest Contentful Paint (LCP), you can understand how long it will take for your website to display its largest image/video or text. 

The page speed is of essence here as a web page which takes longer to load leads to sub-standard user experience. As per a report from Google, good user experience means that LCP should happen within 2.5 seconds of clicking a link. It is best to reduce your page load time by removing third-party scripts which will help you to greatly improve your LCP. Another alternative is to use “lazy loading” to reduce your page load time and make images load only when the user scrolls down on the website. 

2. First Input Delay

first input delay

Source

First Input Delay (FID) is a Core Web Vital metric that measures the time in milliseconds from when a visitor first interacts with your website to when the browser can take action and respond back. You would want your page to be as usable as possible and in a quick time too. 

A commendable first input delay can significantly impact the website visitor’s first impression of your website. The visitor is not likely to engage with the website again if the first impression with the site is not satisfactory. FID will basically be dependent on the LCP, so essentially, if the website loads faster, then the visitor will be able to take a quicker action on your website. As a general rule of thumb, you can aim to achieve a FID of 100 milliseconds or less. 

3. Cumulative Layout Shift

The Cumulative Layout Shift is simply a parameter that provides a measurement of the visual stability of your website. For CLS, you can get two types of data: field data and lab data. It is said that a lower CLS score means a healthy visual stability. So basically, if elements on your web page move around as the page loads then you will have a high CLS, which will affect your SERP negatively. 

It is noteworthy that CLS is not measured in seconds or milliseconds. But, it takes a detailed account of the viewport size, measure unstable elements between two frames. To offer a better user experience, a CLS score of less than 0.1 is ideal and a score of 2.5 or higher is a poor result. Moreover, you can work to minimize CLS by taking these further steps. 

  • Use a fixed-size attribute dimensions for media like images, video or infographics etc. By doing so, you can provide a clear indication to the browser about how much space will be required by the element.
  • Block some space for advertisements or it may randomly pop up on the screen and push your content to the bottom or top.
  • Display UI elements below the fold so you can avoid pushing the content down.

Along with these three metrics, there are multiple other Core Vitals like Time to First Byte (TTFB), Time to Interactive (TTI), Total Blocking Time (TBT) and First Contentful Paint (FCP). 

core web vitals

Source

What are non-essential Core Web Vitals?

1. Total Blocking Time (TBT)

Total Blocking Time also known as TBT is a non-core Web Vital that assesses the total time taken in milliseconds between FCP and TTI where the primary thread is blocked to make it unresponsive to user input. TBT directly links with First Input Delay and hence, it is the best option when testing under lab environments where real user interaction is not feasible. So, TBT is not a reliable metric to be tested in the field and hence it is used only in lab data.

In essence, if a task takes more than 50 milliseconds to complete then it is considered a long task and any time taken above 50 milliseconds is the blocking time. TBT is then calculated by adding the total number of blocking parts of all long tasks. After calculating it for all the webpages, if the total TBT score is less than 300 milliseconds then it is a good score, between 300 to 600 milliseconds needs enhancement and more than 600 milliseconds is a poor score altogether. 

2. First Contentful Paint (FCP)

First Contentful Paint is a non-core Web Vital that is used to calculate the time taken from when a web page starts loading to when any section of that page’s content is displayed on the screen. A faster FCP ensures the users that an activity is happening. Now, FCP is available in both field and lab data and it helps to have a lower FCP too. For instance, your FCP score is good if it is less than 1 second, needs enhancement if it is between 1 and 3 seconds and is considered poor if it is more than 3 seconds. 

3. Speed Index (SI)

Speed Index is a non-Core Web Vital that calculates how promptly the contents of a page are visibly filled up during the initial page load. It is measured using a  frame-by-frame analysis of your page’s load behavior and checking the visual progression every 100 milliseconds. SI is possibly present in both field and lab data. If you are looking to understand your SI score: it is good if it is less than 4.3 seconds, needs improvement if it is between 4.3 and 5.8 seconds and poor if it is more than 5.8 seconds. 

4. Time To Interactive (TTI)

Time to Interactive is a metric used to calculate the time from when the page starts loading to when it is completely interactive for the end user. To consider it fully functional, it needs to display meaningful content, have most visible page elements displayed and respond to user interactions in less than 50 milliseconds. TTI can be possibly measured in the field but it is still not advised as user interaction can impact your web page’s TTI. If you are looking to understand your TTI score: it is good if it is less than 3.8 seconds, needs improvement if it is between 3.8 and 7.3 seconds and poor if it is more than 7.3 seconds. 

Tools To Measure Core Web Vitals

It is good for marketers that Google is clear about the Core Web Vitals. Apart from offering resources and documentation, Google also provides tools to help you with website optimization. 

1. Google Search Console

Web Vitals can be easily measured using the Google Search Console, an easy to use and precise tool. But, to utilise this field data from Google Search Console, you will require a verified property in your GSC account. Google Search Console now provides a new Web Vitals report that enables website owners to assess web pages across their websites. When evaluating this report, you should be aware that the URLs without improper reporting data will be excluded from the report.

2. Page Speed Insights

You can make good use of the PageSpeed Insights to understand your web vital metrics. Recently, a lot of changes have been witnessed in the PageSpeed Insights which allows simplified measurement of Core Web Vitals in the lab as well as field data. Lab data is a replication of a visitor’s experience whereas field data is the actual users’ experience. 

3. Lighthouse

Lighthouse is a free, automated tool to enhance the quality of your website. You can use it to audit any website’s performance whether it is public or private data. This will help to understand the performance, accessibility, SEO and progressive web apps etc. One of the best things about Lighthouse is that it measures the Core Web Vitals and uses it while getting the overall website performance score.

4. Chrome DevTools

Chrome DevTools comes with an option that allows webmasters to find and fix visual inconsistencies that may affect the Cumulative Layout Shift (CLS). It is possible to check for unexpected layout shifts using the Chrome DevTools Performance panel. It is a set of advanced tools that enables a website owner to analyse the website in the lab environment without affecting it’s field performance. 

Tips to Create Better User-Experience using Core Web Vitals

Core Web Vitals can be significantly enhanced using a variety of factors like its hosting, the way it is developed and making minor improvements along the way like resizing images and content. Some of the most common ways to improve Core Web Vitals is:

  • Minimize CSS, JS and HTML
  • Allow compression by default
  • Reduce the number of redirects
  • Get rid of render-blocking JavaScript
  • Cache assets at the edge with a CDN or Netlify Edge
  • Avoid using massive payloads

You can improve the user experience by getting a high Core Web Vital score for which you can make use of Jamstack or Netlify. In most cases, it is already enabled by default which allows you to provide super fast site delivery. 

Final Word

In order to aim for minimum thresholds, website owners and marketers will have a competitive advantage with search visibility. It is better to start preparing your website to adapt to this change so that you can reap the benefits when Google officially launches the new metric. It is fair to say that it is extremely difficult to gauge how Page Experience Update will look on the launch day, but we feel that this post will serve as an essential guide to offer you a precise starting point. If you have any questions, please feel free to let us know in the comments below.

2022 Digital Marketing Trends to Revolutionize Marketing Industry

The use of social media has grown exponentially in recent years, as per Pew Research. Brands are catering to a Read more

Google’s Website Page Titles Update : Why Traffic is Fluctuating?

Google revealed that they have changed how titles are created for search result listings. It was only last week that Read more

7 Ways to Boost Your Website Traffic in 2019

Managing or owning a website involves a lot of time and effort because you are constantly producing good content for Read more

Dhruvil is a marketer for Nimblechapps, an app development solutions company joining December 2014, based out of Sydney, Australia. He has worked briefly as a Branding and Digital Marketing Manager before moving to Australia. At Nimblechapps, he worked on Social Media Marketing, Branding, Email Marketing and Blogging. Dhruvil studies Business at University of Western Sydney, and also handles Operations for the company in Australia.