You walk into a toy shop to get a last-minute present for your kid’s birthday. But the shop opened late. When you finally got in, you found out that the items had no price tags. So you had to ask about each toy. Worse, your item of choice had a defect. The staff wasn’t helpful enough either.
You walked out of the store not buying what you intended because of the poor experience. It left you stressed out and unhappy.
It’s About Great User Experience on a Page
If there is one thing that users want, that is an interruption-free, flawless experience while browsing web pages. Optimizing for this will help you succeed — whether you’re a business owner, SEO specialist, or marketer.
Enter Core Web Vitals.
Here, you’re going to learn what Core Web Vitals are and their impact on your website rankings. Let’s dive in.
What Are Core Web Vitals? An Overview
Google defines Core Web Vitals as a set of real-world, user-centered metrics that measure a user’s experience which includes:
- Load time
- Visual stability
In May 2020, Google announced that it will be introducing a new page experience signal that combines Core Web Vitals with its existing signals such as mobile-friendliness, safe browsing, HTTP-security, and intrusive interstitial ads guidelines.
See the diagram below:
Learn more about page experience in Google’s detailed guide for developers.
Here’s a sneak peek of each Core Web Vital:
1. Largest Contentful Paint (LCP) – Render time
How long does it take for the main content on a page to render? In a nutshell, the LCP measures render speed. A page should render within 2.5 seconds for good user experience.
2. First Input Delay (FID) – Interactivity
When you interact with a page, for example, click on a button, how long does it take to respond? FID measures how interactive or responsive your website is. Be sure to aim for a FID value of fewer than 100 milliseconds.
3. Cumulative Layout Shift – Visual stability
Does an element, a button, or link, for instance, shift its location as you click it or as the page renders? As a result, you end up clicking something else. This phenomenon describes layout instability. A good CLS score is less than 0.1.
|💡Key takeaway: Core Web Vitals are not optional — they’re essential for maintaining a healthy website. It doesn’t matter what industry you’re in or what pages you have. LCP, FID, and CLS should be measured by ALL WEBSITE OWNERS on ALL PAGES.|
Now let’s explore each metric in detail:
Largest Contentful Paint (LCP)
Largest Contentful Paint describes perceived load speed. It measures the point at which the largest image or block of text becomes visible to a user who is on desktop or mobile.
Below is a demonstration of the LCP, from Google:
Take note that the largest image or block of text may change as the page continues to load.
Look at the example. The text “View stories” appears first, and is considered as the largest element. But then the news headline appears, which now becomes the largest element — followed by the image (since it is larger than the headline).
As you can tell, users need to see the main content on a page. Which helps accomplish their goals.
So, you’ll want to aim for an LCP within 2.5 seconds. If it’s beyond 2.5 seconds, it needs some improvement. More than 4 seconds means poor performance! ⚠️
Fortunately, Google provides tools that will help you easily identify your LCP.
Here is an example of an actual LCP score from a website (mobile). It shows that the page needs improvement:
The same website, now in desktop, shows this poor LCP score:
You can also use the Google Search Console. The difference is that Search Console gives you a list of URLs with good or bad results — instead of you having to check one URL at a time.
Google identifies these as the common causes of poor LCP:
- Slow server response times
- Slow resource load times
- Client-side rendering
Check out this document to learn about each cause and how you can optimize LCP.
First Input Delay (FID)
First Input Delay measures interaction on a page. These “interactions” include clicks, taps, and keypresses. (Note: Actions such as scrolling and zooming are irrelevant.)
For example, if a person clicks a buy button on your page, how long does it take for that button to respond to that click? A delayed response, beyond 100 ms, creates a bad user experience.
|💡For your knowledge: Not all interactions are relevant to FID. Google considers scrolling and zooming irrelevant. |
FID is a field metric. Meaning, it can only be measured if you have actual users. At the same, keep in mind that not all visitors who land on your page interact with it and that not all interactions are relevant to FID, such as scrolling and zooming.
Google recommends the following field tools for measuring FID:
- Chrome User Experience Report
- PageSpeed Insights
- Search Console (Core Web Vitals report)
- Firebase Performance Monitoring (beta)
An actual FID score using PageSpeed Insights. This indicates a good score.
You can also use a lab tool called Lighthouse to run a performance audit. It measures Total Blocking Time (TBT), which if improved, can also improve FID.
For detailed information on how to improve FID, read this guide.
Cumulative Layout Shift (CLS)
The Cumulative Layout Shift metric measures the unexpected movement of content on a page while it loads. (Think: Visual stability.)
Here’s a sample scenario: Imagine being on an order confirmation page. You’re about to click the back button because you’re not yet done with your orders.
Wouldn’t it be frustrating if you ended up clicking the “place my order” button?
This phenomenon called layout instability leads to a poor user experience since it prevents them from achieving their goal — whether that’s reading a piece of content, making a purchase, checking out another resource, etc.
Therefore, it’s important to minimize CLS. Aim for a score of less than 0.1:
Google identifies some culprits behind CLS such as ads, images, and widgets without specific dimensions. This is why your developer needs to set size attributes to images and videos to avoid layout shifts.
Custom web fonts that cause Flash of invisible text (FOIT) and Flash of Unstyled Text (FOUT) also lead to layout shifts.
There are lots of tools to diagnose CLS and these include PageSpeed Insights, Chrome UX Report (CrUX), Search Console, and Lighthouse.
An actual CLS score using PageSpeed Insights. This indicates a good score.
See this detailed document that Google put together on how to optimize CLS.
Does the User’s Device Affect the Core Web Vitals?
The answer is yes. Devices that are fast and powerful (CPU/RAM) can cause field data to be better than lab data, even if the website itself is content-heavy or unoptimized.
This means that heavy sites seem to “perform well” specifically for people who are using modern devices.
Here’s an example:
- Website A is content-heavy and gets visited by an audience using powerful devices.
- Website B is optimized and gets visited by an audience using slow devices.
So, on a lab test, website A will perform poorly. However, field data will show good results because the real users are not experiencing problems – thanks to their devices. Website B, on the other hand, will show the opposite for both field and lab data.
For the best possible outcomes, use both lab and field data to measure your Core Web Vitals.
Will the Core Web Vitals Affect Your Rankings?
In a nutshell, yes. This update is expected to become a ranking signal in May 2021. Google announced it in November 2020, giving website owners enough time to prepare.