Want more? Subscribe to my free newsletter:

Introducing the Web Vitals Chrome Extension

May 29, 2020

Web Vitals extension displaying Largest Contentful Paint, First Input Delay and Cumulative Layout Shift

The new Web Vitals Chrome extension measures metrics for a healthy user-experience on the web. It's now available to install from the Chrome Web Store.

Chrome's Web Vitals initiative provides unified guidance about quality signals that are essential for all sites to deliver a great user experience. These signals include:

Core Web Vitals metrics and their thresholds as captured in web.dev/vitals

The extension supports all of the Core Web Vitals and leverages the web-vitals library under the hood. The extension measures metrics in a way that matches how they're measured by Chrome and reported to other Google tools (e.g. Chrome User Experience Report, Page Speed Insights, Search Console).

Usage

Ambient badge

The Ambient Badge helps check if a page passing the Core Web Vitals thresholds.

Once installed, the extension will display a disabled state badge icon until you navigate to a URL. At this point it will update the badge to green or red depending on whether the URL passes the Core Web Vitals metrics thresholds.

The badge has a number of states:

  • Disabled - gray
  • Passing - green
  • One or more metrics failing - red

If one or more metrics are failing, the badge will animate the values of these metrics.

Detailed drill-down

Clicking the Ambient badge icon will allow you to drill in to the individual metric values. In this mode, the extension will also say if a metric value might change or requires a user action.

For example, First Input Delay requires a real interaction (e.g click/tap) with the page and will be in a waiting for input state until this is the case. We recommend consulting the web.dev documentation for LCP, CLS and FID to get an understanding of when metric values settle.

In a future release, the drill-down will also include aggregate field performance data from PageSpeed Insights and the Chrome User Experience Report.

Overlay

The overlay displays a Heads up display (HUD) which overlays your page. It is useful if you need a persistent view of your Core Web Vitals metrics during development. To enable the overlay:

  • Right-click on the Ambient badge and go to Options.
  • Check Display HUD overlay and click 'Save'
  • Reload the tab for the URL you wish to test. The overlay should now be present.

FAQ

Who is the primary audience for this extension?

The primary audience for this extension is developers who would like instant feedback on how their pages are doing on the Core Web Vitals metrics during development on a desktop machine.

How should I interpret the metrics numbers reported by this tool?

This extension reports metrics for your desktop or laptop machine. In many cases this hardware will be significantly faster than that of the median mobile phone your users may have. For this reason, it is strongly recommended that you test using tools like Lighthouse and on real mobile hardware (e.g via WebPageTest) to ensure all your users there have a positive experience.

What actions can I take to improve my Core Web Vitals?

We are making available a set of guides for optimizing each of the Core Web Vitals metrics if you find your page is not passing a particular threshold:

Lighthouse 6.0 also includes additional actionability audits for these metrics. It answers questions like:

  • What element was identified as the Largest Contentful Paint?
  • What elements experienced a shift and contributed to Cumulative Layout Shift?

We envision users will use the extension for instant feedback on metrics (for their desktop machine) but will then go and do a Lighthouse audit for (1) a diagnostic view of how these metrics look on a median mobile device and (2) specifically what you can do to improve.

Developer notes

During the course of writing this extension, I discovered quite a few interesting nuances about providing a real-time view of metrics for a page.

For starters, pages with a lot of web animation (e.g without CSS transform) would cause frequent changes to the Cumulative Layout Shift (CLS) metric. This meant that we would update the Web Vitals extension badge almost frantically, causing spikes in CPU usage.

To eswage these concerns, I added throttling to CLS badging so that even if a page had a higher-than-average level of shifts, the extension could still function without causing a drain on system resources. We had investigated adding more heuristics to improve performance (such as checking if a tab was backgrounded), but discovered that Page Visibility events did not appear to consistently fire within the Chrome extension context.

Some of the other interesting challenges we ran into were around Overlay mode. I chose to reuse Lighthouse's CSS design system for styling the Web Vitals extension pop-up. These styles were semi-scoped using classnames, but weren't designed to be injected carte-blanche into other pages from an extension. This meant we (unsurprisingly) ran into style scoping issues which would cause pages to subtly change appearance when they had Lighthouse styles added to them for the overlay. I considered using Shadow DOM to address this, but ended up opting for a per-rule CSS prefix given time constraints.

Perhaps the trickiest part of working on this extension was the lack of good Chrome extension documentation for developers. Yes, I work on Chrome. We run into these challenges too... :) The official API documentation is fine for learning the basics of what methods are supported, but for any real-world patterns you're often left to dig around Stack Overflow or consult how other extensions approach similar problems.

Rest assured, I'll be chasing up some areas for improvement here so that other developers hopefully have a lower-friction experience in the future.

Further reading