Guide to Core Web Vitals

By now you have undoubtedly heard about Googles Core Web Vitals. Here I will explain what they are, how to improve them, and why they matter.

Google is constantly increasing the importance of site speed and usability as a ranking factor. Speed has been a factor for some time as has user experience, but Core Web Vitals takes this to the next level and are a critical component of the Google User Experience Update launching in Spring of 2021.

Having a high scoring website in these areas will be extremely important for top rankings in an competitive industry.

In this resource I will explain what each of the core vitals are, what a good score for that metric is, and some steps you can take to help improve your score.

What Are Core Web Vitals

Google breaks down Core Web Vitals into three core areas, Load Speeds, Interactivity, and Visual Stability. These are labeled as LCP (Largest Contentful Paint), FID (First Input Delay) and CLS (Cumulative Layout Shift). But what do these fancy terms mean? Below we will outline what each of these metrics are, what scores are considered good, and provide some ways to improve them.

Core Web Vitals on SEO 101

Ross Dunn and John Carcutt discussed Core Web Vitals in an episode of SEO 101. You can find show notes on that discussion here and download the complete podcast.

Largest Contentful Paint (LCP)

What is LCP

https://web.dev/lcp/

At its simplest, LCP is the time it takes a web page to load for the end user. This is represented by the amount of time it takes for the majority of site content to appear on the screen after the initial link click.

What is a Good Score for LCP?

To earn a “good” score when it comes to LCP, Google wants to see loading complete within 2.5 seconds. A score of between 2.5 and 4 seconds is OK, but is noted as needing improvement. Anything longer than 4 seconds is noted as poor and certainly requires more urgent attention.

LCP - Largest Contentful Paint

How to Improve LCP Scores

Work towards faster load times overall. More ideas and techniques can be found at web.dev/fast

First Input Delay (FID)

What is FID

https://web.dev/fid/

FID is the measurement of how long it takes for a website to react to the first interaction caused by a user. This for instance could be a click on a button or some other action like a keypress. The faster the browser reacts to the users input, the faster the page appears.

 

What is a Good Score for FID

For FID, Googles notes a good score as having an FID of under 100 m will appear responsive. Poor scores are reflective of anything exceeding 300 ms.

FID - First Input Delay

How to Improve FID Scores

  • Reduce the impact of third-party code
  • Reduce JavaScript execution time
  • Minimize main thread work
  • Keep request counts low and transfer sizes small

More information on optimizing FID scores can be found at web.dev/optimize-fid

Cumulative Layout Shift (CLS)

What is CLS

https://web.dev/cls/

Cumulative Layout Shift, or CLS, measures the visual stability of a page. For example, if you are in the middle of reading an article and suddenly the page shifts as images or advertisements load or collapse, this is the result of a cumulative layout shift. The CLS metric helps identify problem pages. A layout shift occurs any time a visible element changes its position from one rendered frame to the next.

 

 

What is a Good Score for CLS

CLS scores are measured on a scale of 0 to 1, 1 being bad. Google notes good scores as having a CLS of less than 0.1. Scores higher than 0.25 are considered poor.

How to Improve CLS Scores

The key to improving CLS scores is to avoid unexpected layout shifts. Tools will often provide more precise indicators to your specific problems, but there are some preventative steps you can take when building a website to help avoid these issues in the first place.

  • Including size attributes on embedded media including video elements and images
  • Reserve required space for page features using CSS aspect ratio boxes
  • With the exception of responding to a user’s interaction, never insert content above existing site content.
  • Transitions should be animated in a way that provides continuity and context.

More information on optimizing CLS scores can be found at web.dev/optimize-cls/