This article was updated on 10th May 2023 to reflect a documentation change made by Google in relation to Core Web Vitals.

Designing a good user experience is an important consideration for growing businesses. If you want your business to be successful moving forward, then you need to think about how customers use your website and interact with your services.

Unfortunately, improving your website can be a little more difficult than you’d think. This is mainly because you need to rely on customer feedback and quality testing to get an idea of what needs to be changed. One of the most reliable ways to do this is to look at metrics and related data that is collected from actual browsing sessions on your website. This can be done with existing analytics tools, but a recent change to Google has made this a lot easier.

Core Web Vitals is a set of metrics that measure real-world user experience for loading performance, visual stability and interactivity, designed to help websites improve their browsing experience. Since its introduction, it’s become one of the most useful metrics from Google that developers can use to better understand how users interact with web pages while also improving search engine optimisation.

 

What are Core Web Vitals?

The basis of Core Web Vitals involves three standardised measurements; loading times, page interactivity, and visual stability. This means it looks at how quickly a page loads, how users interact with it, and how stable the page is from the user’s perspective.

The purpose of these three metrics is to give page speed insights and data on how a user interacts with a website. It encompasses three of the most important factors that go into a good website experience, and can help piece together a bigger picture of where website-related problems can stem from. Together with general troubleshooting and listening to user feedback, it can help developers diagnose and fix issues that hinder the user experience.

Let’s take a look at the three main metrics from Core Web Vitals that can help you improve your website experience.

 

1. Largest Contentful Paint (LCP)

Largest Contentful Paint is a Core Web Vitals metric that is used to assess the render time of your website.

Why do web pages need to load quickly?

When a user first visits a web page, they expect it to load quickly so that they can start using it. This can mean browsing other pages through links, looking at products, searching for something, or even just enjoying the content on the page. In order for a web page to load quickly, developers need to reduce the amount of unnecessary data that is being loaded. This can start off being an easy task, but will quickly get more complicated as a website is improved with more features and media.

Page speed is a critical factor when creating an enjoyable user experience. Google has historically favoured websites that load faster, giving them higher rankings over pages that load slowly. Quick load times have also shown to increase engagement and conversation rates.

What does LCP measure?

LCP effectively measures the amount of time it takes for content blocks to load. However, unlike some metrics which calculate the loading speed of the entire page, LCP only measures what is currently visible on the screen. That means any content you have to scroll up or down to reach is not considered. In most cases, the content that it will be measuring involves images (both foreground and background), videos, and text.

It’s recommended that websites have an LCP of under 2.5 seconds to ensure a snappy browsing experience for users.

 

2. Cumulative Layout Shift (CLS)

While aiming for an LCP of under 2.5 seconds should be standard, there are a number of client-side factors that can affect page load speeds as well. This can include old hardware, unstable network conditions, or even certain browser extensions. This can cause undesirable effects, such as text and images shuffling around the screen due to content loading slower than usual.

While these factors are outside the control of a website developer, it’s important to take these factors into consideration and build your website around them to create a consistent experience for all of your visitors.

Why are shifting layouts bad for the user experience?

In many cases, links and buttons appear first when a website is loaded initially because they are small in size. However, as images and other larger pieces of media are loaded in, this can cause changes to the position of a link or button. This causes everything to shift as a page is rendering which could potentially lead to misclicked links.

For example, a CTA could appear in the middle of the screen with two buttons; one to learn more and one to close the page. While a user is reading the message, the images for the two buttons could still be loading. Once they have loaded, it could cause a shift in where the buttons are positioned, leading to the user accidentally clicking on the wrong thing.

Alternatively, text can bounce around a webpage because it’s being pushed by images that are taking longer to load. This can make your website disorienting to use and will hinder the user experience.

It’s important for developers to plan around this kind of potential issue instead of assuming that every user has a fast and stable connection. This can greatly improve the usability of your website and protects it from issues that are outside of the user’s control such as an unstable connection.

What does CLS measure?

CLS measures if any elements on the screen shift from their starting position between two rendered frames. It’s an easy way for developers to see if any text, buttons, images, or other types of content are being moved around as the page is loading. It takes several factors into consideration such as layout shift, impact fraction, and distance fraction.

It’s recommended that website owners aim for a CLS of 0.1 or less.

 

3. First Input Delay (FID)

Modern websites use a lot of different widgets and other interactive elements that can be used to enhance the content on a page. This includes things like sharing widgets, buttons to view more about a product, or even videos. However, these elements can be unresponsive at times because the website is still loading.

Why is website responsiveness important?

A website needs to be responsive because users expect a page to both load fast but also be intractable as soon as everything has loaded. It can be frustrating to see that elements have been loaded, but they are still unresponsive to touching, clicking, or even key presses. This can frustrate users and it could potentially lead to unwanted clicks or sudden page transitions as the inputs are being backed up and processed late.

Much like page loading speeds, responsive websites are highly favoured by Google’s algorithms and can greatly improve user experiences. This is especially the case during unstable network conditions or when considering lower-end devices if your website has many resource-intensive elements.

What does FID measure?

FID measures how responsive a web page is after the very first input from a user. It only records user interactions such as clicks and key presses. It can be difficult to measure FID accurately since device hardware plays a factor. Older devices may struggle to fully render a website and internet speed also plays a role.

Regardless of device and internet differences, it’s still important to try and aim for an FID of under 100 milliseconds in order to provide a good user experience.

 

Other metrics

LCP, CLS, and FID are three of the main metrics that Core Web Vitals offers developers. However, there are a number of other metrics that developers can use to create a better understanding of the problems their website has. This includes:

  • Speed Index (SI) – A measurement of the average time that content on your website takes before it’s displayed to a user.
  • First Contentful Paint (FCP) – The length of time it takes for a user’s browser to render Domain Object Model (DOM) elements like images and vectors.
  • Time to Interactive (TTI) – The amount of time it takes for content to become functional in order to be fully interactive.
  • Page Performance Scores – A single metric that takes all other important user experience metrics into consideration. Uses an aggregate scoring system across all device visits.

 

Conclusion

Page speed insights from Google’s Core Web Vitals are going to be essential for businesses moving forward. A standardised set of metrics like this can make it easy for developers to understand where they are in terms of creating a great experience for their users. It’ll be used to quickly identify issues with your website and will continue to be a major ranking factor for a long time.

In short, it’ll reward website developers who care about their users and actively want to improve the experience.

 

Get in touch

At Talk to Media, we offer small business owners and SMB marketing teams professional digital marketing services to help their websites reach new heights. If you’d like to learn more about your Core Web Vitals score and how to improve it, then get in touch with us today for a free consultation. We’ll explain these important metrics in more detail and make suggestions on how you can improve your website to create an exceptional user experience.

 

About The Author

Matt is a certified Google specialist with over 8 years of experience in Google Ads, SEO + Social Media Advertising.

He holds a certification from and is a member of the Chartered Institute Of Marketing and has presented talks on the importance of using Google Business Profile to boost your local business ranking.

Connect with Matt on LinkedIn today.

Matt limbert