 Thank you everyone for joining us here at the fifth Chrome dev summit Yeah, thanks for everyone come in to Yorba Buena into San Francisco and for everyone on the live stream We have an exciting couple of days for you. I'm Ben Galbraith. I'm product lead for the Chrome platform team I'm Dion now mayor Google's developer relations lead The two of us have actually been working together for over 20 years on the web across Mozilla palm web OS and his developers building native and web Experiences and now we're working with the web community here at Google and we couldn't be more thrilled The reach of the web is truly massive with billions of people all over the world using it constantly And people use the web no matter the device. That's what's so special about the web Whether you're creating experiences for desktop or from mobile and whatever device is going to come to us tomorrow The web is going to be there for you, but back to the day We're really excited about the quality of experiences that we can build on today's web platform For the past few years. We've been talking a lot about progressive web apps PWAs are defined by specific new capabilities that we've talked about before like service worker, right? But for us PWA really is about providing users with fantastic web experiences the load really really fast That seamlessly integrate with the user's device That are reliable in the face of uncertain network conditions and are really just highly highly engaging We find that developers who embrace this philosophy who take advantage of the latest web capabilities to optimize the performance of their web Experiences are seeing great results Take Travago a major travel services company who bet early on PWA They started experimenting with a small team of three developers and a designer and after seeing initial promising results They kept iterating and today they have launched PWA experiences in 33 languages in 55 countries and Travago have seen a hundred and fifty percent increase in engagement for users who have added their site to the home screen and 97% overall increase in conversions We found that these kind of amazing results are typical of developers around the world who make this sort of investment This is made possible in large part by the broad browser support for service worker Including browsers in the next billion users regions of the world And we're so excited that both the Microsoft Edge and the WebKit teams have announced that they're working on adding service worker support We think this is big news that really signals the global demand that we've heard for PWA features I don't think I've ever seen so much enthusiasm for a single diff Yeah, and then again when people found in the WebKit console that the service worker object was right there To what a blow-up Amazing As we've worked with companies that actually use service workers. We've seen common patterns time and time again So we package them together in an open-source project that we call work box This encapsulates what we've learned into a library that you can then just incorporate into your own code Using workbooks means instead of boilerplate code such as this you can bring it all down You can choose from a set of caching strategies that are available to you and just choose the one that makes sense So you take work box and it really streamlines the creation of service worker enabled sites and is used by 70% Of all ship service worker sites around the world today. Definitely recommend that you check it out Service worker requires that sites use HTTPS for all their requests So this gives us a natural opportunity to check in on our efforts to drive HTTPS adoption around the world We've been at this for many years now and we've been evangelizing the importance of HTTPS and Investing in making it easier for developers to migrate such as by sponsoring the let's encrypt effort along with many other companies in the industry We're pushing hard here because migrating traffic to a secure transport layer is one of the best ways That we can provide security and protection for our users We closely monitor how much traffic is passing through HTTPS in Chrome and we share this with the community in our Transparency reports the latest of which we just released this morning and we're really pleased with the results For example on Android Chrome is now serving 64% of its traffic over HTTPS Which is a 50% increase year-over-year from the prior year and we're seeing strong increases on other platforms, too Also worth noting 71 of the top 100 sites now default to HTTPS Which is also a big year-over-year increase over 37 sites last year So when you consider the huge size of the web these kinds of changes these increases are almost stunning But we know that we're not done yet Earlier in the year we started to mark all insecure forms that accept a credit card number and password as unsafe What you're going to see from us this year is we're going to mark any insecure form as unsafe So if you aren't on HTTPS yet now is the time and it's never been easier Speaking of forms We think it's really important to streamline the form data entry experience as much as possible We want to take away as much the friction in the experience as we can and on mobile, of course This is even more important Autofill is one of the ways that we do this in fact over nine billion form interactions every month are aided by autofill And we found that on Android we save over 12 seconds on the median form entry when autofill is used So as developers we have a big impact on this performance By ensuring that we hint our forms with autofill completion hints giving our users the smoothest possible experience with autofill Chrome autofill's ability to store credit cards and synchronize them across all of your devices is particularly helpful with web payments But there's an opportunity to do a lot more here to make web transactions easier So we've been working on payment request the new API and browser UI for facilitating web-based payments J crew the American fashion brand here recently implemented payment request and they've seen great results Let's take a look at this flow as I buy this lovely pair of bear socks Once I've decided to buy I'll add it to my bag and start the checkout flow When I click check out now, we're seeing the payment request UI in action rendered by Chrome Giving me an easy and fast way to share my payment and shipping information with J crew Resulting in a very fast transaction 50% of their users are now going through this flow on both mobile and desktop and it cuts down the transaction time by 75% this new experience works wherever payment request is implemented That's currently in Chrome edge Samsung browser and both Firefox and Safari have announced that their support is coming Give it a try It's also worth noting that payment request is a particularly good fit for mobile In fact, I want to give a mobile example now with fancy.com This is a marketplace for discovering cool new products and they've just integrated payment request Also with the Google payment API Which is the best way to get access to the hundreds of millions of credit cards and debit cards and other forms of payment Like PayPal that Google have on file for users and the Google payment API was actually just opened up this morning to merchants We're already seeing the payments ecosystem embrace payment request to This example stripe they recently integrated the Google payment and payment request API into their platform with their beautiful stripe elements library another major area of form-filling friction and frustration is Authentication you'll be shocked to hear that we found it to be one of the biggest reasons why users never return to a site And I'm sure that we've all had experiences that feel just a little bit like this one No So we're excited to share that today we've launched a new sign-in library to help This library allows developers to take advantage of the fact that millions of users have already signed in with Google properties And allows you to offer these users a one-time one tap sign-up experience For example here. I'm using Zillow to browse for my new home I'm visiting the site for the first time and I want to mark this obviously affordable San Francisco home as a favorite But to do this I need to create an account Because Zillow is using the Google sign-in library and I've already signed in to Gmail and Safari I'm able to do that seamlessly with a single tap It was just there and gone the dialogue that you saw pop up from the bottom was all that was required to create the account and In this example with the popular travel website kayak it shows how the library facilitates subsequent sign-ins with similar ease And the Google sign-in library also integrates with the credential management API if the user already has a username and password saved and It's based on an early draft of an open ID standard Thank you Let's switch gears and talk about media Media is one of the biggest use cases on the web both for consumption and sharing Mary Mika just had a report where she shared that some people spend five and a half hours a day Interacting with media on their devices. That's like two blade runner showings back-to-back. That's a lot of blade runner. That's a lot of blade The recent deprecation of flash really shows just how capable though the modern web media platform is Here's an example of joy cinema where they bring this all together and show really really nice web media experience that shines The web has been adding deeper integrations between web media and the underlying operating system and we've implemented these in Chrome For example with the media session API your web media sessions are synchronized across devices and UI surfaces on Android Just as your users expect even when the browser window isn't open and with Android Oh, we've already added support for picture-in-picture Ensuring that web content is a first-class media citizen on the platform We mentioned media sharing earlier The camera is obviously so important with mobile and we recently updated the image picker UI in Chrome to make it easier for users To upload their content right from their gallery as you can see here in this example with Twitter's web property Then when you get access to the live camera feed using get user media It now gives you full frame access and the ability to control the camera hardware Such as engage in the flash mucking around with the ISO levels and so when you put all of this together You can really create amazing things Take Instagram the popular photo sharing experience They've invested in mobile web support to make it easier for users that have devices with constrained capabilities Or are using generally unreliable network connections to do that They're taking advantage of adaptive bit-rape streaming using the open-source Shaka media player They're using image capture and filters web GL add to home screen and service worker powered offline support And they're even using the new background sync capabilities and more They're here at the Chrome dev summit with a booth that you can check out to see a demo of all this And they're also participating in a talk tomorrow where they explain how they're building this experience. It's pretty cool It's really cool. It's great work So these media APIs are no important way to create web experiences that feel tightly integrated into the user's device Let's continue in that vein. Today. We're announcing a new way to integrate your web content with Android So originally the way that you integrated web content with Android apps was with the web view API Which is a modern web render inside of the Android SDK Then we created custom tabs which allows you to take advantage of the user's browser to render web content in your Android app The advantage to using the browser is that custom tabs provide a consistent rendering experience across a wide array of Android devices And it provides access to the user's profile such as cookies autofill data and more However, this experience is designed with opening other websites in mind It's kind of a mini browser embedded inside of the app. So we continue to show the toolbar at the top of the screen So that's great If you're building something that kind of has to keep going out to different content like a RSS reader or something But what if you want to use content on your own website? You probably don't want to show a toolbar within that experience Instead you can provide the right experience directly in your app And this is now possible with the new capability we're announcing today called trusted web activity By launching a trusted web activity any Android app can directly include app-like content Serve from their own site with the benefit of custom tabs, but running full screen This enables you to combine the best of native and web in one experience on the website That means up-to-date content small on device footprint And you can share this across all of your platforms and from the Android side You can take advantage of everything Android has to offer such as access to Android activities and services and Integrating with any other aspects of Android such as the Android end app shortcuts that you see in this example We'll be releasing a preview of trusted web activity support in Chrome developer channel soon And it'll be available in the Android support library. So other browsers will be able to support this try it out And let us know what you think Now Let's move on from platform APIs and integrations and talk about the core primitives of web development The holy trinity if you will of html JavaScript and CSS These are the key technologies that you work with day in and day out and they've each landed massive upgrades that you can use today First up html One of the recent big additions here has been web components Which gives you a cool new way to share complex functionality by defining your own custom html tags It's a great way for you to encapsulate complex front-end functionality into reusable components That can also be integrated into a wide array of web front-ends We've course created the polymer project to facilitate the adoption of web components even across browsers that didn't yet natively support them This has been kind of a breakout year in my opinion for web components throughout the entire industry With browsers like Safari recently ship in built-in support and with new tools from the community like Svelte skate and stencil For some reason they all have to start with the letter s. I'm not sure why But we're starting to see a web community Come together for this tooling ecosystem and these things are starting to feel a little bit different They're feeling more like compilers than libraries where they generate lean and fast web components that are ready to use To make web components easier to use with today's web frameworks We earlier this year launched a new site called components custom elements everywhere It helps you understand how each of the frameworks supports web components So you can make great decisions and understand how best to integrate them with the web app that you're building and Developers all over the world are seeing the benefits of web components William Sonoma is a great example of an ideal use case because they own the portfolio of lifestyle furniture brands And so they need to reuse a lot of common web front-end code across a variety of different sites They're using web components and it helps them achieve this reuse and also interoperability with a variety of web frameworks And here at Google we're betting big on web components our widely used mobile framework amp relies on web components to provide high-performing domain-specific tags for specific use cases like news websites or as shown here e-commerce sites like Overstock with over four billion amp pages across 25 million domains loading in half a second on average amp is a great example of web components at scale and they rely on web components as the technology that helps them deliver their easy-to-use tag vocabulary The latest version of YouTube also embraces web components and uses polymer Resulting in an experience that's up to 15% faster than the previous site YouTube developers have actually been able to reuse over a thousand custom elements across the multiple sites that they build Which is a really big deal for that team So that's some of what's happening in HTML Now let's talk about CSS. We've all gotten a cheap laugh out of this old chestnut It's such a cheap shot, you know, but you know what we think modern CSS is actually genuinely awesome now For us the biggest news here is grid layout Which really gives you an amazing way to define fluid responsive layouts for a modern web application and Community resources like grid by example show you exactly how to make it work for you with tons of specific layout examples Kudos goes out to Rachel Andrew for all of our hard work in the community here It's great to see how these things work together For example using grids for your app combined with flexbox for components kind of feels like a match made in heaven And what's most exciting is you can actually use all this stuff There is broad browser support for grid layout. So now's the time to dig in and apply it to your own web experiences This takes us to JavaScript the last member of our Trinity so to speak and it's had a fascinating history Going from its origins in the 10-day epic hack at Netscape to Unfortunate episodes like entire versions that were spec'd out but not fully shipped. Yeah, does anyone remember ES4? Yeah Action script, you know, it was a thing half-life That time fortunately does feel like a bit of a distant memory as modern JavaScript has come a long way with browser support Iterating and improving rapidly. In fact in the last year the majority of browsers have shipped Compelling support for a whole new batch of features in JavaScript known collectively as ECMAScript 2015 and Chrome's coverage is now basically at 100% you see a whole sea of green There's only one small feature that the browser community has all generally agreed wasn't a good idea and won't be implemented So it's basically all here. Yeah, I love seeing all this green Modern JS of course brings us classes arrow syntax Async away and a huge range of features that make it easier productive and plain fun to build on the web We've also shipped module support along with others like Safari and we're working on fully shipping dynamic imports We believe in the next year modules will be the way to build and deploy your sites I like this code sample because it shows off dynamic imports And this is actually really important because we're constantly optimizing our sites to be as fast as possible in the initial load And this enables us to restructure how we think about JavaScript so that we just serve what's needed for that initial experience and Gradually suck in the rest of our resources as we need them. It's really pretty cool Of course all of Chrome support for these new JavaScript features comes thanks to V8 our JavaScript engine We just shipped a really ambitious new release of V8 that has a completely new rearchitecture That has resulted in substantial performance improvements We have a whole talk that goes into detail on this tomorrow We wanted to share some of the highlights for you starting with the speedometer benchmark Now this is a benchmark that has a reference app That's written in a bunch of different popular modern web frameworks And we exercise a V8 on it and we found the new architecture has resulted in a 22% speed improvement for us On speedometer We're also looking at V8 performance in the top 25 real-world websites And we found a 5% performance increase with the new version and Finally looking to the future. We have this benchmark Airy 6 That is focused on measuring V8 performance running the next generation of JavaScript features Anticipating broad uptake and preparing us for the future of the web and here we see a 40% speed improvement So we're really excited about what the team has been able to accomplish in optimizing V8 So these improvements are really important, but not just for Chrome also for Node.js developers Are there any Node developers in the audience? There we go. There we go. Very good. Very good. Where V8 of course is the engine of Node and the V8 team takes this very very seriously We have dedicated engineers working to support Node and we don't allow any commits into V8 if they break Node itself V8 also provides support in Chrome for something called web assembly commonly referred to as wasm Of course wasms we talked about last year provides a compilation target for low-level code Such as C or C++ and it provides bindings that enables that code to access the capabilities of the browser What's exciting for us today is that wasm is now finally available across a huge swath of the web with support in Chrome Firefox and Safari across desktop and mobile and coming soon in Edge Wait a minute. I think Edge actually ship support of this and are rolling it out to all of their users as we speak on stage today So for the first time since JavaScript we have a new widely supported runtime target in the browser We think this is huge news We want to give you a feel of what wasm actually enables So the Google Earth team threw together a quick demo of their low-level code base utilizing WebGL Compiled for wasm and running in Chrome It's incredibly exciting to see this kind of functionality come to the open web and We're pleased to share that both Unity and Unreal Engine have announced that they have plans to support wasm with their market leading game Engines so we think this is going to be a really exciting space to watch in the coming months. It's a big moment for the web So we've just talked about a bunch of updates to the web platform There is a lot to keep track of and so it's more important than ever to have up-to-date documentation for all of this That's a really big job And so we're excited that last week Mozilla Microsoft and Google all came together and shared the news that we've teamed up to place all of the web platform reference Docs on Mozilla's developer network site along with Samsung and the W3C We've actually been collaborating here for quite some time But with this announcement we formalize the partnership with the creation of a new MDN advisory board This is just one of the many ways. Oh, thank you for the This is just one of the many ways in which the browser vendors are collaborating actually I think there was an MDN staff We know it's really important to you to build applications on a web with really broad compatible and predictable semantics So we're also pleased to give you an update on the web platform test project Which we talked about before we're pleased to share that over the past year We've increased the test pass rate by 18% in Chrome and fixed over 500 interrupt bugs We're continuing to make progress in this area And we've also seen Safari Edge and Firefox make similar improvements all of us working together to make the cross browser development experience better All right now We want to touch on some of the work that we're doing in the tooling space to make developers more productive Our flagship tool here is of course Chrome DevTools, which is directly integrated into Chrome itself to help with daily web development tasks and one of the most important features of DevTools is Lighthouse which provides you with a detailed audit of your site and Offers you actionable steps for improvement and Lighthouse can also be run from the command line So you can easily integrate it with your continuous integration infrastructure, which I'm sure all of us use to ensure our web apps are Of high quality we're going to share more details on the latest updates for DevTools and Lighthouse tomorrow But let's get back to continuous integration for a second We recently launched Puppeteer a new open-source project to control a headless Chrome instance intended for use with testing and automation We actually think it's incredibly powerful to be able to fully command Chrome with simple script just like this Anything Chrome can do is a quick function away It's pretty amazing. In fact, it's kind of weird to there's a website We have called try Puppeteer that you can go to where you can actually exercise Puppeteer Which means you can run the headless Chrome inside of the head full Chrome and then render HTML through the it's tried up It's great So tools like Lighthouse and Puppeteer give you incredibly valuable insights But it's important to remember that on the web your users can come from all over the world as we talked about in the beginning And because of that they're going to have very diverse ways of experiencing your site Now web page test is a vital tool here giving you detailed site performance information from locations all across the globe You should make a habit of checking your site a web page test org slash easy to run against real devices And it even integrates with Lighthouse plus you'll get bonus points from Alex Russell if you do so and Today though, we're pleased to announce a brand new project that can help give you an even larger performance perspective We call it the Chrome user experience report It provides a snapshot of how Chrome users all over the world are Experiencing a sample of popular websites across mobile and desktop devices and various network conditions In this initial release, we're focused on loading metrics such as first contentful paint All of this data is published to BigQuery where you can use a sequel like syntax to analyze it In this example, we're running a query that returns the fraction of users who get a first contentful paint event on Google origins in under a second As you can see it's pretty fast We're excited to share all this information with you And we're looking for your feedback on the structure of the data set the metrics and the dimensions of everything that we've included here Let us know what you think All right We started the talk telling you how excited we are about today's modern web platform With a steady stream of new capabilities expand expanding what's possible in web applications And with the core primitives HTML JavaScript and CSS being dramatically upgraded and green Across all of these different modern browsers and an entirely new cross browser runtime target with the web assembly And a bevy of new tools and other support resources We hope you agree the modern web is truly an amazing platform And across the world Developers have noticed and are dramatically upgrading their web experiences and reaping big benefits We've touched on a couple of examples here as we've talked this morning But over the next two days you're going to see a ton of real world case studies and great demos That will help you see what you should be building in your web apps More importantly while we're all together. We want to hear from you and understand what you think we should be doing next So let's all have a great conference and work together to build a better web. Thank you. Thank you