45
An Introduction to Core Web Vitals
Ever noticed that some websites appear to load quickly, but then suddenly become unresponsive when you try to click on a button or image? Turns out, page load time is not the only metric that matters when it comes to delivering a great end-user experience.
In the past, website owners relied on technical measurements such as the page load time to understand how fast a website loads on a visitor's device. Site speed is a useful metric to track, but does not tell the full story when it comes to user experience.
For example, even though the page might have loaded quickly, it's likely the visitor would be frustrated when multiple popups suddenly appear and block the view of the main content. A frustrated visitor is more likely to leave, regardless of the quality of the content in the website, as it matters more than ever how pleasant it is to use a website.
Web Vitals are a set of standardised metrics proposed by Google, that help understand how visitors are really experiencing a website, rather than relying on performance scores and artificial benchmarks.
While Web Vitals consist of various different metrics, let's explore a subset of them called Core Web Vitals. These are three metrics that tend to have the largest impact on user experience, and the ones which I'll focus on for this purposes of this article:
- Largest Contentful Paint (LCP), how fast the main content on a website loads.
- First Input Delay (FID), how quickly can a visitor start interacting with a site.
- Cumulative Layout Shift (CLS), how visually stable is the website layout as content loads.
Largest Contentful Paint (LCP) is a metric that measures how long it takes for the main piece of content to load on the screen, as opposed to the time it took for the entire page to load.
It's different from the page load time, as it measures what the visitor perceives instead of the actual number on paper. For example, while a page might load in 5 seconds, the main piece of content, such as a big image, or block of text might have already loaded 2 seconds in. That means that the remaining 3 seconds are just spent on loading secondary content which does not prevent the visitor from already looking at the site.
What exactly is the main piece of content depends on the page in question. Most tools that measure this metric will automatically identify the largest block of content presented on the website as it loads.
Things that might affect LCP include large images, video players, website backgrounds, large blocks of text, and other render blocking resources. Essentially, anything that might cover a large portion of the initial viewport.
It's generally a good idea to keep LCP within 2.5 seconds to ensure your website feels fast, and visitors don't leave while waiting for something to appear on screen. An LCP of 4 seconds or more is considered to lead to a poor experience.
First Input Delay (FID) measures input delay. In other words, it measures how quickly a user can start interacting with a website, even if it’s still loading.
For example, maybe a page is still loading, but the visitor wants to click on a button or expand an image that is already visible on screen. There's no need to wait around in order to be able to perform an action. If the site immediately reacts to these interactions, it feels snappy and responsive.
Unlike the other two Core Web Vitals, FID is difficult to measure using "offline" tools. It's best to measure it using real-user monitoring tools. The reason being that it requires actual user input in order to measure it.
Field data tools (or real-user monitoring) perform continuous measurements on a website's live traffic, painting a much more accurate picture of a website's performance under real world scenarios.
That's why FID is best measured using field data tools, as it depends highly on what is being clicked, how much of the website has loaded so far, the internet connection speed, and various different scenarios which are not easy to replicate in artificial tests.
Google recommends a FID of 100 milliseconds or less, while an input delay larger than 300 milliseconds can lead to a poor user experience.
It may be tempting to try and reduce input delay to a minimum, but it's important to consider that there's a practical limit on how much better it can be. While most humans can notice the difference between 800 milliseconds and 100 milliseconds, a 10 millisecond difference might be just barely noticeable.
Cumulative Layout Shift (CLS) measures the visual stability of a website. In other words, it measures by how much the main elements shift around as the page loads.
To understand it, you have to put yourself in the shoes of the visitor. It can be highly frustrating when a button or image moves around while you're trying to focus on it. Even worse when you end up clicking on something you didn't want because the content moved around as the page continued to load. That's why striving for visual stability as the page loads is important.
CLS can be affected by lazy loading images, delayed popups, banners, and wrongly-sized placeholder blocks or images. Essentially anything that can cause significant layout changes as a page loads.
Keeping your CLS score to a minimum can greatly improve your website's usability. Google recommends a CLS of 0.1 or less, which can help reduce frustrated visitors which may just be leaving your site due to having a poor experience.
Having a fast, responsive website is more important than ever. Besides leading to a better experience for your website visitors, search engines such as Google now officially use Web Vitals as a ranking signal.
This makes sense, search engines generally want to rank websites higher when they offer more relevant, useful content for a given user search. If the content is good, but the website which presents it is unusable or bounces off a lot of visitors, Google may interpret this as a signal that visitors are not satisfied with the proposed search result.
In other words, delivering a great user experience is just as important as having good, quality content. It's about the entire user experience, and optimising for it may help website owners get more relevant search traffic, and a higher ranking position.
You can use a variety of tools to measure your Core Web Vitals. While some metrics are easy to measure using lab tools which perform checks in a simulated environment, some of them are best measured using real traffic samples of how visitors interact with each page.
The distinction between the two types of tools is in how they take the measurements. On one hand there is lab data (or synthetic monitoring), which performs checks in a simulated environment, and on the other hand there's field data (or real-user monitoring), which takes measures from the real visitor traffic on a website.
No tool will be best suited for every possible scenario, so it's advisable to start with the simplest ones and add more advanced monitoring and reporting as you actually need it.
To help get started, here's some of my favourite tools to measure Web Vitals:
Peter Drucker is often quoted as saying that "if you can’t measure it, you can’t improve it". The point being that you can't know with certainty whether something worked or not just by guessing. Without data, all we have are opinions, which may differ from the truth.
On that principle, the first step towards delivering a great experience on your website should be to start measuring the metrics that matter. That way you'll know where you stand, and whether any changes you perform have a positive effect on the end-user experience.
You can start by performing synthetic checks on your website using lab tools such as Lighthouse in order to understand the current state of your website.
Once you have identified existing issues, and possible improvements. You could add a monitoring solution, either lab-based (offline checks) or field-based (using real traffic), in order to continuously monitor the metrics that matter for you.
In order to achieve the best results, most websites use a combination of tools as part of their monitoring stack. It's often recommended to measure at least three things: overall visitor traffic, performance, and uptime. After all, you don't want to be the last to know when your website is trending, unresponsive, or even worse, having downtime.
Did you enjoy this article? Let me know if you have any questions or feedback. I hope it's been a useful introduction to Web Vitals and the different kinds of monitoring tools available for your website.
45