Design System

Core Web Vitals

Core Web Vitals

Google uses Core Web Vitals to test site performance, speed, and other factors, broken into the following categories:

  • Largest Contentful Paint (LCP): Measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.)
  • First Input Delay (FID): Measures interactivity. To provide a good user experience, pages should have a FID of less than 100 milliseconds.
  • Cumulative Layout Shift (CLS): Measures visual stability. To provide a good user experience, pages should maintain a CLS of less than 0.1.

How to Test

Read about performing a Core Web Vitals test here: https://support.google.com/webmasters/answer/9205520

How to Debug & Monitor

  • You can check the Chrome inspector Lighthouse tool to generate a report and see suggested improvements. It will guide you through common issues like missing width and height attributes for images, asynchronous and lazy loading, and making sure fonts are set to display: swap.
  • The Web Vitals extension for Chrome can help monitor CLS issues: https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=en
  • Moving everything above the fold or close to it (including service boxes) to Inline CSS is a great way to help with CLS issues!