Updates from Chrome Dev Summit 2021

Google's 2021 Chrome Dev Summit kicked off last week. In this newsletter we'll look at some of the major announcements especially around performance related tooling and metrics.

Before we get into it though, a quick update on the COP26 website which I wrote about in the last newsletter. After a couple of weeks of nudging and help from a few people within UK Government Digital Services, each page of the COP26 website is now 2.5MB lighter! The team in the UK Cabinet Office helped replace the 3MB footer image identified in my article with a 462kB version, reducing data consumption for each new website visitor.


While working with developers of some JavaScript frameworks to improve their out-of-the-box Core Web Vitals the Google team identified two new metrics overall responsiveness and smoothness.

To simplify, overall responsiveness would be an extension of the First Input Delay (FID). It would look to measure the entire duration of an event (a mouse click for example includes pointerdown, click, and pointerup events) until the next frame is painted in the browser.

The smoothness metric would focus on animations and looks at putting a measure to animation freeze, stutter, and jank.

The links above have more detailed explanations of each proposed metric.

Record user flows in DevTools

Up until now it's been difficult for performance measurement tools to deliver accurate measurements for cached page loads, or user interactions with a page. Most tools are also limited to testing a single page, making it hard to get a true feel for user experience through lab metrics.

The new Recorder tab (experimental in Chrome Canary at the time of writing) changes all this. It makes it possible to record, replay, and measure user interactions and entire user journeys in DevTools. What's more, it allows developers to export a full Puppeteer script which can be used to further probe performance on each step of a user flow.

Here's a walkthrough of the recording process by DebugBear.

User flows in Lighthouse audits

The recorder feature mentioned above ties in with a new "user flows" feature in the Lighthouse auditing tool. Developers can run a Lighthouse audit on the entire exported Puppeteer script. This can help expose layout shifts caused by user interaction, test navigations with a warm cache, and surface possible non-responsive or janky interactions.

Once again, the DebugBear blog has a good walkthrough of this new feature.

A new look for PageSpeed Insights (PSI)

PSI is a great tool for surfacing performance specific data for a page. It's been boosted in recent years by the inclusion of both page and origin level data from the Chrome User Experience Report dataset.

The new redesign will make it easier to differentiate between Field (real world) and Lab (synthetic) data in a PSI test report. It will make it easier to view a page's real Core Web Vitals performance and surface a more detailed breakdown for each metric.

There's a detailed post of all the updates at web.dev.

Articles

Fast and Responsive Hero Videos for Great UX

A thorough post by Simon Hearne looking at a few of the techniques that can be applied to ensure that web page performance doesn't suffer just because there's a hero video present on the page.


The next issue of Optimised will be in your inbox on November 26th. The website has an archive of all previous emails. It's a good place to recap on anything we've covered, and also handy to share with friends or colleagues.

As always if you've got any feedback or specific topics you want to be covered then just reply to this email.

Keep safe, stay well.
Fershad.