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.
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.
What is 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.
How to Improve LCP Scores
- Improve server response times
- Improve resources load times
- Avoid Client-Side Rendering
- Optimize your Images
- Optimize your CSS
- Optimize Web Fonds
- 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
What is 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.
How to Improve FID Scores
- Reduce the impact of third-party code
- 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/