Core Web Vitals – Why you need to know about them

Next month there will be a significant algorithm change to the way Google assessing and ranks websites, which will impact the SEO of all websites.

Google are introducing a new set of metrics, Core Web Vitals, that change the emphasis on what Google considers to be a ‘good’ website now.

In this post our developer Ben, explains in more detail what changes are coming and what that means for your website.

What are Core Web Vitals?

Core web vitals are website performance metrics based on real user experiences. Google will begin to use this real-world data to influence website page rankings from May 2021.

The three Core Web Vitals that Google will initially measure are:

1. Largest Contentful Paint — The time it takes to load the largest element of the visible page.
2. Cumulative Layout Shift — The time taken for the page to become visually stable.
3. First Input Delay — The time for the page to become interactive.

1. Largest Contentful Paint

The first metric, Largest Contentful Paint (LCP), is a score based on the time it takes for the largest element on the visible page to load. The score indicates the overall page load time — slow loading pages are bad for the user experience.

Many factors can influence how quickly the page loads, including:

• Server response time — If the server is slow to respond to requests, the page will take longer to load. Caching is one way to greatly improve server response times.
• Render-blocking — Website scripts prevent the page being built whilst they are loaded. Reducing the number and size of these scripts will shorten the time rendering is blocked.
• Resource loading — Images, videos and scripts take time to load. More resources on a page leads to more time spent loading the page. It is important to optimize resources to load them as fast as possible.
• Client-side rendering — Websites generated in the browser (instead of on the server) take additional time to render the page. Minimizing critical JavaScript will result in a faster render.

2. Cumulative Layout Shift

As the name suggests, Cumulative Layout Shift (CLS) describes the effect when the page layout changes, shifting other elements further down the page. 

CLS is often caused by dynamic content such as adverts being loaded with no space reserved for it on the page. Once the new content has loaded, it pushes the other content down resulting in a layout change.

Google calculates the layout shift score based on the distance elements move, and their impact on the rest of the page, with lower scores representing better visual stability.

3. First Input Delay

The third Core Web Vital metric is First Input Delay (FID). FID is a score calculated from the delay between the first user interaction and the browser responding to that interaction.

User interactions include: clicking a button or link, using an input field, or swiping an image carousel. 

Delays in these interactions can occur if the browser is busy doing something else and so can’t respond to the user until these tasks are done.

Keeping JavaScript processes to a minimum, and breaking up long tasks help reduce the first input delay time.

How do Core Web Vitals affect me? 

The three Core Web Vitals metrics are collated from real user data (not automated testing) and, from May 2021, will be used, along with hundreds of other data-points, to influence your Google page ranking. 

In addition to affecting your Google page ranking, Core Web Vitals are a useful tool to measure your website performance.

You can test your website’s Core Web Vitals by adding your website URL to Page Speed Insights.

“Good or bad website performance correlates powerfully to user experience, as well as the overall effectiveness of most sites.”

What can I do to improve my Core Web Vitals score?

Achieving a great Core Web Vitals score takes several approaches, targeting each of the individual metrics, but also focussing attention to other performance metrics.

Yoast.com: “‘Core Web Vitals don’t work in isolation, as there are many other metrics. Some are based on controlled lab tests, while others are metrics that only work with field data.”

To achieve good scores with Largest Contentful Paint, Cumulative Layout Shift, and First Input Delay, you can:

Ensure your server response is fast

• Use a Content Delivery Network (CDN) to serve static content and assets.
• Cache assets to reduce server time.
• Optimise your server to reduce complex processing on every page request.

Remove render-blocking JavaScript and CSS

• Defer the loading of non-critical scripts until after the initial page load.
• Optimise scripts to only load and render the critical content.
• Minimise the amount of JavaScript processing needed for the page.

Improve resource load times

• Preload critical assets
• Optimize and compress content and assets, especially images and video
• Cache assets using a service worker
• Serve “next-generation” image formats (WEBP, AVIF, JPEG2000) where possible

Using Core Web Vitals

From May 2021, Core Web Vitals will play a bigger part in the success of your website with Google including them in your page speed ranking.

Largest Contentful Paint, Cumulative Layout Shift and First Input Delay will work alongside other performance data to determine the overall user experience of your website.

Core Web Vitals﹘collated from real-world usage in order to determine user experience will have a positive impact on the web – encouraging website developers and owners to think about performance and the user experience in order to achieve higher page rankings. Improving your website performance is beneficial to your user experience and your business.

The Author

Lynda Harvey

Managing Director. Leading our business strategy and culture.

The 10 Degrees Team