Performance tooling and platform updates from Google I/O 2019

Google used its "Speed at Scale" session at I/O 2019 to ship three performance-related features aimed at developers: an extension to Lighthouse for performance budgets, native lazy loading for images and iframes in Chrome, and font-display support for the Google Fonts service.

Performance budgets reach Lighthouse

LightWallet, now part of the latest Lighthouse CLI release, adds performance budget checks to the tool. A performance budget sets concrete limits on metrics such as page weight or load time; LightWallet can fail a build when those limits are exceeded, which makes regressions visible before they reach production rather than after the fact. Setup takes a few minutes, and the Lighthouse documentation walks through the process.

If you do not have budget numbers in mind yet, Google's experimental Performance Budget Calculator can generate a configuration file that is compatible with LightWallet.

Chrome plans native lazy loading via the loading attribute

Large pages full of images are a major contributor to data usage, page bloat, and slower load times. Many of those images sit below the fold and require scrolling before the user ever sees them. Until now, lazy loading required a JavaScript library, but Chrome is scheduled to ship the standardized loading attribute this summer for both <img> and <iframe> elements.

The attribute lets the browser defer fetching offscreen resources until the user scrolls close to them. Three values are supported:

  • lazy: the resource is a good candidate for deferred loading.
  • eager: the resource is not a good candidate and should load immediately.
  • auto: the browser decides whether to defer loading.

The browser defines the exact timing for when to start fetching deferred content. The expectation is that images and frames will begin loading just before they enter the viewport, avoiding a visible wait during the scroll. The feature is currently behind flags in Chrome Canary, available with about://flags/#enable-lazy-image-loading and about://flags/#enable-lazy-frame-loading enabled.

Google Fonts adds a font-display query parameter

Google Fonts now supports the font-display descriptor in production through a query-string parameter passed to the stylesheet URL. The descriptor controls how fonts behave while they load—whether text renders in a fallback face immediately or waits for the webfont. Valid values are auto, block, swap, fallback, and optional.

Previously, specifying font-display for Google-hosted fonts meant self-hosting the font files. With this change, developers can control font rendering behavior without giving up the convenience of the hosted service. Google has also updated the default code embeds in the Fonts documentation to include the new parameter, in the hope that broader exposure will increase adoption of the feature.

A Glitch demo shows font-display running with multiple font families; testing it under DevTools network throttling demonstrates the visual impact of font-display: swap on page rendering.