As websites become more sophisticated and immersive, web performance continues to be a leading indicator of user satisfaction and task completion, such as completing an online order. To provide an objective, accurate assessment of web performance, Google introduced Core Web Vitals in 2020. And in the years since, third-party tools (e.g., BrowserStack’s Speedlab and infrastructure providers (e.g., Vercel’s Speed Insights) have updated their offerings to use these metrics to provide product teams a benchmark for continuous improvement. Core Web Vitals encompasses three metrics—loading time, interactivity, and visual stability—that correspond to real-world user perceptions.

Loading time, as measured by Largest Contentful Paint (LCP), reflects how much time passes between when a user requests a page and when the largest element in the viewport becomes visible. All web users have been frustrated by loading a website only to be met with a blank white screen with a spinning indicator or a product detail page where everything has loaded except for the product image. To optimize your site’s loading time, serve page responses quickly, such as by deploying a content delivery network (CDN), and ensure the page markup prioritizes rendering the primary content.

Interactivity, as measured by First Input Delay (FID), reflects how much time it takes for your website to become responsive to user events like selecting form elements or clicking buttons after the initial elements have been drawn on screen. Think of a time when a webpage has loaded but a newsletter-subscription modal has appeared on top and clicking the close button does nothing. To optimize for interactivity, you need to ensure the main thread is ready for work by using techniques like asynchronously loading vendor scripts.

While Core Web Vitals may seem intimidating and needlessly complex, they constitute the most accurate measurement of modern web application performance.

Visual stability, as measured by Cumulative Layout Shift (CLS), reflects the magnitude of unexpected layout shifting during the lifespan of the page. Large images and slow ads often shift the page contents below them, making the page difficult to read and navigate. To optimize for visual stability, reserve space for page content by implementing aspect ratios in your markup.

Measuring web vitals varies. Loading time and visual stability scores are available through Chrome’s Lighthouse tool, among many others, but interactivity times require user interaction to be measured and cannot be simulated. The most accurate method of scoring performance is to sample a subset of your users, which is possible in modern browsers using the PerformanceObserver API. You can then track these metrics over time using application health and business intelligence tools.

While Core Web Vitals may seem intimidating and needlessly complex, they constitute the most accurate measurement of modern web application performance. Luckily, modern tools and APIs make it easy to measure them, and they are an accurate reflection of users’ perception of your website’s speed.

All web users have been frustrated by loading a website only to be met with a blank white screen with a spinning indicator...

At Kettle, we account for performance testing in our QA process, deputize individual developers to explore improvements, and apply modern infrastructure strategies to maximize end user performance. The technology and creative teams also work together to discuss optimization patterns as they impact the visual presentation. We make the effort because we’ve found that investing the time upfront—with happy clients and happy users—is worth it.