Climb Marketing Blog

What is the Core Web Vitals Update?

Earlier this year, Google announced three additional Page Experience metrics that will become important search ranking factors in May of 2021. In this blog, we cover: 

• • Review of each Core Web Vital Metric: Largest Contentful Paint, First Input Delay, & Cumulative Layout Shift
  • Dos and don’ts for optimizing your site in adherence with these new metrics
  • Our predictions for the future of this update

The new metrics, named Core Web Vitals, are 3 additional quality signals designed to measure user experience and website functionality. Google announced the Core Web Vitals rollout in April of 2020, and hopes that the metrics will help to provide unified guidance to webmasters on improving user experience and website load speed.

While the Core Web Vitals metrics are expected to evolve over time, there are three user experience aspects that Google will initially focus on: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). We’ve summed up the three metrics below.

Core Web Vitals Explained

1. Largest Contentful Paint (LCP)
Evaluates: Page Loading

LCP reports the time it takes for the largest image or text block in the viewport to load. Be aware of what’s considered large under this metric. The size refers to the display size – not the file size. 

What Does the LCP Process Look Like?

The LCP is the time it takes for the page to go from the screenshot on the left to the screenshot on the right in the graphic above. The first stage is FCP or First Contentful Paint, the moment that the first image or text element appears on the page. In the final stage, the photograph of the politicians is the largest element on that page so the LCP occurs at that paint stage. 

What Elements Are Evaluated under LCP?

• <img> elements
• <image> elements inside an <svg> element
• <video> elements (the poster image is used)
• An element with a background image loaded via the url() function (as opposed to a CSS gradient)
• Block-level elements containing text nodes or other inline-level text elements children

What is a Good LCP Time? 

Good

• In the first 2.5 seconds of the page starting to load
  

Needs Improvement

• 2.6 – 3.9 seconds
  

Poor

• +4 seconds

2. First Input Delay (FID)
Evaluates: Page Responsiveness

FID reports the time from when a user first interacts with a page (through a click, tap, etc) to when the browser begins processing the event. The thing to keep in mind about this metric is it doesn’t measure how long it takes for the page to react to the click/tap, but rather how long it takes to start processing it.

What Elements Are Evaluated under FID?

The FID metric applies to discrete actions, or actions that have a clear beginning and end, like clicks, taps, and key presses. Scrolling and zooming are continuous actions, therefore not evaluated in the FID metric.

What is a Good FID Time? 

Good

• 100 ms or less

Needs Improvement

• 101 ms – 299 ms
  

Poor

• +300 ms

3. Cumulative Layout Shift (CLS)
Evaluates: Page Stability 

CLS is the total amount of unexpected layout shift that occurs on a page. It seeks to punish pages having visual elements that change position. Unexpected is defined as not resulting from user interaction (clicks, typing, etc). If a layout shift occurs within 500 milliseconds of interaction, they are excluded. 

How is the CLS Calculated? 

Unlike LCP and FID, the CLS is a score. A higher number equates to worse performance. Essentially, the score is how much distance an element has moved relative to the viewport and the frame. 

What Elements Are Evaluated under CLS?

For this metric, it’s easier to focus on what’s not evaluated under CLS. User initiated layout shifts will not be penalized, nor animation or transitions done through CSS.

What is a Good CLS Score? 

Good

• 0.1 or less

Needs Improvement

• 0.11 – 0.25
  

Poor

• +.25

Our Suggestions for Improving Your Core Web Vitals Score

You can test your website against the new Core Web Vitals metrics using a number of developer tools. We put our own website to the test to get a feel for how to improve scores for the new metrics.

LCP

Do’s & Don’ts

• Do: Identify the largest page element and prioritize it in the page load.
• Do: Consider resizing elements to ensure the largest element is the one you want.
• Do: Improve server response times through: CDN use, caching, optimizing your server or the code running on it.
• Do: Defer any non-critical Javascript and CSS until after the main content of the page loads, as these block rendering.
• Do: consider minifying the CSS files or implementing the CSS in-line to avoid making additional server requests.
• Don’t: Use a hero or banner image unless it is really necessary.
• Do: compress it or deliver hero or banner images in a newer format like JPEG2000 or WebP.
• Do: Deliver responsive image sizes based on viewport size or network connections.

FID

Do’s & Don’ts

• Do: Break up long tasks into chunks so that the page checks for user input between completing tasks.
• Don’t: fetch or run Javascript code until it’s necessary (i.e. don’t load an app at the bottom of the page until the user scrolls down).
• Do: Assess third party code (like Invisible ReCaptcha) because a single piece can push a site over the 300ms limit. 

CLS

Do’s & Don’ts

• Do: Remove any page activity that occurs without user interaction. 
  • For example, having an “offer” that appears five seconds after the page loads and moves other page elements down will cause major issues.
• Do: Remove any redundant/conflicting CSS that slightly changes the page’s layout after load.
• Don’t: insert content above existing content on the page.
• Do: Use the CSS transform property for animations.

Our Predictions for the Core Web Vitals Update

We were able to improve our PSI score for this page (on Desktop, specifically) from 89 to 98 without making a change that would improve user experience. We did this by watching how everything gets calculated/recorded in Chrome DevTools and manipulating things like the order in which scripts run in the background and making small changes to text and margin sizes.

This makes us think the algorithm update could fail to accomplish what it sets out to do in many cases. And as a result, it’ll get heavily revised, in at least one of the following ways:

• The benchmark ranges for each of these metrics will change
• They will add or subtract metrics, for instance the total amount of data transferred in loading the page
• Or…. they’ll have an insignificant impact on rankings, similar to some other pre-announced updates in the past

We’re excited to see what happens! Google recently announced that the new metrics are expected to become an official ranking factor for search listings in May of 2021, so now is a great time to test your website against the new metrics.

In addition to the information above, our Director of Organic Search, Taylor Caldron, recorded a video explanation of LCP, FID, CLS, and the Core Web Vitals update. You can check it out below.

For more information about Core Web Vitals, you can check out this guide on the Google Developers website. You can also test whether your current web pages are passing the Core Web Vitals criteria with a number of tools, including Google’s PageSpeed Insights.

If you’re looking for more guidance on this new update, please contact us for a free consultation. We’ll help you define any Core Web Vitals issues and give actionable insights on correcting the problem.