ivstudio

Core Web Vitals

Core Web Vitals are a set of website performance metrics that focus on three key aspects of the website performance: loading speed, interactivity, and visual stability. Web Vitals can help us quantify the User Experience and identify opportunities to improve. There are three core web vitals.

The Three Core Web Vitals

  1. Largest Contentful Paint (LCP) measures the loading speed of the largest content element on a web page, such as an image, video, or block of text. It indicates how long it takes for the user to see the most important content on the page. LCP should occur within 2.5 seconds of when the page first starts loading.

  2. First Input Delay (FID) measures the time between a user's interaction with a website, such as clicking a link or button, and the website's response to that interaction. Pages should have a FID of 100 milliseconds or less.

  3. Cumulative Layout Shift (CLS) measures the visual stability of a web page, by tracking the movement of page elements as the page loads. It reflects how much a page's content shifts around as the page is loading. Pages should maintain a CLS of 0.1. or less.

Why are Core Web Vitals Important?

Core Web Vitals are important because they measure the user experience of a website. When a user visits a website, they expect it to be fast, responsive, and visually stable. If a website fails to meet these expectations, users are likely to become frustrated and abandon the website. This can result in a poor user experience and a high bounce rate, which can negatively impact a website's ranking in search engine results.

It's important to note that while Core Web Vitals are an important aspect of website performance, they are just one piece of the puzzle. It’s important to also consider other factors, such as accessibility, security, and mobile-friendliness, when optimizing the UX of our websites.

How to Optimize Core Web Vitals

Optimizing for Core Web Vitals involves improving the loading speed, interactivity, and visual stability of a website. Here are some tips for optimizing each of the three metrics:

Largest Contentful Paint (LCP)

  • Optimize images and videos: Compress images and videos to reduce their file size, use appropriate file formats, and use lazy loading loading="lazy" to load images and videos only when they are needed.

  • Hint the browser as to which resources are most important via the fetchpriority

  • Use a Content Delivery Network (CDN) to deliver content faster by serving content from servers that are closer to the user's location.

  • Minimize render-blocking resources such as JavaScript and CSS, to ensure that the page loads as quickly as possible.

First Input Delay (FID)

  • Minimize the use of third-party scripts and plugins
  • Use asynchronous JavaScript to improve page responsiveness
  • Reduce JavaScript execution time (Code-split your bundle into multiple chunks)

Cumulative Layout Shift (CLS)

  • Always set width and height attributes for images and videos to ensure that the browser reserves enough space for them, preventing layout shifts.

  • Avoid dynamically injecting content above existing content

  • Use CSS animations instead of JavaScript

In addition to these specific tips, here are some general best practices for improving Core Web Vitals:

  • Use a fast and reliable web hosting service: Ensure that your website is hosted on a server that can handle high traffic and delivers content quickly.
  • Optimize your website for mobile devices: Ensure that your website is mobile-friendly and optimized for different screen sizes and devices.
  • Monitor and measure your website's performance regularly and identify areas that need improvement.

How to Measure Core Web Vitals and identify improvement areas

To measure Core Web Vitals, you can use various tools that provide detailed reports on your website's performance. Here are some tools that you can use:

  • PageSpeed Insights provides specific opportunities for improving page performance.

  • Google Search Console measures your sites’s search traffic and performance.

  • Chrome Dev Tool performance tab provides all page activity during startup or a recorded time period.

  • Lighthouse provides a score for each metric and highlights any issues that need to be addressed.

  • Chrome UX report (CrUX) dashboard is a customizable data visualization tool of the websites’s historical performance built on looker studio.

  • GTmetrix provides a detailed report on your website's performance and highlights any issues that need to be addressed.

Conclusion

Measuring our website's Core Web Vitals can help us identify any issues that need to be addressed with our website's performance, user experience, and search engine ranking. It’s important to measure Core Web Vitals regularly to keep our websites running at their maximum efficiency and to detect any issues early on.

Recommended reading:

Ignacio Villamar

Hey, I'm Ignacio Villamar

Senior Frontend Engineer, living in the NYC metro area.

Follow