Chrome Dev Summit is an annual event where engineers, industry leaders, and developers share the latest tools and updates coming to the Google Chrome browser and discuss the future of the web.
A few days after this year’s conference, we’re here to do a quick recap on the most exciting announcements in terms of web performance, including:
We’ll wrap this up by sharing our thoughts on the upcoming updates and our plans on NitroPack’s development based on the latest announcements.
Let’s dive right into it!
New Core Web Vitals Metrics
Probably the biggest announcement of the event (for us at NitroPack) was that two new Core Web Vitals metrics are in the pipeline. Here’s what Rachel Andrew from the web.dev team shared:
“We've been working with the developers of popular JavaScript frameworks to improve Core Web Vitals, and as part of that work have identified two new metrics that we'd love your feedback on.”
The two new metrics which are currently in development are Smoothness and Responsiveness.
Source: Chrome Dev Summit 2021 | Keynote: What's new in Chrome
Smoothness
Smoothness is meant to measure the scrolling and animation smoothness of a page.
“The Web Vitals initiative aims to provide metric and guidance for building great user experiences on the web. Lab-based metrics like Total Blocking Time (TBT) and Time to Interactive (TTI) are vital for catching and diagnosing potential interactivity issues. We are planning to design a similar lab-based metric for animation smoothness.”
This new metric aims to better understand how often users experience pages that “stutter” and “freeze” due to dropped animation frames, how severe it is, and what is the overall impact.
However, the metric won’t focus entirely on counting frames:
“Because frames may be partially presented, and because even fully skipped frame updates may not actually affect smoothness, we want to focus less on just counting frames and more on the extent to which the browser is unable to provide visually complete updates when it mattered.”
In fact, the dev team behind the project wants to reshape the mental model entirely and move it from “frames per second” to “detecting missing and important animation updates” to “percentage dropped over a given time period.”
To achieve that, a proposed Percent Dropped Frames metric would calculate the number of dropped frames and present an average score which is supposed to reflect how smooth the animation is from the user’s perspective:
“What matters is: the proportion of time waiting for important updates. We think this matches the natural way users experience the smoothness of web content in practice. So far, we have been using the following as an initial set of metrics:
-
Average Percent Dropped: for all non-idle animation frames throughout the whole timeline
-
Worst Case of Percent Dropped Frames: as measured over 1 second sliding windows of time.
-
95th percentile of Percent Dropped Frames: as measured over 1 second sliding windows of time.”
Responsiveness
Responsiveness is the second upcoming metric, and it is meant to capture the end-to-end latency of individual events and the overall responsiveness of a page throughout its lifetime.
While the First Input Delay (FID) metric captures the delay portion of input latency, Responsiveness will capture the full event duration and interactions:
“With this new metric, we plan to expand that to capture the full event duration, from initial user input until the next frame is painted after all the event handlers have run. We also plan to measure interactions rather than individual events.”
The Chrome dev team is still exploring different approaches to measure the total interaction latency from a group of individual event durations and then defining an aggregate score for a page visit:
“We're currently collecting real-user data in Chrome. We plan to publish the results of our findings once we've had time to collect sufficient data, but we're also looking for direct feedback from site owners as to which strategy would most accurately reflect the interaction patterns on their pages.”
The upcoming Core Web Vitals metrics weren’t the only stars of this year’s conference.
Chrome’s team shared some exciting news about improving their performance tools.
PageSpeed Insights UI redesign
There is no doubt that PageSpeed Insights (PSI) is the place to go when you want to find out more about your site’s performance.
However, the PSI code base is ten years old, and the time for a complete revamp has finally come.
Before proceeding with the PSI’s redesign, let’s take a look at how Google’s tool looked:
Source: web.dev
“As seen in the screenshot above, the different data points from lab and field data are not isolated clearly, and developers who are new to PSI may not easily understand the context of the data and what to do next. This confusion has resulted in many "How to" blog posts on deciphering the PSI report.”
With the PSI UI redesign, all of the above-mentioned concerns are addressed.
Here’s what’s new:
Clear separation between lab and field data
Several major changes were made to the way lab, and field data are displayed in PSI:
- The field data section is moved to the top of the page;
- The lab-based performance score has been moved down to the lab data section;
- Labels for "Field Data" and "Lab data" have been replaced with text that indicates what the data means and how it can help;
- The image and thumbnails of the page displaying the loading sequence will both be available in the lab data section.
Source: web.dev
Source: web.dev
Labels for mobile and desktop performance
“We changed the navigation menu at the top and included links for mobile and desktop centrally on the report page. The links are now easily visible and distinctly indicate the platform for which the data is being shown. Doing this also helped make the navigation bar cleaner.”
Source: web.dev
New position for the Origin Summary
The Origin Summary, which provides the aggregated CrUX score for all pages from the origin, previously appeared on click of a checkbox:
In the new design, the Origin Summary appears in a separate tab, under the “Field Data” section:
Source: web.dev
Additional Information
Additional helpful information is now displayed under the field data metrics to help users better understand the difference between lab and field data:
Source: web.dev
Expand view
A “Expand view” feature was added to the new PSI that will allow website owners to view granular details for the Core Web Vitals metrics:
Source: web.dev
User Flow API in Lighthouse
The new Lighthouse API allows lab testing at any point within a page's lifespan. This means that you will be able to analyze the user flow by simulating scrolling, clicks, and loading of other pages instead of your pages being assessed only during loading.
Furthermore, the User Flow API will make it easier to diagnose performance issues within the user journey and get suggestions for improvement.
Source: web.dev
“Lighthouse will be able to distinguish and provide separate reports for page navigation, any user interactions that occurred during a given time span, and snapshots to represent a captured state of a page.” - Houssein Djirdeh.
The support for analyzing user flows has been added to DevTools as well.
With the newly added Recorder Panel in DevTools, you will be able to record the entire user journey on your website. Furthermore, you can easily view and analyze all visitors’ actions like navigations, key presses, and link clicks directly in the panel.
Additionally, the newest DevTools feature can be replayed, downloaded, and measured in the Performance panel.
Source: web.dev
Our Take on Google’s Latest Announcements
There isn’t a better way to summarize what we think about this year’s Dev Summit than quoting our Chief Engineer:
The upcoming Core Web Vitals metrics, measuring the animation/scrolling smoothness and the overall responsiveness of a page throughout its lifetime, are aspects that we’ve been working on for the last couple of months and testing with our Speed Insiders.
Bringing the Smoothness and Responsiveness metrics to life will only show the real-world impact of our work.
We’re excited about PageSpeed Insights' UI redesign and the new User Flow API as well.
The revamped PSI is a really big step forward in terms of helping users better understand the difference between Lab data and Field data, how they are calculated, and why Field data is the one worth focusing on. It's definitely an upgrade that we love to see as we're strongly advocating for the importance of real-world data.
As far as the User Flow API is concerned, It will make the process of identifying and debugging issues easier. Until now, we had to run tests manually, but with the release of this API, we’ll be able to automate the process, save time, and relocate our resources to developing and upgrading NitroPack’s features.
Overall, Chrome’s Dev Summit ‘21 gave proof that we’re moving in the right direction, and we’re thrilled about the future.
In the following months, we’ll share behind-the-scenes data of how NitroPack performs against the upcoming Core Web Vitals metrics.
Keep an eye on our blog or subscribe to our newsletter (available to existing NitroPack customers only for now) to be sure you’re not going to miss anything!
