Core Web Vital Featured Image - Digital Thrive

Google Core Web Vitals were released back in Q2 2020, announcing that Google was going to start reviewing websites (focused on mobile user experience first) with new metrics that was going to be wrapped up in what Google called Page Experience, and be fully rolled out in May 2021.

Google announced that Core Web Vitals will be incorporated into Google’s ranking algorithm and that they would add measuring capabilities to many of its existing tools.

So what are Core Web Vitals?

 

Currently, Google Page Experience Signals are based on whether a site:

  • Is mobile-friendly
  • Offers safe browsing
  • Offers HTTPS
  • Is free of intrusive interstitials

Now beside these four factors, they’re adding a fifth – Core Web Vitals. They are a set of the three individual metrics that are wrapped up in the overall Page Experience that Google will use as a ranking factor. Google has stated that page experience ranking signals, based on Core Web Vitals, will be applied globally on all browsers on mobile devices – although I do have a feeling it will be rolled out to scoring/marking Desktop too. The three metrics are called:


Google Core Web Vitals - Digital Thrive

Google will measure and evaluate the page experience for a user using Core Web Vitals. In order to pass the Core Web Vitals assessment, you need to score “good” for all three.

Largest Contentful Paint (LCP)

This metric tracks loading speed, or more specifically how long it takes before the largest content element of the visible part of the page appears to a user. This should occur within 2.5 seconds of landing on a page.

What Causes Poor LCP?

Core Web Vitals LCP - Digital Thrive

How to Improve LCP

  • Optimize your server
  • Adopt a local image CDN to serve global users faster
  • Cache assets & serve HTML pages cache-first
  • Minify CSS and JavaScript
  • Follow these indepth tips for improvements https://web.dev/optimize-lcp/

First Input Delay (FID)

This metric measures the speed at which users are able to interact with a page after landing on it, this should occur within 100 milliseconds. This helps you measure your webpage’s overall responsiveness. 

What Causes Poor FID?

Core Web Vitals FID - Digital Thrive

How to Improve FID

  • Reduce your JavaScript execution time
  • Implement lazy-loading
  • Minimize unused polyfills
  • Monitor change with TBT
  • Follow these indepth tips for improvements https://web.dev/optimize-fid/

Cumulative Layout Shift (CLS)

This metric tracks the visual stability of a webpage — most commonly hurt by ads, pop ups, and banners that suddenly alter the webpage while someone is on the page. Measures how often users experience unexpected layout shifts. Pages should maintain a CLS of less than 0.1.

What Causes Poor CLS?

Core Web Vitals CLS - Digital Thrive

How to Improve CLS

  • Always include <width> and <height> size attributes on your images and video elements
  • Define the space for each asset on your page (ads, banners, responsive images, videos, etc)
  • Load content downwards
  • Follow these indepth tips for improvements https://web.dev/optimize-cls/

Why are Core Web Vitals Important?

Google Core Web Vitals focuses on the user experience on mobile (well, that’s what Google are saying for now), how long a page loads, when it loads – what happens next, how long will it take before a user can interact with elements on the page and lastly, will any of the images, copy or content shift around – disrupting the user experience of when the page has loaded.

We all know how important it is to make sure our mobile experience is first in class, most of our clients see more than 70% of their traffic come through mobile, so making sure that mobile experience is spot on, really is key – plus, if Google are going to start using the mobile page experience as a ranking factor, then we need to adhere to their “best practice principles”. 

How can I measure my Core Web Vitals

There are lots of ways for SEOs and site owners to to measure the impact of Core Web Vitals across numerous tools and no doubt more of the usual SEO tools that we use on a day to day basis will expand their offering to include Core Web Vitals too, including ways of connecting to APIs to bring in the data and so on, but a top level view of the ones to use are:

  • Google Search Console
  • PageSpeed Insights
  • Lighthouse
  • Chrome DevTools
  • Chrome UX Report
  • Web Vitals Extension

Google Search Console

Core Web Vitals report in Google Search Console has been there for quite a while now, and it helps site owners to evaluate pages across an entire site. The report identifies groups of pages that need attention – although if you have a really big site, then it can be a little difficult to hone in on certain URLs. The data is based on real-world data (as in from real people hitting the site and not lab data) from the Chrome UX report. Something to keep in mind, if some URLs on your site don’t have a lot of traffic to them, they will be omitted from the reporting. 

PageSpeed Insights

PageSpeed Insights now uses Lighthouse 6.0 to measure PageSpeed and then ultimately Core Web Vitals in both the lab and field sections of the report. Simply add your website address and it will analyse the page and give you the Core Web Vitals score. Core Web Vitals are highlighted with a blue ribbon and shown on the output. 

Lighthouse

Lighthouse has been recently upgraded to version 6.0, which also includes some nice additional audits, some new metrics, and a newly composed performance score. Two of the new metrics are Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS). These metrics are lab tests of Core Web Vitals and provide diagnostic information and tips for optimizing user experience. The third new metric — Total Blocking Time (TBT) — is said to correlate well with First Input Delay (FID), which is another Core Web Vitals metric. 

Chrome Dev Tools

Chrome DevTools helps site owners find and fix issues that can affect Cumulative Layout Shift (CLS). You can select a Layout Shift to view its details in the Summary tab to actually see how and where the shift has occurred. Chrome DevTools also measures Total Blocking Time (TBT), which is useful when it ones to improving First Input Delay (FID). 

Chrome UX Report

Some people know Chrome UX Report ad CrUX. Chrome UX report measures field versions (not lab) of all the Core Web Vitals, which means it reports on real-world data. Google has recently updated the report with a new Core Web Vitals landing page.

Web Vital Extension

A new extension, now available to install from the Chrome Web Store, measures the three Core Web Vitals metrics in real-time – which is great to get a quick view of some of the URLs on your, and of course, your competitors sites. You can download and install the extension here.

When are Core Web Vitals being rolled out?

Well, for me, this is where Google kind of annoys the hell out of us – Core Web Vitals has been around for over a year, there were numerous updates over the last 12 months, but we had been notified that 1st May 2021 was when the roll out would start. We worked with numerous clients, advising them of where their sites needed optimising and helping them to achieve “good” scores via their Google Search Console reporting, and then Google announce that it looks more like June – August 2021. So, as per usual, we are at the hands of Google to find out how the core algorithm update is going to affect the organic ranking landscape, with a view of gradually rolling out the update starting in June with full completion by August 2021.

This slight delay may be welcomed by site owners who may not have heard about the update or are yet to engage with their dev team or SEO agency to understand their “score” for Core Web Vitals – so for now, you have another good 4-6+ weeks to have your site looked at or have an SEO Audit to make sure you can do all you can to optimise your site for mobile and Core Web Vitals.

Get in Touch