For companies and websites that do not prioritize SEO efforts, the core web vitals tend to be forgotten about. In reality, they are some of the most important user experience signals used by Google. If you want to show Google that you are providing the highest quality user experience possible, then optimize toward these three metrics. Before we go through each of the metrics in depth, let’s learn about what they are.
The Importance of These Three Metrics
The core web vitals are a set of three metrics used by Google to better assess how optimized a website is for the user experience. The three measurements include Largest Contentful Paint, Cumulative Layout Shift, and First Input Delay (FID will be replaced with Interaction to Next Paint in March 2024). Each of the metrics measure something different and are all three important for scoring well.
Largest Contentful Paint
Largest Contentful Paint measures a page’s loading performance. It is a time-based metric that measures how long it takes for the largest element on the page to render in the viewport. The largest element could be an image, video, or text block. Whatever it is, how long does it take to fully load into your page?
A well-optimized page will score 2.5 seconds or less. A page that scores over 4 seconds needs some work.
How to Optimize for Largest Contentful Paint
Before we discuss how to optimize for this metric, let’s explore some common reasons why a page may score poorly.
- Large amounts of unused JS or CSS code
- Large image/video file sizes
- Render-blocking resources
If your page is generating unused code, then it would be beneficial to minimize or remove as much of that code as possible, that process may require a developer. Images that are over 100 kb in size can be compressed to a smaller size using free compression tools. If there are resources blocking the rendering of your page, then you can easily defer the loading of those elements with backend coding. If you are using a user-friendly website theme, then it might be as easy as flipping the switch “defer loading of this image.”
Cumulative Layout Shift
Cumulative Layout Shift measures how stable a page’s visual elements are. It is a score given to the largest burst of layout shifts that occur while the page is loading. A layout shift is anytime a visual element moves position or gets bigger/smaller while the page is still loading. Essentially, this measures how much the elements on the page shift while still loading.
A page that scores under 0.1 is optimized well. If a page scores over 0.25, it is considered poor and needs to be better optimized.
How to Optimize for Cumulative Layout Shift
The most common reason why a page is scoring poorly on Cumulative Layout Shift is because image or section elements do not have explicit size attributes. Not giving images size attributes allows them to change size or position on the page while it is still loading. Make sure your images, especially large ones, include size attributes.
Image without size attributes:
<img src=”https://sourceurl.com/image/name/”>
Image with size attributes:
<img src=”https://sourceurl.com/image/name/” height=”120” width=”250”>
First Input Delay
First Input Delay measures a page’s load responsiveness. It is a time-based metric of how long it takes for a page to respond to a user’s activity. When a user clicks a button, scrolls, or clicks a link, how long does it take for the page to start processing that request.
A page that scores under 100 milliseconds is optimized well for this metric. A page that scores over 300 milliseconds is scoring poorly and needs some work.
How to Optimize for First Input Delay
The most common issue that we see with FID is a page with long-running Javascript tasks. The best way to fix this is to take long JS tasks and break them into smaller tasks which will require a developer. This should lead to a noticeable improvement in this core web vital.
If you would like assistance with improving your website’s core web vitals, get in touch!
Comments