Core Web Vitals

chrome ux report

Google scores the user experience of your webpage based on its core web vitals.

What are Core Web Vitals?

Core Web Vitals are a number of factors that Google places importance on when creating user experience for a webpage. Core Web Vitals are made up of three major measurements: largest contentful paint, first input delay and cumulative layout shift. These factors are assessed and scored by Google to determine how strong the webpage experience is for web visitors (overall UX). The other web vitals that Google scores user experience on are mobile-friendliness, safe browsing, HTTPS and non Intrusive Interstitials. If you want to check data on your website’s Core Web Vitals, you can take a look at the “enhancements” section of your Google Search Console.

What makes Core Web Vitals Important?

Core Web Vitals are important as Google will soon make page experience a key component in Google rankings (in 2021). With this decision, Google aims to allow site owners to create more pages that make it easy for visitors to enjoy. If a page is providing a high quality experience for users, the it is bound to bolster its ranking on Google’s Search results.Page experience is a variety of factors that Google places importance on including HTTPS, Mobile-friendliness, limited interstitial pop ups and safety of the website(no malware on your page), on top of the main Core Web Vitals.
In an analysis conducted by Screaming Frog, where they analyzed 2500 keywords and 20 000 URLs, they wanted to determine how websites fared when it came to their Core Web Vitals. While many websites met the 100ms speed of the First Input Delay(FID), more than half of the websites struggled with the other web vitals. For the factors of Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS), many websites took over 2.5 seconds to load while also encountering unexpected shifts in their layout. This would significantly hinder their user experience and Google rankings.
While Core Web Vitals are important only having a strong page experience score will not place you at the top of Google’s search rankings at once.  Page experience only accounts for one factor out of the 200 factors that goes into the calculation of Google Search rankings. Having strong content on your website is still very important for your website’s search ranking. However, if you feel that you need to improve on the Core Web Vitals of your website, then you should focus on the three key measurement factors:

Largest Contentful Paint (LCP)

  • LCP is a measure of how much time it takes for a page to load from a user’s point of view. LCP keys in on page speed, mainly how well web visitors are able to see and interact with your webpage. Ideally, every page on your website should load within 2.5 seconds, regardless of how big or how many features that it has.

To improve your LCP, you can:

  • Remove any unnecessary third-party scripts 
    • If your webpage uses any unnecessary third-party scripts, you should remove it for faster loading times
  • Upgrade your web host 
    • If your web host is poor, then your website will inevitably have slow loading times. By improving your hosting, you can better your load times and overall LCP)
  • Set up lazy loading 
    • Lazy loading is a method that only loads images on your webpage when someone scrolls down your page. This significantly improves your webpage loading time and your LCP.
  • Remove large page elements  
    • If you are using any overly large page elements, you can shorten the element code or remove the element entirely to boost your website’s page speed.
  • Minify your CSS 
    • By minifying your CSS, you can shorten your CSS scripts, improving your LCP in the process.
keyboard and a monitor
By speeding up the loading time of how quickly your webpage loads, you can improve your LCP score.

Cumulative Layout Shift (CLS)

  • Your CLS is a measure of how stable your page is when it loads. An indication of an unstable page is when the elements of your page move around while your page is loading. This is a clear indicator that you have a high CLS, which indicates that your page lacks stability as it loads. If your webpage has a measurement of less than 0.1, then your CLS is strong.
  • Ideally, if your page can lower its CLS score, then your webpage will improve its stability. By having a stable webpage, your web visitors will not have to worry about the unknown location of links, images and fields as your page fully loads.

To minimize your webpage’s CLS, you can:

  • Using set size attribute dimensions for the media on your website: 
    • By using set size attribute dimensions for the media of your website, the browser of web visitors will know exactly how much space the element will take up. This will improve the stability of your webpage.
  • Reserving a space for the ad elements of your website: 
    • By reserving ad elements on your webpage, it prevents your website’s content from moving elements of your website.
  • Adding new elements below the fold: 
    • By adding new UI elements below the fold, the users of your webpage will have a clear idea of where the content and the elements of your site are.
drawings of different metrics
By stabilizing your website through the optimization of your webpage’s elements, you can benefit your CLS score.

First Input Delay (FID)

  • FID is a determinant of how well users can interact with your webpage. FID measures how long it takes a user to complete their first interaction with your webpage. For example, when you choose an option from a menu or enter your email into a field, Google takes this to determine how real-time users interact with your website. Ideally, if your webpage can become interactive in under 100 ms, then the score of your website’s FID is strong.
  • FID is technically a page speed score, but it also measures how long it takes users to execute an action on your page. If your web page strictly consists of content, then FID may not even be ranked for that page. However, if your website has a login or sign up page, where users are required to click on your webpage, FID plays a huge role. For a login page, regardless of how fast the content loads, the main component is how fast users can enter in their login details.

If you need to boost your site’s FID scores, you can:

  • Minimize (or defer) JavaScript
    • When your browser is loading up JavaScript, it makes it tough for users to interact with your webpage. This indicates that if you can avoid or defer any JS on your login page, you can improve your FID score.
  • Remove any non-critical third-party scripts
    • If you are using any unimportant third party scripts on your login page, you should consider removing them. By doing so, you can improve the loading speed and FID score of your webpage.
  • Use a browser cache
    • By using a browser cache, you can speed up the time that it takes for your webpage to load. This makes it even easier for users to interact with your website.
man analyzing core web vitals
By increasing the speed and interactivity of your website, you can boost its FID score.

How can Web Vitals actually increase the speed of your website?

Once you have evaluated the Core Web Vitals of your website, your job is not finished. While Core Web Vitals can act as an indicator of what is affecting the performance of your website at a broader level, you should pay close attention to specific metrics to help you understand why your user experience may be slow. For example, if you recognize that your LCP score is not up to par, you should try to identify specific metrics as to why your webpage is taking a long time to load such as your DNS lookup time. To identify specific metrics of your website, you can utilize Google tools such as Search Console, Pagespeed Insights, Chrome DevTools, Chrome UX report and more.

How can you measure other user experience signals?

To measure your other user experience signals, you can utilize a variety of methods:
  • Mobile-friendliness: you can use Google’s mobile-friendly test to determine how well your website adapts to mobile devices.
  • Safe-browsing: Using Search Console, you can identify any security issues that your website may have regarding safe-browsing.
  • HTTPS: if your webpage is properly secured, it will display a “lock” icon in the address bar of your browser.
  • Intrusive interstitial ads: these ad types can block out most of a webpage, resulting in a hindered user experience.
With Google attempting to add Core Web Vitals as ranking factors in the future, the goal is to encourage site owners to build and optimize their web pages so that the user experience of web visitors will be enhanced. However, this does not mean that you should entirely focus on building and optimizing your Core Web Vitals, as creating content is still very important. If you can fulfil the Core Web Vital standards while creating informative content, then your webpage is more likely to rank high on the SERP.
Ready to start your new project but have a few questions? We are here to discuss.