User experience (UX) is probably one of the most important parts of optimising your website, being something that  Google continues to measure in terms of the quality of your site. This is widely known as core web vitals.

It’s extremely important to be able to understand these metrics so that you can maintain your search rankings and to make sure that your customers don’t leave your website and hop onto your competitor’s website instead. Here, we look at what is core web vitals, and why it matters, including how to improve core web vitals so that you stay ahead of your competitors.

What is ‘core web vitals’?

At its simplest, core web vitals are a set of specific factors that Google considers important when looking at a webpage’s overall user experience. They are a part of Google’s page experience signals that measure how your users find navigating your website. Google may look at 100 different metrics, but core web vitals specifically focus on 3 different areas of the user’s journey, for example:

1. Largest Contentful Paint (LCP): Measures how quickly the site loads.
2. Interaction to Next Paint (INP): Measures how interactive users can be on the website.
3. Cumulative Layout Shift (CLS): Measures visual stability.

The three pillars of user experience

To pass the Core Web Vitals assessment, your page needs to meet the threshold for all three metrics, which is ‘Good’. Let’s go into these pillars in a bit more detail:

1. Largest Contentful Paint (LCP)

This looks at how long it takes for the largest element on the screen to load and become visible. , This is usually the hero image or a large block of text. Here is how this is measured:

• Good: Under the timeframe
• Needs Improvement: Between the timeframes
• Poor: Over the timeframe

2. Interaction to Next Paint (INP)

This metric assesses how long it takes the user to be able to interact with the page, including taps and clicks. The same scale as above is used for INP to assess this.

3. Cumulative Layout Shift (CLS)

This measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page. Basically, this looks at whether or not you click an ad instead of the button.

Why businesses should care about core web vitals

If you ignore core web vitals, you’ll be doing your business a massive disservice, and here’s why:

• Higher search rankings: Google has specifically stated that core web vitals are a ranking factor, meaning you’ll have that competitive edge over your competitors in the SERPS.
• Improved conversion rates: The slower your site is, the fewer conversions!
• Reduced bounce rate: Users will leave your page if it is slow and clunky.

How to improve core web vitals

So, how do you actually improve your core web vitals?

Improving your core web vitals will require you to focus on content management and technical development as a mix.

Improving LCP (Loading)

• Optimise images: Use modern formats like WebP or AVIF to make sure your images are sized correctly and compressed properly.
• Implement lazy loading: Set images further down the page to load only when they enter the viewport of the user. Make sure your hero image is not lazy-loaded, though!
• Fast hosting: Ensure your server response time (TTFB) is low and consider using a Content Delivery Network (CDN) to serve files from a location closer to your users.

Improving INP (Interactivity)

• Minimise JavaScript: Make sure you audit your site to look for any unused JS and then remove it all. The page can become unresponsive otherwise.
• Break up long tasks: Use code-splitting to ensure the browser doesn’t get stuck processing one massive file while the user is trying to click a menu.
• Yield to the main thread: Use modern coding patterns to allow the browser to recoup between processing different tasks.

Improving CLS (Visual Stability)

• Set dimensions: Make sure you include all width and height attributes when uploading images and videos, as this will tell the browser how much space it needs to reserve before the file loads.
• Reserved ad spaces: Make sure there is a dedicated space for your ads so that they don’t jump around on the screen.
• Avoid inserting content above existing content: unless in response to a user’s action, never dynamically inject banners or buttons on top of text that the user is reading.

Mastering core web vitals is an ongoing task and should be done regularly. Your website may become more complicated as time goes on, and keeping it clean and responsive is the best way to manage this. This way, both your customers and Google stay happy!

By understanding what is core web vitals and implementing a plan for how to improve core web vitals, you are building a resilient digital presence that is optimised for the future of the web. Get in touch with our team of experts at Assisted for more information on core web vitals and how to improve your website’s user experience!