During the "Speed at Scale"
talk at Google
I/O 2019, we announced three things that we hope will improve web performance
over the coming year.
Lighthouse now supports Performance Budgeting #
is a new feature in Lighthouse that adds support for performance
budgets. Performance budgets establish
standards for the performance of your site. More importantly, they make it is
easy to identify and fix performance regressions before they ship.
LightWallet is available in the newest version of the Lighthouse CLI and only
takes a couple minutes to set up. These
provide more information.
Unsure what your budgets should be? Try our experimental Performance Budget
Calculator which can generate a
LightWallet compatible budget configuration.
Native image and iframe lazy-loading comes to the web #
Web pages often contain a large number of images, which contribute to
data-usage, page-bloat and
slower page loads. Many of these images are offscreen, requiring a user to
scroll in order to view them.
library but that may soon change. This summer, Chrome will be launching support
for the loading attribute which
<iframe> lazy-loading to the web.
loading attribute allows a browser to defer loading offscreen images and
iframes until users scroll near them.
loading supports three values:
lazy: is a good candidate for lazy loading.
eager: is not a good candidate for lazy loading. Load right away.
auto: browser will determine whether or not to lazily load.
<img src="io2019.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>
The exact heuristics for "when the user scrolls near" is left up to the
browser. In general, our hope is that browsers will start fetching deferred
images and iframe content a little before it comes into the viewport.
loading attribute is implemented behind flags in Chrome Canary. You can
try out this demo in Chrome
75+ with the
chrome://flags/#enable-lazy-frame-loading flags turned on.
A write-up on the native
lazy-loading feature is available with more details.
Google Fonts now supports font-display as a query parameter #
font-display descriptor lets you decide how your web fonts will render or
fallback, depending on how long it takes for them to load. It supports a number
of values including
Previously, the only way to specify
font-display for web fonts from Google Fonts was to self-host them but this change removes the need to do so.
The Google Fonts
has been updated to include
font-display in the default code embeds (as seem
below). We hope this will encourage more developers to try out this exciting
Watch for more #
Our talk also covered several production case studies of using advanced
performance patterns to improve user-experience. These included sites
leveraging image CDNs, Brotli
talk to learn