Chrome Dev Summit is an annual event where experts from Chrome share the highlights about their latest products and their vision for the future of Chrome and the web.
This article contains the top insights from the Chrome Dev Summit 2021.
The most interesting changes announced by the Chrome team include:
- Plans to restrict the amount of information in User-Agents strings,
- Announcement of new support for User Flows in Lighthouse and DevTools,
- Introducing two new performance metrics (candidates for Core Web Vitals), and
- New Responsive Design features.
Privacy Sandbox continues to be one of the key elements of Google’s growing effort to create a more privacy-focused web.
That’s why Chrome aims to create purpose-built APIs that allow you to preserve functionalities (like advertising, fraud detection, or delivering customized content) without the need for third-party cookies.
After ensuring developers have time to adopt the APIs, Chrome will safely phase out support for third-party cookies.
The new technologies and their stages of development can be seen on Privacy Sandbox Timeline.
One of the new solutions launched this year is User-Agent Client Hints (UA-CH).
The User-Agent string contains a lot of information about the user’s device and browser, which can be used for browser fingerprinting.
Chrome aims to fight browser fingerprinting by reducing the default amount of information in the User-Agent string and making it harder to identify the individual users. The information in the string will only contain:
- Browser’s brand and version,
- Information if it’s a desktop or mobile, and
- The platform it’s running on.
Starting April 2022, Chrome will gradually reduce the User-Agent strings.
You’ll still be able to get additional data about your users using the User-Agent Client Hints API, but users will be able to decide how much information they are willing to share.
Performance tooling updates
Chrome announced some exciting changes and new features to measure and analyze web performance. It includes:
- Improving the UI in the PageSpeed Insights,
- Adding support for User Flows in Lighthouse and DevTools,
- Introducing two new experimental metrics.
Changes in the PageSpeed Insights Interface
There’s been an update in the PageSpeed Insights UI making it more intuitive and improving the presentation of data.
The new interface includes a clear distinction between “Lab Data” based on the Lighthouse report and “Field Data” based on real user experiences.
Additionally, a new feature called “Expand View” adds a function to the Field Data section. You can use it to see granular details for Core Web Vitals.
Google also moved the Origin Summary below Field Data. After clicking on it, you can see the aggregated score of all pages from the same origin.
Below the field and lab data sections, you can find additional, helpful information, including:
- Data collection period,
- Visit durations,
- Devices,
- Network connections,
- Sample size,
- Chrome versions.
The changes are also coming to the Core Web Vitals assessment. Instead of a single “passed” or “failed” word, it will be available in a separate subsection.
Lastly, the image of the loading page will be removed from the field section. You will find the image and thumbnails displaying the loading sequence in the lab data section.
Support for User Flows in Lighthouse
The new Lighthouse API allows you to analyze the user flow by simulating link clicks, scrolling, and loading additional pages instead of analyzing the performance of each page separately.
With the new feature, you can better understand the user experience and spot the performance issues throughout the user’s journey on your website.
New Record Panel in the DevTools
The support for analyzing the user flows has also been added directly in the DevTools.
With a newly launched Record Panel in the DevTools, you can now analyze, record, and export the entire user journey on your website.
The new tool lets you view all of the actions users perform on your website, like key presses or link clicks, directly in the Performance panel. This feature aims to help you understand and debug complex interactions easily.
Two new performance metrics
Chrome announced two new performance metrics as potential candidates for Core Web Vitals.
Responsiveness
Responsiveness is meant to capture the overall responsiveness of a page.
We currently use First Input Delay to measure how responsive a page is during loading. FID is a useful metric because responsiveness is particularly volatile when the browser needs to load many resources and the main thread time is in great demand.
But all FID measures is how soon the browser is ready to process a user request. It doesn’t allow you to measure input latency throughout the lifecycle of a given page.
The Chrome team is still conceptualizing the new Responsiveness metric. You can find out more about the challenges of measuring input latency throughout the page lifecycle here.
Smoothness
Smoothness aims to address measuring “stutters” or “freezes” during animation or scrolling. This new metric aims to better understand how often animation frames are dropped and how much it affects the user.
The 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:
The New Responsive
Responsive Design is no longer only about adjusting your website to work well on mobile phones and desktops. It’s much more, and developers need to provide a customized experience for everyone and include user preferences like dark mode or foldable devices.
The changes to the Responsive Design concern CSS features. Some of the new features include new container queries spec, Scroll Timeline, and Accent Color properties.
Size-adjust property for typography
One particularly exciting feature is the size-adjust property for typography. You can use size-adjust to adjust the default font to match the web font that’s about to load.
It’s especially important because it can help you prevent Cumulative Layout Shift by reducing the shift caused by your web font loading.
Dark Mode
Additionally, Chrome is working on a machine-learning-aided auto-dark algorithm feature. It means that the browser can automatically generate a dark theme, with the possibility to opt out of this functionality.
Visit the Chrome Developers page to learn more about Chrome’s new auto-dark feature and test it out on your device.
