Core Web Vitals — Why should you care about them?
Core Web Vitals are the part of Web Vitals — a set of metrics provided by Google to help developers make websites faster and more user-friendly. They are really important when we talk about user experience and SEO. Yet in 2021, there are still too many websites that do not pass the Core Web Vitals assessment. Let’s go through these metrics and check how they affect Google rate and UX of our site.
Core Web Vitals consist of three metrics:
- Largest Contentful Paint (responsible for loading)
- First Input Delay (responsible for interactivity)
- Cumulative Layout Shift (responsible for visual stability)
If you’re feeling confused, bear with me a little longer. I will explain everything soon.
How to measure Core Web Vitals?
There are lots of tools you can use to measure Core Web Vitals score. Each of them has unique characteristics. Below, I will describe my favourite ones.
Probably the most popular tool is Page Speed Insights provided by Google. It measures the condition of your website based on performance, user experience and accessibility. It also gives you a report with suggestions on how to improve the score of your website.
Another great tool is WebPageTest. It’s main advantage is the fact that you can customize test settings (such as connection, test location, browser, device emulation, etc.).
During the development, the best way to measure your website score is to use Lighthouse — a tool built in Google Chrome DevTools. It allows you to test your website locally. The report is similar to the Page Speed Insights result.
Let’s now take a look at each of the metrics of the Core Web Vitals and explain them.
Largest Contentful Paint (LCP)
Largest Contentful Paint measures the time needed to render the largest contentful element (e.g. text, image) in Above The Fold section (a part of website that is visible without scrolling).
You should try to achieve LCP time of ≤2.5s.
If your page has a low LCP score, it means that users have to wait too long to view the main content of the website. It can be very frustrating and it’s very likely that users will leave your page before it loads.
How to improve LCP score?
- If possible, do not use Javascript for displaying the largest contentful element
- Keep the largest contentful element visible, even if custom fonts are not loaded yet
- Load background images in HTML, not CSS
- Keep image sizes as small as possible
- Use different image resolutions for mobile and desktop
- Limit usage of Javascript in Above The Fold section
First Input Delay (FID)
First Input Delay metric tells how responsive the site is when users try to interact with it. It measures the time from the first interaction with the webpage (e.g. click, input events) to the moment the browser starts processing this event.
Your site should have First Input Delay ≤100ms. FID ≥300ms should be considered unsatisfactory.
Let’s take a look at an example to understand what First Input Delay is:
- The page starts loading
- User clicks on the hamburger menu
- The browser is still processing some of the resources
- After all needed resources are loaded, the browser starts processing user interaction with hamburger menu
How to improve FID score?
- Improve Total Blocking Time (TBT) metric score
- Reduce amount of Javascript on your website
- Minimize main thread work
Cumulative Layout Shift (CLS)
Cumulative Layout Shift describes visual stability of a website. It measures the largest shift of layout while the user is on site. CLS often occurs when resources on the page are being loaded asynchronously and space for them has not been assigned (e.g. ads, lazy-loaded images).
The satisfying score for CLS is ≤ 0.1. If your website has CLS score ≥ 0.25 it is considered poor experience.
CLS provides a terrible user experience. When it‘s too large, there’s a high chance of misclicks. For example, a user could want to click on the article. During the click, an advertisement is being loaded and the user ends up clicking on the ad itself, not the article.
Let’s now take a look at the example of Cumulative Layout Shift when you do not specify the width and height of your images:
How to improve CLS score?
- Preload custom fonts (long loading of custom fonts can result in the layout mislocation)
- Always specify the width and height attributes for images and videos
- Always specify the width and height for wrappers with asynchronously loaded content
- If you have to load any new content, try placing it below the existing one
Why you should care about Core Web Vitals?
Core Web Vitals can tell you how your website is perceived by the users. It can detect issues related to performance and bad user experience. If the users feel comfortable on your site, they will come back and recommend it. Otherwise, there’s a chance they will leave it as quickly as possible never to come back again. This could have a significant impact on your business especially in case of ecommerce.
Another important reason for optimizing your Core Web Vitals metrics score is SEO. In May 2020 Google has announced that Core Web Vitals will impact Search ranking. Click here to read more.
I hope I’ve managed to convince you that Core Web Vitals are really important metrics. In 2021, keeping these metrics on track should be considered an integral part of web development.
