[Music] i'm ben and i'm dion we're leaders on the chrome team and the two of us have been working together on the web platform for many years now it's been fun to watch as websites have evolved from simple connected documents to today's rich interactive web apps the web has become a high performance general-purpose computing platform used by billions of people all across the globe and the web's growth has accelerated in the last year as the pandemic has pushed more of our daily interactions online triggering a rush to improve web experiences as usage spikes and for us this reinforces the importance of the web and the need for all of us to work together to make it better now we've seen many computing platforms rise and fall over the past decades one thing's really clear the old adage evolve or die plays a major role in the ongoing relevance of any platform now the web has evolved a great deal over the years and looking forward i think the pace of evolution is accelerating as it kind of has to to keep pace with tech and society generally so at google i o this year we have a number of sessions that will bring you up to speed on some of the latest developments in the web and in this session we'll give you a quick summary of what we think are the key themes that you should keep in mind this year and we'll point you to where you can learn more and go deeper we're going to start with privacy explaining how the web is evolving to enable a private browsing experience for all users by default next we'll cover how the web is enabling a new generation of powerful fast and seamless web applications and a fantastic user experience and finally we'll summarize the work we're doing to help developers be productive and successful with the web so let's get started with privacy and we'll do that by talking about sandboxes modern browsers are built around the metaphor of a sandbox each website you visit is isolated by default from the rest of your system including from websites and other open tabs just as though it were surrounded by virtual walls like those of a sandbox in a garden now chrome's innovated with the browser sandbox model from its earliest days first by isolating each website into its own process and more recently expanding on that to isolate each cross-site iframe on a web page into its own process we're taking this same approach with user data and tracking building a sort of privacy sandbox that seeks to keep all of your information safe and secure within your browser resulting in a web where your identity and activity are private by default we announced the privacy sandbox effort two years ago as an open initiative a collaboration with the community to bring this vision to life while also being careful to help transition the web ecosystem to a new model in a thoughtful deliberate way we'd like to give you an update on our progress our first step announcing google i o two years ago was changing the behavior of cookies in chrome moving them from being visible across websites by default to being visible only to the same website that set them before this change it wasn't really clear whether a cookie was intended for first party or third-party use and browsers needed to observe how cookies were used in the wild to infer their purpose this also created a security problem because this wide default visibility of cookies exposed users to cross-site request forgery attacks based on third parties observing the information in these cookies now developers are required to opt in to use cookies across sites as so-called third-party cookies and in turn browsers can then disable such cookies in a very straightforward manner this privacy preserving default behavior is now enforced in chrome edge and very soon firefox next we've been collaborating with the ecosystem on a new family of apis that provide privacy-preserving alternatives to use cases that today rely on third party cookies such as federated login personalized ads and conversion tracking to clarify how these apis are approaching this challenge let's take a closer look at one of them the attribution reporting api so a key aspect of any web business is how you grow your user audience and that often involves advertising to increase traffic on the other side of those ad dollars content publishers on the web often rely on revenue from advertisements to make their business model work finding out how many users actually clicked on the ad and whether those users subsequently did something like sign up for a newsletter or complete a purchase is an important part of this model traditionally this measurement is performed by tracking the user from before and after the click across websites with a third party cookie so how can we do this in a way that doesn't involve tracking that user well inter attribution reporting using this proposed api no user identifying data is shared between the sites instead it's the browser that keeps track of the ad conversion later the browser sends an encrypted report to the advertiser for each of these conversion events but it adds time delays and noise to these reports to further stifle attempts to identify users this technique is broadly known as differential privacy this approach enables both parties to still be able to measure the effectiveness of their ad campaigns and to understand what behavior the ads are able to drive and to do so without tracking the user across sites now attribution reporting is one of many new api proposals in the privacy sandbox project it's available for use as a chrome origin trials experiment today along with several other apis and will ship more throughout the course of the year as we work with all of you across the ecosystem to bring these new apis to the web platform we're also moving forward with preparations to phase out third party cookies and implementing protection against other forms of covert tracking and we've got more details on what to do with your own cookies today in the technical sessions so the privacy sandbox project represents a substantial evolution of the web platform enabling privacy by default while also preserving critical web use cases a change this large and fundamental to the web will take time but we're committed to this work and the benefits it will bring to web users globally the web has evolved into a powerful application platform enabling anyone with a modern browser on nearly any kind of computing device to get access to category leading experiences that load fast and run seamlessly and devices like chromebooks show how access to the web can be made affordable safe and simple with no need to become an expert at maintaining the underlying operating system for years now we've been on a mission to ensure the web has all of the capabilities needed to bring state-of-the-art computing experiences to the platform and since we last spoke to you at i o the web's gained a significant array of new capabilities we'd like to highlight a few of these for you one area we've been working on has been making it easy for users to seamlessly re-engage with web apps now it's been possible for a few years to easily add web apps as icons to native launchers across both mobile and desktop and is one of my favorite platform features but now we want to talk about how we've been deepening this integration between web apps and the underlying os with the new app shortcuts feature web apps can expose quick actions on operating systems that support this feature such as android chrome os windows and mac os and with the badging api web apps can give the user a subtle prompt that there's an opportunity to re-engage by decorating the app's icon soon we'll be shipping a chrome origin trial experiment of another new api declarative link capturing that enables installed web apps to launch automatically when the user clicks on an appropriate link now this can also prevent multiple instances of the same app from opening so you don't have like 10 tabs with the same web app in it we've also recently improved chrome's web app installation ui on desktop we now show an omnibox icon and provide in-product help to explain this feature to users and on android we've made the dialog look richer and more familiar to users and we've made it easy for developers to populate the dialog with custom images and text that are specified in the web apps manifest file so those are ways that we're improving the web's integration with os launchers we're also adding other os integrations such as the multi-screen window placement api which allows web apps to discover all of the connected displays and control where the window is placed on those screens this is actually a pretty handy feature these days for web-based presentation and video conferencing apps now web apps can finally read and write to the user's local file system using the file system access api enabling apps like gravity designer and photop to provide a much more seamless user experience persisting state to disk and working with existing files we're also working on a new file handling api that would allow web applications to be registered as file type handlers enabling users to open files directly in a web app from os file browsers we hope to ship an experimental release of this api later this year now let's talk about peripheral devices things like special purpose keyboards game controllers digital pianos headsets and more now the web's had the ability to communicate with bluetooth and midi devices for some time but several new apis now enable support for a broader collection of these devices many of these communicate using the hid protocol the web now has an api for this in web hid nintendo's joy-con controller is an example of a device that supports this protocol for gamepad style controllers the industry standard gamepad api is now supported by the web as well and this enables uncompromising gameplay with apps like stadia in the browser and you can also use a gamepad to control the chrome dyno in style the web also now supports serial ports with the web serial api this actually unlocks one of my favorite new use cases piper make it's a block based editor that allows you to program a raspberry pi pico all you have to do is simply plug in the device to any computer open a browser and off you go no need to install software or mess with drivers all thanks to web serial now with these and other new web capabilities you can bring deeply integrated seamless experiences to users everywhere right through the browser google maps holds a special place in our hearts as a singularly influential web app when it first launched over 15 years ago maps continues to innovate on the web several years ago they embraced webgl enabling hardware accelerated graphics and delivered a much more powerful maps ui in the process last year the maps team enabled those same webgl accelerated map capabilities to be used in your web app via the maps javascript api this year the team has something new to share join me in welcoming travis macphail the team's engineering lead who will tell us more about it we're constantly amazed by all the ways you've used your skill your creativity and google's knowledge of the real world to build an unbelievable variety of experiences that have truly reimagined the map and it's in that spirit today during the developer keynote we announced the beta release of two new features that give you unprecedented control of the base map tilt and rotation and webgl overlay view with these features you can manipulate the map in three dimensions for the first time while taking advantage of the power of the same webgl context we use to render the base map for the first time ever you can build not just on top of the map but you can build with it let's take a quick look at how it works to make things easy i'm using 3js a popular web graphics library to render a 3d object on the map i've set up a basic web app that loads the map centered on a location in the yucatan peninsula of mexico and i'm using a map id so that i can use the vector map and apply some custom styling the first thing i need to do is implement webgl overlay view by extending google.maps.webgl overlayview the webgl overlay exposes a set of hooks into the lifecycle of the webgl rendering context of the basemap for today we'll keep things as simple as possible and focus on just three of them the first on add is called when the overlay instance is created the second on context restored is called once the rendering context is available and the third on draw is where the map and anything else you specify is actually rendered and on add i'm going to set up everything that the scene needs that doesn't require immediate access to the rendering context i start by creating a new 3js scene i also create a camera that represents the viewport of the scene in this case a perspective camera next the scene needs at least one light source so that any rendered objects are illuminated in the scene for this example ambient light is used to equally illuminate all objects in our scene now i'm ready to add my 3d object using the gltf loader once the object is loaded i scale and rotate it to have it render just right then i add it to the scene and on context restored i configure the 3js webgl renderer passing it the map's rendering context and information about the viewport once the object renders i also want to animate the camera to give my users a dynamic view of the object so i call move camera in the set animation loop function of the renderer i also increment tilt heading and zoom just a little bit in each frame to create a nice downward spiral motion alright time to render the 3js camera needs a projection matrix so that it knows how to render latitude and longitude coordinates in the 3d world of the map to the 2d coordinates of the screen now i don't know about you but matrix transforms are not my idea of a good time so to save you a bunch of math we hand you a transformer object that has the from lat long altitude function which creates this matrix for you i pass it the lat long coordinates where i want the model to appear and i set the return value as a camera projection matrix all that's left is to clear the gl state tail webgl overlay view i want to redraw by calling request redraw on the webgl overlay view instance and render the scene and finally i create an instance of my class and set the map instance i want it applied to and this is the result not too bad for a few minutes of coding right tilt and rotation and webgl overlay view are just the latest way we're delivering on our commitment to you we have a lot more planned and we can't wait to see all the ways you'll come up with to reimagine the map all over again and show us what's next back to you dion thanks travis webgl brought a whole new level of graphics performance to the web when it became available several years ago we're currently working closely with the graphics and web communities on web gpu a new next generation graphics api designed from the ground up to unlock a whole new level of graphics performance on the web take an inspiration from low-level apis like vulkan metal and direct3d 12. web gpu is still very experimental but holds exciting promise for the future another key performance technology is webassembly which provides a standard for compiling code to a fast and efficient format that can be executed in the browser by modern javascript engines like v8 we recently gave webassembly a major performance boost by implementing support for simd processor instructions in v8 which enables certain classes of apps to run much faster google meet provides a powerful example of simdee in action like any video conferencing app meet has to pay careful attention to their performance budget and there's a constant tension between processing the video in order to enhance it and maintaining a smooth low latency stream using v8's experimental origin trial of simdee the meat team achieved a 200 performance gain on their in browser media processing pipeline and this in turn gave them the budget to enable a background blur feature for most of their users that was powered by tensorflow in the browser we're planning to ship simd to all chrome users in the coming months now webassembly is also frequently used to bring non-javascript code bases to the web unlocking them for new use cases for example the developers behind the offline first sync engine replicash were able to compile their ros code to webassembly enabling web developers to seamlessly incorporate it into their web app to ease with code porting va added threading support to webassembly back in 2019 but it was only enabled for desktop operating systems we're pleased to share today that chrome for android gained web assembly threads as of chrome 88 in january of this year we've also enhanced v8's webassembly debugging experience with support for breakpoints and variable inspection right there in chrome devtools we're so excited to see what you deliver with the universal runtime that works on client or server is sandboxed and wicked fast that's webassembly so the va team has also been hard at work at squeezing even more javascript performance out of its engine so in addition to interpreting javascript v8 also compiles code on the fly for more efficient execution and the team has implemented a whole new compiler called spark plug of course sometimes the best way to improve code execution performance is to not execute any code at all and in this spirit earlier this year we shipped a new chrome feature to some users called intensive timer throttling that detects when a browser tab has been in the background for more than five minutes and as long as the tab isn't playing any audio or video chrome slows down how frequently it executes timer-based javascript code on that tab we've also applied this concept with css by shipping support for a new css property called content visibility when you set this property to auto on an element you're giving the browser permission to skip rendering the contents of that element tree if it isn't currently visible on the user's display and this can lead to a dramatic speed boost for content heavy sites now there's a ton of innovation happening on the web platform to enable significantly faster runtime performance of your web apps now in addition to the work that's happening to expand the power and performance of the web the platform's also evolving to deliver a more instant and seamless experience for users in chrome 87 released in november last year we added a so-called back forward cache to chrome on android or bf catch for sure bf cache keeps some web pages loaded in memory after you navigate away from them so if a user clicks back or forward the page is displayed instantly and it turns out one in five navigations on mobile are doing exactly that moving backwards or forward through the history stack so this feature drives a really big impact now while today chrome's bf cache implementation is available on android does have some limitations we are planning to expand it to the chrome desktop platform soon another way we're expanding instant experiences is by revisiting the notion of pre-rendering pages pre-rendering is the technique of loading all of a webpage's resources and even rendering the dom before the user clicks on a link so it can be displayed truly instantly now this is hard to get right because pre-loading these pages can also cause side effects if the page does something like sign out or if the page plays audio then it can also start playing in a mysterious way also it can leak some user information if it's done across sites but when pre-rendering is done right it provides this powerful instant click-through experience for the user so we're working on new approaches to pre-rendering that are private and safe one of these involves a new pre-rendering api that would enable developers to experiment with this on same site pre-loading later this year the transitions are another important aspect of the user experience ensuring that users are able to shift their context as they navigate the web and get right to where they want to go one fun simple feature with a big impact is scroll to text added to chrome 80 in february of last year by adding a new type of expression to the end of your url browsers can position the viewport to a specific text element and highlight it in some way soon we'll be shipping a version of this api that scrolls to images and we're exploring other element types too with the new document transition apis that are coming to chrome soon as experiments we're also building in support for a number of graphical transitions between elements enabling the user to perceive a seamless experience as they move between states of your web app we're also working to make security more seamless on the web and one feature i'm particularly excited about is cross-device one-time passwords for the web one-time passwords are these numeric codes that some sites can send you to login now this feature enables you to receive one of these one-time passwords on your android phone and then have that automatically transferred to your chrome browser running on some other device like a laptop all of these new web capabilities are exciting but as the pace of web evolution accelerates so too does the complexity we face as web developers and keeping track of everything we're working to make the web easier for developers and partnering with the broader ecosystem to understand and address the platform's top pain points to understand our latest recommendations for web development visit web.dev the site includes detailed tutorials on key topics the latest news and it also provides access to our lighthouse website auditing tool now with lighthouse you get a comprehensive report on how to improve your website across a variety of categories such as performance accessibility and seo we're continually updating lighthouse guidance to give you the very best insights that we can we found that three of lighthouse's performance metrics are particularly impactful on the user experience we call these core webvidors and collectively they measure how fast a site displays key content how responsive the site is for the first interaction and how much the site's layout shifts around sites across the web are using coreweb vitals as a north star for performance and are reporting encouraging results for example the italian publisher jedi saw an 8 improvement in the bounce rate on their mobile article pages they did this by implementing a branded placeholder in order to reserve space for ads in their ad slots on the page which improved their layout stability and then by deferring loading of some of their javascript code until after the page was visible they improved the perceived page loading speed web content and commerce platforms are also investing in core web vitals to improve the performance of all of their hosted sites for example shopify and wix implemented dashboards in their admin consoles that puts performance front and center for site owners and the wordpress community has also shipped performance-oriented editions such as lazy loading for images and iframes we've also updated sitekit which is google's official plugin for wordpress with support for measuring core web vitals and it also makes specific improvement recommendations to developers google search has also announced the core web vitals will soon be a part of how pages are ranked in search results we think this is particularly exciting as it magnifies the benefit of call web vitals to you the developer the investment will not only give your users a better experience but it will help them find your site through search now we spend a good amount of time listening to developers both in small gatherings and through scaled developer surveys one of the common themes we consistently hear is the importance to developers of cross-browser compatibility so this year we recently announced our participation in a cross-industry effort called compat 2021 which aims to fix the top five browser compatibility pain points as voted on by web developers which shockingly all happened to be css related and speaking of css we're seeing an exciting renaissance in this area we even have our own modern day zen garden css flexbox and grid have been embraced by developers as major improvements for creating page layouts and learnings from years of css frameworks like sas are being baked into the platform such as nesting and along with container queries you know which is your most requested feature i think for css you'll be able to create style sheets that are more modular and reusable by enabling rules that a scope naturally to their local context versus acting so globally now one of chrome's most popular features is its suite of built-in developer tools which give you an incredibly powerful toolkit that can function as your web development co-pilot over the past year we've enhanced devtools with a bevy of new improvements ranging from a new color picker improved warnings and linting of pwas a core web vitals overlay dedicated css flexbox debugging dropped frame visualization support for css and javascript and much more and devtools is also a platform because it supports extensions and one example of a new extension is the angular devtools chrome extension which provides debugging and performance profiling support that's specific to angular apps so check out our chrome devtools session to deep dive into all of this and learn more about our new devtools features the web is evolving in fundamental ways so it doesn't become extinct it's becoming private by default with new apis that protect user privacy and it also continues to gain powerful new capabilities that broaden what's possible on the platform providing for better user experiences lastly we're committed to partnering with you in the ecosystem as the web evolves to make sure that you've got all of the tools and guidance for success now you can dive deeper into many of these improvements across the web platform by checking out a number of other sessions many of which we've highlighted today at this year's i o so thanks for your time and we look forward to seeing what you build with the evolved capabilities of the modern web and if you're watching this during i o week come find us an adventure [Music] thanks [Music] you
2021-05-21