Chrome开发者峰会2021 | 主题演讲：Chrome的新功能

[0:24] Hello, and welcome to a very virtual Chrome Dev Summit 2021. I’m Ben, and in the next few minutes, my colleagues and I, along with a few guests, will share some of the highlights of our work over the past year to improve the web. In 2008, Chrome launched a vision the web could be more than just rich documents, that it could enable fast, safe and powerful applications across devices available instantly with just the click of a link. This vision of the web has become more relevant than ever during the pandemic, as people around the world realize how powerful the web platform has become, and look increasingly to the web and their browser to get things done every day.

[1:07] And the web's continued success is only possible because it's continued to evolve through the years, adapting as technology advances and as people’s expectations shift. As we at Google help evolve the web, we strive for transparency and openness in all that we do, collaborating closely with developers, users, and the rest of the ecosystem. Now, this theme of web evolution is the central one for this video, and we’re gonna highlight a number of examples that represent the web's continual progress.

[1:43] One of the most important of these themes comes from feedback we consistently receive from web developers, both via surveys and individual conversations, and this theme is the importance of cross-browser compatibility. Now, of course, this theme isn’t new, and through the years, the Chrome team has joined with others on various initiatives to help. Recent examples include the Web Platform Test Project, which is a comprehensive cross-browser test suite for new web platform features, hosted on GitHub, and the Open Web Docs initiative that brings together a large coalition to collaboratively contribute to the web platform documentation that’s hosted on Mozilla’s Developer Network.

[2:25] This year, we’ve added a new initiative to the list, a cross-browser effort called Compat 2021 that’s focused on improving compatibility in five key areas of the web, all related, shockingly, to CSS. To measure our progress, the Compat 2021 team was able to use the aforementioned Web Platform Test project to quantify compatibility scores for these areas across the latest development builds of Chrome, Edge, Firefox, and Safari.

[2:58] Now, while we’re not done yet, we’ve already seen significant improvement since March, and we’ll keep pushing to make the web much more compatible in these and other critical areas. Another area in which the web is evolving is privacy, as we seek to curtail third-party tracking practices while preserving important and critical capabilities that enable a vibrant, global web ecosystem. To tell us more, I’d like to introduce my colleague Barb. Thank you, Ben.

[3:30] We believe it’s important for people to be in control of their information, including their online activity. Most users believe it’s important too, with privacy concerns increasingly driving choices about what people do online. We also see regulations around the world stepping up privacy requirements rapidly. And, yet, it’s difficult for developers to meet growing expectations for privacy, when so many capabilities rely on third-party cookies and other cross-site tracking mechanisms that weren’t designed with privacy in mind.

[4:07] We need new technologies for a modern, privacy-focused web, and that’s what the Privacy Sandbox is about. We’re working with the web community and industry stakeholders to develop new privacy-preserving technologies that can support a healthy, sustainable ecosystem. This includes purpose-built APIs to support advertising, which is a critical part of the ecosystem and funds much of the web's content, as well as many other capabilities that modern sites need, like fraud detection, identity, or content that’s customized to a user’s device.

[4:46] Now, let’s take a minute to clarify what we mean by purpose-built APIs. Many of the use cases that I just mentioned were never really built into the web platform but layered over it using general purpose technologies like third-party cookies. The browser has no way to tell whether you’re using third-party cookies for something helpful, like providing a customized experience or keeping a user logged in, or for cross-site tracking. By designing APIs for each specific use case, we can ensure appropriate privacy protections, give people more useful controls, and ideally, make each API better at what it does over time.

[5:26] Once these new APIs are in place, we’ll make sure that developers have time to adopt them, so that we can safely phase out support for third-party cookies in Chrome while continuing our work to mitigate other types of tracking so cross-site tracking doesn’t simply shift from third-party cookies to covert methods. To make this complex project easier to follow, we’re sharing progress in two places. privacysandbox.com explains the vision, goals, and concepts behind this initiative.

[5:57] It also includes a high-level timeline that we’re updating every month. The timeline links to each technology we’re working to test and launch, and lays out a stage plan for phasing out third-party cookies in Chrome. The second resource is the Privacy Sandbox section at developer.chrome.com. Here, you’ll find more technical detail and implementation guidance, including a blog with the latest updates for developers. We've just added a post with all the links and updates from this session.

[6:29] Now, we talk a lot about the importance of collaboration in this project, and I’d like to show you what that looks like at each stage of development. I'll mention some APIs as examples, but the broader idea is to illustrate how ecosystem involvement is shaping this work. This process will be familiar to many of you in the web development community, but the Privacy Sandbox is bringing a lot of newcomers to this process, including industry stakeholders who will use these purpose-built APIs and whose expertise is critical in their development.

[7:06] The first stage of the process is discussion, where anyone can propose and weigh in on ideas for new technologies. There have been dozens of privacy-preserving proposals offered by Chrome and others over the last couple of years. They’re all online, so you can read them, ask questions, offer ideas to improve them and see what others are saying. To find live conversations where all of the proposed solutions are being discussed and debated together, there are a number of W3C groups that you can join or monitor, depending on the types of use cases you’re interested in.

[7:40] Here’s one example to illustrate how involved this discussion stage can get. FLEDGE is a proposal to support interest-based advertising without cross-site tracking. With valuable input from privacy advocates and many industry stakeholders, FLEDGE has evolved from two previous proposals, with more than 100 organizations joining W3C meetings to help refine the current version and over 200 online discussion threads. There have also been more than half a dozen other proposals in the same solution space.

[8:12] Through continued incubation, we hope we’ll reach consensus on a path forward, and at the same time, we’re starting developer testing for the initial version of FLEDGE behind a flag in Chrome so that developers can get their hands on it. Not all of these proposals will go through such an intense incubation period. Some will move much more quickly, but there’s a lot of innovation happening here. These are new ideas, and it can take a lot of work to get them right. The next stage is testing. There are already a handful of proposals ready for developer testing today, and you can expect more as we head into 2022.

[8:49] And don’t be surprised to see some iterative cycles of discussion and testing. Testing is important precisely because it surfaces issues or gaps that may require more work. Testing in Chrome usually starts with a feature behind a flag for developers to test locally. This means you need to turn it on in your browser to try it out. This code is often very fresh, so you can expect to find some issues. And then Origin Trials, each running for a limited time with a limited population of Chrome users.

[9:21] Origin Trials are public and open to all developers. You just need to register to opt-in your site or service. This is when we get actionable feedback from developers on what works, what doesn’t, and where those gaps are. Success at this stage depends not only on developers doing hands-on testing, but on their being willing to share what they learn. For example, Yahoo! Japan recently published a detailed analysis of their test of the Attribution Reporting API, highlighting areas for improvement, like the need for a better way to deliver conversion reports, which has now been added.

[9:59] These are the sorts of things that turn up once developers get their hands on an API. We also hope to see companies talking about their approach to testing and how they expect to use an API. During the Origin Trial for the first version of FLoC, a proposal to support interest-based advertising and content, we were pleased to see companies like CafeMedia publishing their analysis and insights so that others could see what they’d learned. And Chrome tests aren’t the only way to explore how new technologies might work.

[10:30] Some companies are also building simulations based on Privacy Sandbox concepts. Advertising platform Criteo recently ran a competition with more than 150 teams testing different machine learning models to evaluate how differential privacy concepts such as noise insertion and aggregation might impact advertising performance. It’s helpful to examine these concepts since they underlie several of the Privacy Sandbox APIs. We are truly appreciative of the companies investing their time to test these new technologies, and of their being willing to share their perspectives and learnings publicly.

[11:09] Now, once an API is tested and ready for general use in Chrome, we'll announce the launch and make sure public documentation is ready for scaled adoption. User-Agent Client Hints, or UA-CH, launched in Chrome earlier this year and is now ready to scale. It's part of the Privacy Sandbox workstream to reduce covert tracking, such as browser fingerprinting. But first, let’s back up and take a look at the legacy mechanism it’s replacing. Like cookies, the User-Agent string is an early web feature.

[11:43] By default, it provides a lot of information about the user's browser and device, making it a readily available surface for fingerprinting. It also has a format that can be a headache to parse. We recently announced plans to reduce the granularity of information available in Chrome’s User-Agent string starting in April of 2022. To get that information in the future, you’ll need to transition to User-Agent Client Hints. It'll give you some information by default, which may cover most of your use cases, with more detailed information on request in a straightforward format.

[12:18] We were happy to make this ergonomic improvement for developers, while at the same time moving the majority of User-Agent information from an available by default model to an on request model. That way, you can request only the information you need, which is good practice today and the pattern we want to set for the future. So let's go back to the timeline I showed you a moment ago. Gradual UA string reduction starts in April of 2022. The replacement solution, User-Agent Client Hints, has been launched and ready for scaled adoption since March.

[12:54] So you can begin testing and migrating to it any time now. To help with that, there’s an Origin Trial to opt in to the reduced UA string early, so that you can see what that future state will look like. And if it turns out that you need more time, you’ll be able to opt in to keep using the User-Agent string as-is through March 2023. The details of this plan are all online, and while the scaled adoption stage might not look exactly like this for other APIs, you can expect to see consistency in the overall approach.

[13:31] We’ll continue to explain what’s happening, provide as much visibility as we can, encourage your involvement and hear your input. We appreciate all contributions to this complex and vitally important project as we seek to create durable web features with broad utility and strong privacy protections for users. It’s worth this effort to get the foundations right. And Ben, I will hand it back to you. Thanks, Barb.

[14:02] The Privacy Sandbox is one of the largest efforts we’ve seen to evolve the web. We believe that it’s critically important to help ensure the web’s continued health and success for decades to come. The next theme we’ll highlight is web capabilities. Over the past several years, the web’s gained a number of powerful new integrations that enable web apps to do more. We’ve been heavily involved in this with the Fugu Project, collaborating with others in the ecosystem to unlock things like secure file system access and rich integration with operating system launchers.

[14:37] And as the web has gained these new capabilities, developers have embraced them in compelling ways. To tell us more, I’d like to introduce my colleague Aanchal. Thanks, Ben. Before we dive in, take a couple of seconds to look around you. No, really. Look closely at your surroundings. Most of you are probably at home right now, a place that, in the last couple of years, has transformed into a buzzing, tech-driven hub.

[15:08] Our kids have turned the dining room into a virtual classroom, we’ve turned the kitchen into our office, and we’re all connecting with family and friends in living rooms around the world. The pivot to virtual has had profound impact on how we live and work. In particular, it’s the world of video and creation that has seen a powerful shift in norms. From casual creators to professional designers, there’s real-time editing, sharing and collaboration, but it’s entirely virtual.

[15:39] Hosting and attending video conference calls from some part of the house is now a regular part of our day, and let’s be honest, we’ve been streaming and binge-watching more content than we ever thought possible. Our team has worked hard to unlock new powers for the web, whether you’re taking your existing experience to the next level, or building something that’s cutting edge and never been done before. We’re inspired and grateful to see how our partners around the world are building web experiences that enable creativity, expression, communication, entertainment and so much more.

[16:14] One example is Kapwing. Kapwing is a collaborative video editor with more than three million monthly active users processing 100,000 videos a day. To tell you more, I’d like to invite a special guest, Josh Grossberg. Hi, I’m Josh, CTO at Kapwing. Kapwing is a web-based collaborative video editor designed mainly for casual creatives like game streamers, musicians, YouTube creators and memers. We’re also a go-to resource for business owners who need an easy way to produce their own social content, like Facebook and Instagram ads.

[16:48] People usually discover us by searching for a specific task, like “how to trim a video,” “add music to my video,” or “resize a video.” Kapwing lets users instantly do what they search for with one click. There's no added friction by making them navigate to an app store to download an app. The web makes it simpler for people to search for precisely what they need help with, and then do it. The fact that we pay $0 in paid acquisition is a testament to how well this strategy has worked. And, after that first click, they can do a whole lot more.

[17:18] They can explore free templates, add new layers of free stock videos, insert subtitles and transcribe videos, and upload background music. Also, it’s simple for users to collaborate on Kapwing with friends and colleagues, regardless of their device or operating system. Just click “Share,” get a share link and send it to your collaborator. All they have to do is click the link and they are editing with you. And, because supporting different devices and OSs takes minimal work on the web, it’s the ideal environment to enable this level of collaboration.

[17:51] Editing videos in Kapwing works easily and seamlessly in all modern browsers. High-performance editing requires all of our users’ content to live on the client, avoiding the network whenever possible. For that, we use IndexedDB. Web sockets enables real-time collaboration users expect in modern web apps. To generate waveforms and allow users to splice together audio in exactly the right place, we use the Web Audio API. The Media Recorder API allows users to simultaneously record their webcam and screen, perfect for catching facial expressions when creating screencasts, Web Workers allow us to offload computationally intensive work, removing the background from videos without affecting the performance of the main thread.

[18:35] And, of course, we’ve built Kapwing as a PWA, so once users have found it from search, it’s installable, and coming back to it is as easy as launching it from their desktop. In the future we’re excited to use Web Codecs to accelerate our frame drawings, use WebGL to enable more sophisticated animations, and use Media Source Extensions to have more seamless transitions from clip to clip. None of these APIs are brand new, but when combined together, they make it a lot easier for our users to collaborate with each other and quickly bring their ideas to life.

[19:09] For us, the web gives us a streamlined way to reach and engage more users. Back to you, Aanchal. Thanks, Josh. If you’re looking to create a serious meme, you know where to go. I highly recommend trying out Kapwing. It’s really easy to use. And now onto a web feature we’re all more than familiar with: Video Conferencing. It’ll be hard to find someone who hasn’t clicked on a Zoom meeting in the last two years. In 2020, Zoom saw a huge influx of people using its web app to chat and connect online for virtual happy hours, group workshops, online webinars, you name it.

[19:48] Zoom took this opportunity to improve their web experience with a PWA, and to provide a more comparable experience to their native apps. It was also a chance for Zoom to offer its millions of Chrome OS users a powerful alternative to their Chrome app. They’re using the new WebCodecs API for video encoding and decoding, which improves the performance and enhances the user experience with fast, clean video. Link capturing ensures that when a user clicks on a link to a Zoom meeting in their email, it opens in the PWA and not in a browser tab.

[20:25] And, for Chrome OS users, managed configurations allow enterprises to easily install the PWA across the workforce. Just one month after launching the PWA, Zoom saw 16.9 million new users join web meetings, which amounts to an increase of seven million year-over-year. With developments in WebRTC and Fugu APIs, audio and video call experiences previously not possible are now available. Apple has brought FaceTime links to the web for Android and Windows users so people can join a FaceTime call from their web browser.

[21:02] And we have the Google Meet PWA to thank for this keynote. We collaborated and created everything you see today on several Google Meet web calls, and I mean several, then produced it remotely in a studio, and you’re most likely watching it on YouTube at home. The Meet team shipped custom backgrounds and light adjustments in their PWA using WASM SIMD and WebGL. This has drastically improved the speed as well as the video and audio quality. And better video and audio aren’t all work and no play.

[21:36] The world of entertainment and social media is thriving on the web. YouTube Premium is a paid subscription enabling members to watch YouTube ad-free, play videos in the background and download videos to watch offline. Watching videos offline on laptops and hybrid devices was one of the top requested features from YouTube Premium users. To make this possible, they added everything necessary to turn their site into an installable PWA. For the offline experience, they use a combination of service workers, cache storage, and IndexedDB.

[22:11] Of course, the team focused on more than just the offline experience. For example, they use the Web Share APIs so users can share links to videos with other installed apps on the device, and navigation preload to increase service worker performance. They're running an experiment to enable YouTube Premium users to download videos that can be watched offline on Chrome, Edge or Opera. They’re looking forward to delighting Premium users with the new feature soon. I can’t talk about social and entertainment without mentioning short-form videos.

[22:46] That's where TikTok is leading the way. TikTok views the web as a channel to acquire more users, keep them happy, and they focused on creating a multi-form-factor, frictionless experience. They’ve optimized the performance of their web app using Workbox to prefetch videos to reduce any lag as users transition between videos. They’ve also expanded the PWA to desktop, leaning in on the web superpower of building just once and making TikTok available and accessible on any device.

[23:19] With these improvements across mobile and desktop, TikTok has seen the traffic from search has improved by 10x. As you can see, web on desktop has seen path-breaking innovation in the last years. Users now have access to complex creativity and productivity tools that are enabling instant expression and collaboration. There’s a powerful web app for every use case whether you’re learning something new, talking to your boss, or simply creating something beautiful.

[23:51] And that brings us to some exciting news that I'm thrilled to share with you. After nearly three years of an ongoing strong partnership with Adobe, many flagship apps in the Adobe Creative Cloud Suite are soon coming to the web. Bringing advanced features and capabilities to the platform would be incomplete without real use by companies like Adobe that are pushing the edge of what’s possible. We believe these collaborations benefit all developers, opening up new opportunities to create incredible experiences for their users.

[24:24] And now I’d like to welcome another special guest, Pam Clark, VP of Product Management and Strategy for Adobe Photoshop, to tell us more about these launches. Hello, everyone. I’m excited to be here with you at Chrome Dev Summit. At Adobe, we believe creativity and collaboration go hand in hand, and over the past year, we’ve made lots of advancements to products like Photoshop to support the kinds of mobile and collaborative workflows our customers want.

[24:57] For instance, you can now store PSDs in the cloud, so you can work on a single document across all of your devices. You can also create and share links to those PSDs in the cloud. You can co-edit them with your collaborators and share them on the web for review and comment. We are committed to helping people create and work together, no matter how they want to work, which is why at Adobe MAX last week, we shared a vision for the next evolution of Creative Cloud, one that is as much about connecting with each other as it is about creative tools.

[25:31] For decades, you could only use Photoshop on a computer, a powerful computer at that. Then Photoshop went mobile on the iPad, and now we’re making Photoshop accessible in a web browser via a Public Beta. Thanks to the close collaboration with the Chrome and Web Platform Team at Google, Adobe is able to bring Photoshop magic to millions more people around the globe. The Photoshop on Web Beta allows you to access review and comment workflows and test out some Photoshop editing features we are piloting.

[26:06] Your collaborators will also be able to open and view your work in the browser, provide feedback, and make basic edits, all in one place, without having to download or launch the Photoshop application on the desktop or iPad. The collaboration between Adobe, Google, and within the standards bodies helped bring the functionality needed for Photoshop into the browser. Web Assembly allowed us to bring large portions of our codebase to the web. Some of that code relies on exceptions for flow control, the addition of zero-cost exception handling means there’s no performance penalties.

[26:43] For high fidelity work, Canvas 2D is now color-managed and supports sRGB and the P3 color space. Reading and writing your files to disk had to feel natural, and the Storage Foundation API ensures that you can work on your PSDs no matter how big or how many layers they have. We are still at the beginning of exploring Photoshop editing features on the web, and we are looking forward to the feedback from the Adobe Community, which will help us grow the capabilities and functionality of the browser experience.

[27:18] In addition to Photoshop on Web Beta, last week we also announced Creative Cloud Spaces and Creative Cloud Canvas, both in Private Beta. Spaces are a shared place that allows teams to access and organize all their creative project files. Canvas is a new surface where teams can display, visualize, and review creative work together. We are excited by the idea of giving everyone more ways to access our tools. By bringing them to the web, we are helping to create a more fluid, more connected and more collaborative environment for your projects.

[27:54] This is just the beginning of a broader evolution of Creative Cloud. Thanks so much for your time. And, now, Ben will pick things back up to talk some more about user experiences. Thanks, Pam, Josh and Aanchal, for walking us through these highlights. You know, progress on the web generally comes in iterations, year-over-year, step by step, and so it’s amazing to me when we can take a step back and reflect on what’s become possible in the platform over time, as these examples have shown.

[28:25] And, as the web gains new features and capabilities, another theme we hear is the importance of helping developers get the best results they can out of the modern web platform. And one way we’re doing this is the Web Vitals program, which is the result of much research to know what makes a web experience great. With Core Web Vitals, we closely examined many factors that lead to high-quality user experiences, and we identified three quantifiable measures that have a big impact.

[28:56] These are, one, how quickly a user can see a site’s most important content; two, how quickly a user can start to interact with that site; and three, the stability of the site’s layout over time. We found websites optimizing these measures are consistently more successful. To tell us more, I’d like to introduce Houssein. Thanks, Ben. If you want to build a great website, you need to understand how it performs from a real user’s point of view.

[29:27] That’s what the Web Vitals initiative is all about, giving developers and site owners the metrics, tools and guidance they need to deliver a great experience for every user. Last year, we announced Core Web Vitals, a set of three metrics that covers loading performance, input responsiveness during load, and the visual stability of content will begin to be serviced across tools provided by Google to help developers build great user experiences. So what’s happened in the past year? Thanks to developers around the world working hard on improving their sites, the ecosystem as a whole is steadily improving.

[30:04] 20% more page visits in Chrome now fully meet the recommended Core Web Vitals thresholds compared to a year ago. And the total percentage of page visits in Chrome that meet these thresholds is now 60%, which is a big deal. Much of these advancements are a direct result of the work being done by developer communities, including the improvements that many content management systems, website builders, and e-commerce platforms have made. This past spring, we launched the new Core Web Vitals Technology Report to show how sites built on these platforms perform.

[30:40] You can see that many are sharply up and to the right with some showing more than 200% improvement year-on-year. And leaders like Duda and Jimdo surpassing 50% of Origins with good Core Web Vitals scores. We've also worked with some popular JavaScript frameworks, including Next.js and Angular, to deliver the best user experiences possible without sacrificing developer experience. We’re calling the initiative Aurora, and thanks to the work we’ve done to land strong defaults and optimize performance, in less than a year, we’ve seen 91% and 111% increases in the number of mobile Next.js and Angular Origins, respectively, that have good Core Web Vitals scores.

[31:25] That's incredible progress in a short time span, and we can’t wait to see similar growth in other framework ecosystems in the near future, like Nuxt. We know optimizing for Core Web Vitals can still be challenging for the everyday developer, so we’ve got a couple of new updates to our performance tooling that make the process a lot easier. First, we started with a complete revamp of the PageSpeed Insights UI. PageSpeed Insights is a great tool because it’ll show you real-user data from the Chrome UX Report, and it’ll also run a Lighthouse report and show suggestions and opportunities to improve based on a synthetic load of the page in a lab environment.

[32:05] The new UI makes it much clearer which data is “Field Data” coming from real-user experiences, and which data is “Lab Data” coming from the Lighthouse report. If you want to check a Core Web Vital Score, you should look at real user field data. For anyone who wants specific, actionable suggestions for how to improve performance, the Lighthouse report is a great place to start. Next up, we’ve worked on addressing a blind spot that our tooling hasn’t been able to capture yet: user flows. Some of our tools have been limited by only assessing your pages during load.

[32:37] They want to scroll down the page, click around, or do anything else users typically do as they browse the web. For example, consider a typical checkout flow where someone needs to perform a number of different actions to order some coffee, like navigating through several pages, adding items to a cart, and confirming their payment details. In the past, we could only measure the performance of each page separately, but think about how much more we could learn about the overall user experience by measuring every action and navigation in between.

[33:09] We’re glad to announce we’ve rolled out support for user flows in Lighthouse, which will only make it easier to diagnose performance issues within a user journey and get suggestions for how to improve. Lighthouse will be able to distinguish and provide separate reports for page navigations, any user interactions that occurred during a given time span, and snapshots to represent a captured state of a page. It’s not just Lighthouse where we’re introducing support to analyzing user flows. We launched a completely new Recorder Panel in DevTools that will also let you record an entire user journey on your website and easily view all the actions taken by the user directly in the panel, such as navigations, key presses, link clicks and so on.

[33:54] You can download the user flow and export it as a Puppeteer script for testing, replay it, and even click and easily measure the performance trace in the performance panel. Not only will this make the process of understanding and debugging interactions easier, it will also help you better identify performance opportunities throughout the user journey. The Recorder Panel is currently in the preview stage, and the team is working on it actively, so stay tuned for more features. All our tooling has been instrumental to how the Core Web Vitals metrics have helped developers succeed in improving the user experiences of millions of sites around the world, and all of these new changes will go a long way to help you understand precisely where and how you can keep getting better.

[34:41] Now, what’s next for the Core Web Vitals metrics themselves? Well, there's more to great user experiences than just three areas. We’re working hard to fill the gaps that the current set of metrics don’t address just yet. We’re excited to introduce two new metrics we’ve been experimenting with that we think will improve how user experience is measured on the web, and we’d love to get your feedback on them. The first is a metric to measure Overall Input Responsiveness. Today, we measure the responsiveness of the first user input, but ideally we want to extend that to capture every user input from the moment they land on your site to the moment they leave.

[35:22] We’ve also made improvements to the APIs that capture event timing, so we can better monitor the full event lifecycle and better handle complex user inputs to trigger more than one event. The second metric measures scrolling and animation smoothness. I’m sure we’ve all had experiences where a page will stutter or freeze during scrolling or animations. We want to better understand how often this happens and how severe it is. We’re still working on both of these metrics, and we’d love to hear your feedback.

[35:53] These articles explain our current thinking in detail, so give them a read and think about how using them can help improve the user experience of your site. Feel free to send us an email if you have any thoughts or suggestions. We’re excited about all the advancements made to help developers succeed in building fast, delightful experiences for their users, in the metrics themselves, from the community, and directly in many tools and platforms. If you haven’t, go to PageSpeed Insights to see how your site scores on the Core Web Vitals metrics.

[36:25] We also have a number of other great tools that you can also use to continuously monitor and optimize your site’s performance, so be sure to check them out to see which one works best for you. Now, I’ll pass it back to Ben before we share some exciting updates about UX design. Thanks, Houssein. I’m really excited to see how Core Web Vitals evolves in the coming years. Of course, quality web experiences are about more than just measurement and optimization. They require the efforts of passionate designers and developers who work behind the scenes to create delightful digital interfaces, and need to be armed with the right tools and capabilities to do that.

[37:04] A few years ago, a group of engineers set about rethinking Chromium’s support for HTML, CSS, and Graphics, which led to an effort called RenderingNG, an ambitious refactoring of Chromium’s rendering engine. This work has now largely landed, and it’s enabling a major evolution in web user experience design. To tell us more, I’ll hand things over to Una. Thank you. Everything we’ve talked about today comes back to the user experience.

[37:36] Privacy, measurement, next-gen web capabilities, working together to create better experiences that align with our vision for the web, while giving developers the tools and capabilities they need to build them. So, today, I’m excited to share a ton of updates and changes coming down the pipeline for UI styling and DevTools. First, let’s talk about responsive design and how it’s evolving. Responsive design is no longer about making sure an interface looks good on both desktop and mobile devices. Developers now have the tools to really create customized user experiences based on personalized user preferences in a component-driven architecture model.

[38:14] We’re calling this The New Responsive, and it includes being responsive to the user, with user preference queries and modalities like dark mode and prefers-reduced-motion, being responsive to new form factors like foldable devices, which allow for multi-display functionality, and being responsive to other components on the page with container queries. This is a feature that’s been highly requested by developers. We’ve been working with the CSS working group to spec this feature and have been able to unlock the implementation through recent changes in the Chrome Rendering Engine.

[38:44] The new container queries spec lets you access a parent element’s width to make styling decisions for its children. You can even nest container queries and create named queries for easier access and organization. Let’s take a look at an example. Here’s a responsive “Add to Cart” button that I can place anywhere in the container. Then when I put it inside of this product card, which is also a container, I can query the product card itself to restyle the already-responsive button and shift it from being center-aligned to left-aligned.

[39:15] This might look easy on the surface, but it’s something no previously possible without a lot of heavy scripting, which would significantly slow down your page. We’re working with the open-source community to provide a polyfill for container queries as we build the feature into the platform. Using container queries makes your interfaces much more flexible. Components own all of their individual responsive styles right where they are, and don’t rely on the global viewport to adjust styles. This is a huge paradigm shift for component-based developments, and we’re excited to see how you make the most of this new feature.

[39:48] If you wanna try it out, container queries are now available for testing behind a flag in Chrome Canary. And, because of this big shift, we’ve been working hard to support you by providing DevTools that allow you to debug and style with container queries as the feature launches. Here, you see that DevTools is pointing out where the container for the child is and highlighting the styles being applied by it. Speaking of responsive DevTools, we released several new tools this year for better layout debugging. Layout tooling for Grid now allows you to add names to specific grid lines and also shows you the size of your Grid areas.

[40:24] I also love the dynamic new tools for Flexbox and Grid. These let you actually see what different property values do on the page and give you the ability to easily change layout rules with the click of a button. These new DevTools are designed to make CSS Layout easier to visualize and understand which frees up more time to build new features for your users and less time looking up the differences between justify and align. Another way we help simplify the process is by launching web.dev patterns, a collection of off-the-shelf UI patterns you can use in your web projects.

[40:57] To help you quickly get started with building the base of your UI, we’ve added layout patterns for everything from large, full-page spreads and card sets to smaller layouts that can live within those larger layouts, such as the cards themselves. All of these patterns use CSS Grid, Flexbox, or container queries to showcase how quickly you can pick up these tools and build interfaces from the ground up. We also partnered with Jeremy Keith of Clearleft to launch “Learn Responsive Design” on web.dev. This is a free online course with everything you need to know about designing for the new responsive web of today.

[41:31] You'll learn about theming, art direction, logical properties for internationalization, utilizing preference queries, and so much more. Today, we’re launching the first few course modules at web.dev/learn/design, with more to come in the following weeks. We’re also updating our “Learn CSS” course with six new modules. “Learn CSS” is another free, evergreen course and reference on web.dev where you can level up your CSS knowledge and test your skills. We launched the first 24 modules at Google I/O this year, and now we're introducing lists, backgrounds, transitions, text and typography, media queries, and more.

[42:07] Be sure to check out those new modules and dive in when you’re ready. We’re also working on rolling out some new features in CSS. In addition to container queries, our team’s thinking about how to introduce scoped styles and cascade layers. They’re not ready just yet. We’re excited to work with you and the web community over the next few months to push them forward. We do have a particularly fun new API that’s ready for exploration, and that’s Scroll Timeline. Before, you could create CSS animations with a time-basis and moved over a length of time.

[42:38] Scroll Timeline lets you set scroll-based offsets and timings for animations instead. That means you can set an element to animate as you scroll down or across a page. Pretty neat. You can explore Scroll Timeline using the experimental web platform features flag in Canary, We have another exciting addition recently reaching its first public working draft, and that’s CSS nesting. Nesting is a syntactic sugar that brings one of the most popular features of CSS preprocessors to the web, stacking your styles for a cleaner developer experience.

[43:11] While the nesting spec will let you keep your styles tinier and more encapsulated, we recommend you don’t go more than three layers deep to ensure the best performance. We’ve also launched the size-adjust property for typography. This is particularly useful for preventing Cumulative Layout Shift for Core Web Vitals, as you can adjust the default font to better match your web font. This causes less jank as the web font loads in. And last but not least, accent-color just landed in Chromium and Firefox stable. Accent-color is a one-line CSS superpower that gives your form controls, like checkboxes and radios, a theme color to match your brand.

[43:47] We get a lot of feature requests from developers and users alike, but one is a clear favorite, especially for those of you who love to browse the web at night. Dark Mode is a popular feature we’re excited to build on, and not because you asked for it but because its impact extends beyond the user interface. Dark themes have shown measurable battery life savings over their light theme counterparts on OLED devices. In our lab study with a single Pixel 6 device, we found an indication that at 60% brightness, dark theme used 11% less power than light themes for OLED screens.

[44:23] And it’s a feature that users love too. When Twitter released the first preview of their new Twitter progressive web app, everyone said, “Wow, it’s new and fast, but where’s dark mode?” They surveyed users on what they needed to add, and users said three things: dark mode, an emoji picker, and more dark mode. So it’s kind of a big deal to a lot of very vocal users. To create a dark theme, we recommend using CSS custom properties and the “prefers-color-scheme” media feature, which is supported in all evergreen browsers.

[44:53] This lets you swap theme colors in and out based on what your users prefer, a core part of our new responsive framework and set of goals. If you need help getting dark mode set up the way you like it, there’s excellent guidance from the Material Design team via their research on building beautiful dark themes. This includes how to adjust depth by using lightness instead of shadows, how to adjust color vibrancy to reduce visual vibration, and more. To make it even easier for your team, Chrome is working on a machine learning-aided auto-dark algorithm feature. This feature will include auto-darkened websites, along with a few affordances to opt-out of the auto dark functionality on a more granular level.

[45:31] We’re still in the early stages of feature development, and we need your help to get it right. To try it out now, open the DevTools Rendering Panel in Chrome Canary and enable Auto Dark Mode Emulation. Check out the link to learn more and to give us your thoughts. Now, I’ll pass back to Ben one last time. Thanks, Una. You know, we’ve seen a lot of change in the web over the past year, and we’re still more optimistic than ever about the future of the platform across the areas we just talked about and more. In the years ahead, you can expect to see us continue to push hard to make the web more private and powerful and to provide developers with better tools and guidance to create top-quality experiences for people all over the world.

[46:17] Part of what makes the web so special is that it’s an open, decentralized ecosystem, which presents lots of ways for anyone to get involved to help shape its future. We invite you to participate with this effort, whether that’s through the Chromium open source project, the W3C and other standards bodies, or simply following along with us on web.dev and our @ChromiumDev Twitter account. And, over the next couple of weeks, as part of this virtual CDS 2021, we're hosting a number of workshops, group learning lounges, and one-on-one office hours where you can engage directly with the Chrome team, audit your own sites with expert guidance, give us feedback, and share your ideas for the future of the web.

[47:00] And, with that, thank you for watching, and I hope to see you again in person sometime soon at a future Chrome Dev Summit event. Until then.