Google Introduces Core Web Vitals

Branden Youngs | August 3, 2020

In early May, Google announced they would be tracking user experience by the creation of three new web vitals or as they say, “essential metrics for a healthy site.” In the beginning of July, google had its annual web dev live conference where the first day was majority focused on explaining these new vitals and how to optimize these vitals. Measuring user experience will always be a moving target and Google has stated that they will be reviewing web vitals annually during their I/O conference. I will cover what these web vitals are and some overview learning of watching videos form the conference.

Overview of the New Core Web Vitals

Largest Contentful Paint (LCP)

LCP measures loading and speed by marking when the largest (usually primary content) is loaded into the viewport. A great example of this would be a hero image often found on websites. Your target goal of LCP should be 2.5seconds or less when the page first starts loading. Google explains LCP more in depth.

Common Issues Affecting LCP

• Slow server response times
  • Cheap hosting
  • Terrible server side coding
  • Unoptimized database queries
• Render blocking JS/CSS – Before website loads content, it has to parse HTML page. CSS and JS files by default block the rending of this page till they are loaded.
• Slow resource times
  • Unoptimized images – usually the main culprit
  • Loading videos
• Client-side rendering – using JavaScript to dynamically load content like API calls and not optimizing or caching the calls.

You can learn to optimize for LCP from Google.

First Input Delay (FID)

FPD measures your sites interactivity and responsiveness by measuring how long it takes for a user to interact with your page as it loads. It measures the delay of your web page being unresponsive to the user. Goal is to have a FPD of 100 milliseconds or less. Google explains FID more in depth.

JavaScript Biggest Offender

The greatest impact of FID come from JavaScript. Javascript blocks the webpage from loading until it’s executed, it’s known as “render blocking.” For internal JavaScript files, it’s best to optimize and chunk your Javascript code. Third party scripts affect your site’s loading speed too.

You can learn more in depth ways to optimize FID from Google.

Cumulative Layout Shift (CLS)

CLS measures visual stability by quantifying any unexpected layout shifts of visible web content. Think of when a page loads and you start reading an article, then an image loads in and pushes the paragraph down or a website banner load sin late and shows the entire web page lower, both of these are examples of CLS. CLS is calculated by impact fraction * distance fraction.

Common Issues Affecting CLS

• Images without dimensions – always include width and height attribute on media elements such as images or videos
• Ads, embeds, iframes, etc, without dimensions
• Dynamically loaded content (often from APIs) – don’t forget to save some allotted space for any content being loaded dynamically. Avoid loading new content above existing content, unless triggered by a user interaction like a load more button.
• Web fonts causing FOIT(Flash of Invisible Text)/FOUT(Flash of unsettled text)

You can learn more in depth ways to optimize CLS from Google.

Measuring Web Vitals

Along with the announcement of these new core web vitals came some new tooling and updated to existing tools. Google measures these three metrics with two types of data. Lab data is artificial interactions used to track down errors and bugs. Field Data is real world users and how they are interacting with your site. If 75% of the page views meet the good threshold for each measurement, then the website is classified as having a good performance for that metric. First let’s explain Lighthouse, the main technology powering these tools.

Lighthouse: the Underlying Technology

Google uses Lighthouse, a website auditing tool that powers different tools to measure these vitals. Lighthouse 6.0 has been released with reporting on the three new core web vital metrics. The web core vitals: Largest Contentful Paint, Cumlative Layoutshift, and Total Blocking Time (Lab data to simulate First Input Delay) are now added into the scoring system. The performance scoring system is broken down below.

Tools Provided to Measure your Website

• Pagespeed Insights – a tool that has been around for a long time and shouldn’t be new to anyone working with websites. What is new is leverages Lighthouse to measure core vitals. Great for finding and diagnosing easily replicable errors.
• Chrome UX Report (CrUX) – uses real users for data and be setup using Data Studio or BigQuery to create reports. Developers can also leverage the CrUX API to pull in JSON data and visualize it how they’d like.
• Search Console – has a new web vitals report built in based on real user data. Awesome for a constant monitoring tool your live website and uses real world data.
• Chrome Dev Tools – had some new features implemented into the performance tab to measure core web vitals. You can also perform lighthouse audits direct int he Chrome dev tools as well. You can learn more from the web dev live video. Very useful for local debugging.
• Web vital extension – you know Google had to create a Chrome extension.
• Site Kit from Google – a WordPress Plugin from Google that connects to Google services and displays an overview in your WP dashboard.