Core Web Vitals: A Guide to Google’s Web Performance Metrics

Google wants people to have a good web experience, so it ranks fast sites higher in search results. Of course, that’s a gross simplification but, presuming you’re comparing two sites with similar content and audiences, the faster one should appear higher in results. But how Google measures this has always been a bit of a guessing game, so it introduced Core Web Vitals to provide site owners and developers with some much-needed clarity.

Unfortunately, “performance” is a catch-all term for dozens of metrics…

time to first byte, start render, CPU usage, JavaScript heap size, first contentful paint, first meaningful paint, first CPU idle, DOM loaded, page fully loaded, time to interactive, style recalculations per second, and more.

Different tools return different sets of results and it can be difficult to know where to start.

Google’s Web Vitals initiative aims to simplify performance assessment and help you concentrate on the improvements which matter most. The Core Web Vitals are critical performance metrics which reflect real-world user experiences. Some are reported by the Lighthouse panel in Chrome DevTools, PageSpeed Insights, and the Google Search Console.

The web-vitals JavaScript library can help measure more realistic metrics from real users accessing your site. Results can be posted to Google Analytics or other endpoints for further analysis.

Google advises using the 75th percentile, i.e. record multiple results for the same metric, sort them into order from best to worst, then analyse the figure at the three-quarters point. Three out of four site visitors will therefore experience that level of performance.

The current Core Web Vitals are Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift which assess loading, interactivity, and visual stability accordingly.

Largest Contentful Paint (LCP)

LCP measures loading performance — how quickly content appears.

Historic metrics such as page load and DOMContentLoaded have struggled in this respect because they are not always indicative of the user experience. For example, a splash screen could appear almost instantly but usable content loaded by further Ajax requests could take much longer to appear.

Largest Contentful Paint (LCP) reports the render time of the largest image or text block visible within the viewport. A time under 2.5 seconds is considered good and anything above 4.0 seconds is considered poor.

The element types considered in LCP are:

Continue reading Core Web Vitals: A Guide to Google’s Web Performance Metrics on SitePoint.