Guide to Core Web Vitals
By now you have undoubtedly heard about Googles Core Web Vitals. In the Summer of 2021, Google launched the Page Experience update. This updated, included a number of factors such as speed and other user experience related metrics including Core Web Vitals. Here I will explain what they are, how to improve them, and why they matter.
Before the Page Experience Update was launched, there was much concern as SEOs and Webmasters expected this to have a major impact on organic search rankings. This changed when launched, as Google decided on a slow roll-out. For most, the launch was barely noticeable. For now the impact on this update is small, but it is something that will grow and become increasingly more important over the coming months and years.
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.
Core Web Vitals Guide Contents
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.
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.
How to Improve LCP Scores
- Improve server response times
- Improve resources load times
- Avoid render-blocking JavaScript and CSS
- Avoid Client-Side Rendering
- Optimize your Images
- Optimize your CSS
- Optimize Web Fonds
- Optimize JavaScript
- Apply instant loading with the PRPL pattern
- Optimize your critical rendering path
Work towards faster load times overall. More ideas and techniques can be found at web.dev/fast
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
What is 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.
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/