 Welcome to Chrome Dev Summit. I'm Ben Galbraith. I lead product for the Chrome platform teams. And I'm Dion Almer, and I lead product for our developer ecosystem efforts. Thanks for joining us here at the Yerba Buena Center for the Arts here in San Francisco, and a special shout out to those of you watching on the livestream. We look forward all year to this opportunity to gather with developers from around the world to celebrate the web platform. And of course, it's an opportunity for the Chrome team and others here at Google to provide updates on our latest work and get feedback from the community. 2018 marks 10 years since the launch of Chrome, but it also marks Android's 10-year anniversary and 20 years since Google was founded back in 1998. So this is a really big year for us, and it's got us reflecting on these past 10 years. Back in 2008, Dion and I were at Mozilla working on developer tools when we received probably the most unique product announcement we'd ever seen, the Chrome comic, which walked through Chrome's new features, like the OmniBox, and architectural innovations, like the multi-process architecture, and the high-performance V8 JavaScript runtime. And years later, it's really fun to note the V8 was reused by Node.js and plenty of other open-source projects out there. Chrome launched in this time in the midst of a web renaissance back in the Ajax movement that saw developers pushing the boundaries of what was possible on the web, doing things that we just hadn't seen before. And it's amazing to see just how far the web has come in these 10 years, with publishers like Huffington Post transforming the typical documents of the web into rich interactive experiences. And Google Maps, an early pioneer of the Ajax era, had gone from maps of tiled images to a street-to-space continuum combining 360-degree photos, vector maps, 3D models, and satellite imagery, all just in the browser. And productivity apps have come into their own on the platform with pro tools like the incomparable AutoCAD and the collaborative design platform Figma. And because they're on the web, you can get right into these things. And when you're done being productive, you can pop into high-quality games like Crossy Road for just a minute. Just a couple. Just a quick minute. And Chrome's changed quite a bit over this time, and more than just these subtle changes to the logo. Earlier this year, we highlighted Chrome's new refresh design and updated usability enhancements, such as better tab treatment for people like Dion that have like 500 tabs open at a time. That's true. And also a smarter omnibox and autofill features. But the most important update was clearly the birthday mode in the Dino game, which run for the entire month of September. Do you know this has played over 270 million times a month? That's incredible. It kind of is. But here at CDS, it's really the platform-related features that we want to talk about. So let's highlight a few. So back in 2008, Chrome launched with Process Isolation, an architecture that put each tab in its own operating system process, making Chrome exceptionally stable, but also exceptionally secure. The process boundary acts as a line of defense in the event malicious code is able to exploit a bug and attempt to read data from another tab. Over the past 10 years, this model has become the industry standard. This year, desktop Chrome browsers took this model further with the launch of Site Isolation. So now Chrome ensures that even within a single tab, content from different domains is isolated. So in this example, in the iframe, this new site is using a display ad, and it's running in a different process than the rest of the page. We've wanted to extend Process Isolation this way for some time, and we think it's an important protection for the web. Now, we've also been continuing our efforts to encourage developers to use HTTPS for all web traffic. This ensures that the content of a site isn't maliciously modified while in transit, and also that user data is transferred securely. In the latest Chrome, we mark pages as not secure when they're served from HTTP, and when the user begins to interact with form fields, we further emphasize the point with a stronger warning. The HTTPS movement is a collaborative effort with organizations like Let's Encrypt plan a big role in lowering the barriers to upgrading sites, and it's working. In Chrome itself, we've seen big shifts to HTTPS, and over 80% of the top 100 sites are now all HTTPS. We think this is actually a major accomplishment because the web is such a massive ecosystem. All right, in addition to security and stability, speed was a big theme for Chrome at launch, and V8 is a big part of that story. The team recently posted a retrospective highlighting its improvements over this period, including significant gains in JavaScript execution speed and a 100x decrease in garbage collection jank. And the team is looking forward to the next 10 years of improvements by optimizing V8 for the latest JavaScript language features like Promises and Async08, supporting the Node.js server-side community, and being responsive to the needs of the framework ecosystem. There's a fun recent example of this. How the team rapidly responded to JavaScript inefficiencies related to the React frameworks recently announced Hook's feature, finding ways to make this feature work much faster on V8. Now, V8 has also expanded to support WebAssembly, also called Wasm, a cross-browser standard for executing low-level code like C and C++ at very high speed. Earlier this year, the team launched the new Wasm compiler called Liftoff, and the popular Unity game engine found that it resulted in a 10x reduction in the load time for their Wasm code. And WebAssembly threads are now available in a Chrome origin trial, which opens the door for more complex code to come to the web. Now, it's been really fun to see the community explore the power of WebAssembly, both through new creations and by bringing old codebases. Actually, I think I prefer the term vintage codebases. Vintage, vintage, high-quality codebases to the web. This tweet was one of my favorites, kind of an inception moment, because now I think you can run, i.e., on Windows 95, on Chrome, on Android. It's crazy. What a world we live in. It's hard to believe, but back when Chrome launched, video on the web wasn't a thing. We had to use plugins. And now, of course, HTML video is ubiquitous. This year, Chrome landed support for AV1, which is the next-generation media codec, completely royalty-free, that provides a 30% bitrate reduction, even over HEVC, which makes streaming video on the web faster as this becomes adopted. And because AV1 has major industry backing, we can expect to see it receive significant adoption over time. Now, one constant over the past 10 years is the importance of optimizing images. This is sort of like flossing for the internet, vital for your site's health. Yeah, plenty of us don't really seem to do it enough. And as a Brit, trust me on that one. Now, a few years ago, Chrome added support for WebP, a new image format that results in an average 30% savings over other formats, like PNG, JPEG, and GIF. GIF, was it? Oh, sorry. And this year, Edge and Firefox ship support for WebP, so make sure your images are fully squished. All right, so the web and Chrome have come a long way these past 10 years. So where do we go from here? We've just spent the last few minutes talking about the importance of speed and the enhancements to the web platform that make that more possible. And we think this will continue to be a major focus for all of us into the future, because speed is one of the defining features of the web platform. It's what makes it so magical to go from a link right into a rich experience seamlessly without any delay. Now, deliver and speed is a partnership between the browsers and developers, because no matter how fast and efficient browsers become, a poorly optimized site will always ruin the fast load in experiences that our users want. And increasingly, JavaScript can also become a major factor in slowing down sites. It's because since 2001, sites use an average eight times more JavaScript than they did before. And that's a problem, because in addition to having to be downloaded, all this code needs to be compiled by the browser and executed. And with mobile, many of the devices that our users are using are slower than they've been before. And so increasingly, performance can include the CPU as a bottleneck. Now, we've created tools like Lighthouse, PageSpeed Insights, and the Chrome User Experience app that can provide deep insights into your site's performance and how it can be improved. However, as helpful as these tools can be, a pattern we've seen is that a site's performance will degrade over time, because we're constantly adding new features to enhance our site. And these new features create pressure for the site to get bigger and bigger. And that includes more script and more resources that have to be downloaded. Of course, we're not saying that we shouldn't be constantly enhancing our sites and adding features. But as we do so, we have to take care that as we add these features, we ensure that our pages continue to load fast. So an approach that we've seen that's led to great results here is the practice of establishing a performance budget. And popular tools and frameworks, like Angular, Preact, and Webpack, have built in support to define budgets and enforce them. These budgets can be based on the bite-size of your resources, or they can ensure you hit target metrics and scenarios. For example, you can specify that your site should load in under five seconds on a mid-range smartphone and a high-latency 3G network. The team at Pinterest have set a great example of using a budget to guide their optimization efforts. We'd love to share a video that explains this process now. Let's roll the video. Pinterest's mission is to help people discover things, collect them, organize them, and then find ways to apply them in your life. With more and more people on the go, the mobile web has become central at providing our discovery experience. But our mobile web experience in the past was basically an upsell for the native app, which brought us to the realization that we needed to fix it. The technology was already in place for us to be able to do so. And so we brought a team together to rebuild the mobile web from scratch. Having a fast mobile web was crucial to the success of the project. We made sure that we split out what was sent down to the user to be only the crucial things to start, and then everything else that wasn't immediately important sent down later on. We made sure to test out on average devices on 3G, just like our users would be using. And we could see the dramatic difference that there was on that initial time to interactivity. By using modern caching best practices and service worker, even if you're on a bad connection or have no connection, we were able to preload the user interface for follow-up visits. Like the native app, our site was optimized for touch interactions. This immersive experience resulted in mobile web becoming our top platform for new sign-ups. We wanted to make sure that the users for our mobile web continue to use the product as time goes by. And one of the most important technologies that's been added to browsers was the ability to add that site to your home screen. Pinterest is not just about the content, but about what you do with it. The browser is a discovery platform, so making it easier for Pinterest to use our own discovery service is really a perfect fit. Thank you. Pinterest is a great example of doing performance right. And Zac from their team is here to share more with us later today. Now let's talk about another example, Wayfair. After experiencing some performance regressions, they created an internal dashboard that provides a simple stoplight system for their developers and keeps performance top of mind. Since they implemented this system, they've seen consistent speed gains across their sites, and their year-over-year conversion rate has increased by over 10%. OK, while we're talking about speed, we'd like to tell you about two new web platform features that we're implementing in Chrome that we think may lead to more instant and seamless web experiences. Web packaging is a new feature that allows developers to sign a web page with a special encryption key that proves the page's original domain and creates a sort of package that can be served from anywhere and that the browser can securely represent with the page's original domain. Now, Portals. Portals adds a new iframe-like element to HTML that allows users to seamlessly transition into the portal's content, making it a new top-level web page in the process. Taken together, these new standards enable the browser to securely preload pages and deliver experiences like this that transition to the new site instantly. Maybe I'll show it again. Sure. Tapping you're right there instantly. Tomorrow, we'll talk through more of the details and explain how you can start experimenting with web packaging right now. We're pretty excited about this in the impact that we think it can have on the web. Loading fast is important, but so is delivering a buttery smooth UI once the page is displayed. Buttery means responding to user input, like taps and typing, instantly and ensuring that the page doesn't jank or sort of skip around as the user scrolls and interacts with it. Now, traditionally, this hasn't maybe been the strong suit for the web, but we think that things are changing. So today, we're releasing Squoosh and is an example of how responsive complex apps can be on today's web. It demonstrates a really fast-loading experience using WebAssembly to compress images using C and C++ libraries and employing web workers to handle long-running tasks in the background, enabling a smooth UI even while the app works really hard. Now, this is a full PWA. It works across mobile, desktop, tablet, and offline too, thanks to ServiceWorker. Let's use Chrome's DevTools to go under the covers of Squoosh for a moment and take a look. Here on the screen, we can see different browser processes that work in the app. And if we zoom in to three of them, the main process and the workers, we can see in the main process all these vertical lines. And each vertical line indicates when the main thread's busy and the app can't respond to user input. And you can see here they're all generally pretty narrow. And then you can see in the workers, we have these really long bars representing these long-running tasks that would shank the snot out of the UI if they were in the background. Now, if Jake can get his nerves back, he and Mariko are going to join us later and do a session on how they're able to build this application. So sometimes there are tasks that you can't actually move off of the main thread, such as code that updates the UI. With the recently released off-screen canvas feature, now in Chrome and behind a flag in Firefox and Opera, helps here by letting you paint to image surfaces like canvas and WebGL in a worker. And then copy the image buffer back over to the UI in a single fast operation. The video here shows how off-screen canvas maintains a smooth UI even after we artificially add code to make the painting process expensive using that jank bottom in the middle. It's pretty smooth. Tomorrow, we're going to tell you about more features that are coming to the web to help with smooth, buttery UIs, such as new APIs for background code called worklets that make tasks like animation, audio, custom painting, and custom layout easier, a new web component called a virtual scroller that makes it easy to develop really smooth scrolling views over large data sets, and a task scheduler API that gives developers more control over how the browser spends its time. That's a lot, but as Mariko said, you could never add enough butter. How true. So having a fast-loading responsive website is key, but so are the things that it actually does. So on that note, let's talk about some of the web's latest integrations with the underlying device and operating system. Let's take the Spotify PWA as an example. With it, users can go straight from a link right into Spotify without having to install anything. And with the web's full support for background audio, DRM, and offline, Spotify can provide a full featured web experience. And now Chrome supports desktop PWAs, letting apps like Spotify run in their own windows and be easily installed on Chrome OS, Windows, Linux, and soon on the Mac. I think desktop PWAs are really handy when you've got lots of tabs open, like Dion, as I mentioned earlier, and you want to keep your favorite stuff really easy to get to, like with the Twitter PWA that we're showing here running as a desktop PWA in Chrome Canary on the Mac. And what's really cool about Twitter is that they've got experimental support that enables their mobile PWA to run at desktop screen sizes, as we're showing here, which has kind of been sort of the dream of web development for a long time. Well, on the topic of desktop web apps, we also recently implemented new web APIs in Chrome that enable unfettered access to input devices. So web apps can receive full keyboard input elements, sample games pads at high resolution, and enter immersive full screen modes. All of this is perfect for apps like the recently announced Google Project Stream shown here. Speaking of media, we've also taken the recently released picture-in-picture feature that we have on mobile video over to the desktop, which makes web video on desktop more of an integrated experience. And another important new web API is WebOrthN, which enables websites to integrate with biometric sensors and other forms of multi-factor authentication. It's currently implemented in Firefox Opera Chrome, coming soon to Edge, and it can make web checkout a seamlessly secure experience. So in here with the checkout and with PayPal, and it displays the authentication challenge as integrated with the device. So as the web's capabilities increase, it's also important to augment the security and the privacy of the platform and ensure that everyone has an opportunity to participate in the open digital economy. This is why we've been leading the development of advanced new privacy techniques, like federated learning and secure aggregation, that enable personalized digital experiences that also have the strongest privacy guarantees. And we've been hard at work reviewing the fundamentals of how the web works with respect to privacy and personalization. And in the next year, we'll be shipping new features into Chrome, as well as new server-side technologies that help us uphold the highest standards of user privacy with regards to data collection and usage. Now as the web evolves and we get new capabilities, we're constantly focused on interoperability, on how well web apps work across browsers. And we know this topic is top of mind with developers too. To this end, we've been collaborating with other browsers on an open-source, comprehensive web platform test project. And we're pleased to share that these tests, the browsers are becoming more interoperable as measured by these tests. And we're continuing to collaborate with the other browsers on reference docs for the web on the Mozilla developer network. These efforts are resulting in a less fragmented developer experience for all of us, which frees us to spend our time not chasing down compatibility bugs, but on adding more features to the platform and performance budgets. We also think it's more important than ever for us to make it easier to create high-quality web experiences. So to this end, we've been working on a new learning website called web.dev. On web.dev, we start out by explaining the principles that we've found lead to top-quality sites, such as speed, discoverability, and reliability. And we follow these up with guides that explain why you should care about a given concept. They provide clear tutorials and offer plenty of sample code. We've also partnered with Glitch to embed their popular coding tool right into the experience, which provides an interactive learning environment for getting hands-on and letting you remix and test your code. And we've integrated Lighthouse into the web.dev experience, giving you a platform that lets you track the scores of your websites over time. And if your site isn't quite at a perfect score yet, it also gives you instructions on how to resolve the specific issues that it's found with your site. So that's web.dev. We'd love to get your feedback, especially while we're here together at CDS. And by the way, if you like that .dev domain, check out get.dev for details on how you can register on for yourself in the future. We also have another fun learning project that we want to share with you. We've collaborated with Dave Getties, who's created interactive tutorials like Flexbox Zombies and CSS Grid Critters. These are real things, and they're really cool, to develop Service Workies, an online adventure that helps you really deeply understand Service Worker soup to nuts. It's a fun, free, engaging way to learn. So please head over to serviceworkies.com to sign up and start the preview levels that launch just now. Now, we've also got plenty of updates to our developer tools and libraries that we're going to share over the next two days. But there's one new tool that we'd like to tell you about. We call it Visbug, and it puts a new spin on how developers and designers can interact with web pages. We'd like to give you a demo. And to do that, let's invite Adam Argyle up to the stage. Please welcome Adam. Hello, guys. Thanks for this opportunity. So developers, you got a lot of tools, and, well, your keynote is amazing so far. You're spitting fire. I'm back there laughing, and I'm telling you, it's awesome. So I wanted to give some tools to people that don't generally feel like they have a whole lot of power on the web unless they open up the Chrome DevTools. Chrome DevTools, of course, are omnicapable. But, oh, that's right. I got my screensaver. Came on. Let me just type my huge password here, because. That's a cool screen site. Oh, for sure. Got to love that. OK, so I'm going to hit Play on this side, because, OK. So I wanted more people to be able to contribute to good web experiences and be able to inspect and dissect things. And so consider what Zeppelin is as a designer to develop her handoff. I've created this thing called Visbug that essentially gives those tools in reverse. So this first tool here is the guides tool. Have you ever held a piece of paper up to your screen and be like, ooh, this is lined up? There you go. There's even, like, I think, a Chrome extension that just does this one thing. And so you can come down here, you're like, oh, that footer. That looks generally aligned. Yeah, let me just kind of hover a little. Yeah, well, it's great. And this is kind of interesting. Look, I can go into a nested hover state and still check what's going on there. So that's just the grid tool. There's a whole bunch of tools. I'm going to do my best to show you more of what's going on here. This is the accessibility tool. I really want accessibility to be something that more people are aware of. It's a little, there's just too many steps to find what is there. So this, you just hover now. You just hover for color contrast. You hover for surfacing aria roles and tab indexes. So basically, the things that you're generally looking for are now a hover away instead of maybe a five or six clicks. And the same sort of thing is for styles. So you can hover over SVG. You can hover over buttons. Nothing is off limits to Pixelbug. It's kind of punk rock. It's like, hey, is there Dom there? I'll look at it. I'll tell you what's there. And so here's what you. And so let me go through a couple more tools. I really like the hue shift tool. And so if you go download this Chrome extension, you just have to hover over a tool. And it'll show you how it's used. I'll do my best to walk through the keyboard shortcuts that I'm doing. But it's kind of like design Vim at the moment. Anyway, it's super fun. So what I'm going to do, I'm going to select this path. I'm going to make sure I got my hue shift tool. I'm going to hit Command E to expand my selection. I'm just going to hold it. And look at that. So I selected all of those path nodes. The way that that worked is it expanded based on the node name and the class name. It found similar elements that were siblings. And I'm just going to add some black here. Is that magical? It feels magical. If I hold Control, I can make my selections go away. So I can be like, ooh, do I like it? And in this case, I think black's wrong. I'm going to add some white. I'm going to hit Shift and Right to add some hue. And then I'm going to rotate the hue with Command Shift and down. So I'm rotating the hue by values of 10. And now I can explore color palettes. I love this particular tool. It's HSL-based. It's awesome. So another thing I want to show you real quick too is the Move tool. You can just move things in the DOM around. You click stuff, and you move it with the keyboard. Right? Why haven't you had this before? It seems to make so much sense. So I'm just going to rearrange it here a little bit. I'm going to hit M for margin. And I'm going to hit Shift Up. So Shift Up, Shift Up, Shift Up. I'm just adding 10 pixels of margin to the top. So consider that these little quick tasks were things that you had to nest and find. And now you can do them in the chaos of the browser in production. I wanted the DOM to be the source of truth. I wanted a design tool that treated the DOM as a source of truth. Anyway, I like this site because it's like, ooh, super flashy. And this tool doesn't care. Let's get a little meta and take a quick look at Squoosh, which was just introduced. Super rad. And the first thing I want to do is talk about some of the additional tools in here. But I want to troll Jake a little bit while I'm up here. So what I'm going to do first, I'm going to grab this image. And I'm going to turn it into myself. So have you ever wanted to just swap an image on a web page? It's just drag and drop. Why hasn't that been there? A lot of the stuff I do, like here's another one. Double click for text editing. Let's just make this drag and plop. Because, again, I'm trolling him. We'll go back here to my little Inspect tool. We'll look at what styles he's got in here. Nice and good flex box. So I'm going to select this image. I'm going to hit Command E again. Here's a fun idea. I borrowed from XD. So I'm very inspired from XD and Figma and Zeppelin and even developer tooling, too. So watch this one. I love this one. I'm going to go in here. I'm going to grab two images. I want to grab a picture of me. I wish I had other pictures. Who wants to see my face multiple times? Anyway, I want to drag in two images. And if you remember, we had, oh, hey, come on. Take focus. Take focus. Take focus. Oh, good. I was just impatient. Here you go. And I'm going to hover there. Ping-pong. Just sort of was like, hey, how many? I don't care. It'll just fill it up. Super fun. OK, so we're done kind of like trolling his home page. Let's actually go do something meaningful. He asked me to do a design review. OK, so I hid my tools. The site doesn't even know I changed it. Let's drag in something fun. I like this Christmas eggnog picture. Yeah, this is good. Me and my wife. Hello. And so we have this very complex website. It's backed with Wasm. And maybe conceptually, you're just like, there's no way I could kind of help design that. Well, of course you can. It's Pixelbug. It doesn't care. So I'm going to expand it. I'm going to get some things into like a nested state. Something that's theoretically harder to design with. And I'm going to darken this site up. I'm a fan of like Retro Wave right now. And I love those like purples, pinks, and stuff on dark. Let's do that to this site really quick. So I'm going to launch Pixelbug. And we're just going to use a couple of features here. So I'm going to hit this header, because I think these need to be a little bit more pronounced with some accent color. I'm going to expand my selection by clicking a class name. So what's cool is BEM and just dynamically generated class names. What they do is they create a consistency between related nodes. And so I leveraged those. You just make a selection. And you can hover on the classes tool. And they'll pseudo-highlight. Anyway, this tool is so full of features. I'm having a hard time talking slow. OK, so anyway, I got these headers. I just want to spoof these up. So I'm going to get rid of their opacity by doing command shift right and left. You can manage opacity. I'm going to add some white by hitting shift up. I'm going to add some hue by adding shift right. And I'm going to change the hue to hot pink. Super rad. OK, so then I'm going to go in here. And I'm going to darken this up. I like how transparent it is, but I've got this darkness vibe. I just dark. Just darken it up. OK, and we'll come down here. And this should look like magic right now. So I'm just doing shift down. I'm just adding black. Now this particular node, he's a little tricky. Look, he's a number input. You can navigate the entire DOM with your keyboard. So I'm going to hit Tab. I just tabbed me to the next child. Hit shift down. I'm going to black that out. That's fun. I'm going to grab this. I'm just going to black that out. And we'll get rid of the tool. And I will send a screenshot to Jake. And be like, this is how it should look, dude. It should be pink and blue. Come see me in the forum. I've got more stuff to show you. I mean, there is like, it's weird. It does a lot of weird stuff. And it's really fun. Nothing is awful amidst this tool. And I hope content writers, web designers, just people finally have a tool that helps empower them in the DOM. It should feel like a document. It should feel like an art board. That's the illusion I'm trying to go for. Awesome. Thanks, guys. Thank you. Give it up, Adam. That was awesome. Thank you so much, Jeff. It's been a pleasure to reflect with you on the past 10 years and what's new for the web. Before we go, we want to give a brief mention to Chrome OS. It's a great way to engage with the web and with support for Linux and Android apps. It's also ready for web development. We're offering a 75% discount on the Google Pixel book to all CDS attendees so you can check it out. The vouchers will be available tomorrow morning before the first session begins. So don't party too hard tonight. And with that, thank you very much for joining us here this morning. And let's all work together. Thank you.