Keynote (Chrome Dev Summit 2019)

The. Year, was, 1993. Now. I realize that some of you may not have even been born yet but. For me it was. The year that my parents first brought home our. Internet. Capable, computer, the. Commodore, Amiga. 4000. Frogger. Never, looked so good, yeah, sure WordPerfect. Was still on 19, three and a half inch floppy disks but, I had a 9600. Baud, modem for, the first time the. Possibilities. Were, limitless. Now. I grew up in Canada so, like, any self-respecting Canadian. I have a healthy obsession for, hockey and my, team is the Edmonton Oilers and if, I'm honest with myself my. Love for computers started, because of hockey bulletin boards. Weeks. After I got my first computer I had a friend of mine who said to me I have to download this so-called, browser called, mosaic and visit. This thing called a URL. Well. 22. Seconds, and 37. Beautiful. Modem beeps later. It. Was everything, I hoped, it would be I was. On the. Web I. Was. Hooked I checked, this website every, single day before class that's, a big deal for me because I'm not a morning person but every morning I would wake up and have a look at this website, and my, friends and I we would actually start exchanging notes in class with, URLs, on them that we had found the day before which, was a big deal because this is 1993. So there are no search engines, so finding a URL that actually worked and had interesting, content, was, a pretty big deal now. About a month of this went on and I thought to myself I want to create my own site too so, I started researching stuff like, FTP servers. And domain registrar's, and hypertext. Markup language but. I remember most was the, first time that, I viewed source. It. Was. Like, being led. Into this open, secret. Club where, I could see the HTML, for this site warts and all and being invited in, it. Was where source. Code was where people, knowingly. Allowed. You to see, and share, all, of this really interesting code, that allows you to accelerate your own work and share the expertise, so. I did what most first-timers. Did I copied. The HTML, into, VI I edited. To, make it look like it was my own and I. Pushed my changes live with an original which is linked back to the original site of course and. My. Code by the way didn't look anything like, this this looks way too nice for 1993. I had a lot more table, and break tags. Well. Today, nearly 25, years later were all members of this amazing. Vibrant global. And growing community now, we all have our own story for how we first got started but I bet for many of you it's not too dissimilar to mine it, was because you wanted to be part of this, broader, community. And that's. Why today we're. All here to, take a moment to, recognize and, really. Celebrate. The. We in, web. Because. The web is so much more than, any one company, any one, product or any one person, it's. All of us. What. Started, with mosaic, and navigator. In the 90s has, grown to dozens, of web browsers across, the globe each, stretching. And improving, the end-user experience, in significant, ways, Microsoft. And ie actually, jump-started, the Ajax era with, the H team xml, httprequest, bringing. Powerful, interactive, apps to the web, apple. And safari assured, in the mobile web with key technologies, like offline and geolocation, and, of. Course mozilla and firefox. Who, continue to shape the modern web from the initial phoenix project to, SVG, and canvas and, to, their critical privacy, and security, work. Meanwhile. What started off as a small group. Of coders has. Now grown into a family of more than 17. Million developers. Worldwide and we're on track to more than double in, the next decade about.

A Thousand of us are here in San Francisco today and tens, of thousands more are watching, on the livestream in meetups, in places, such as Amsterdam, Brazil, and Uganda. Hello, everyone and, of. Course the fact that each of us can contribute to, this amazing community and this web's future, is what, makes all of this so unique. When. You consider our contributions. Together they are staggering. We. Are there are now more than 1.5. Billion. Active. Sites and web applications, on the Internet today. They're. Serving, more. Than, 4.5. Billion. Users. All over the world it. Is a tremendous, responsibility, and. Opportunity, and, one that's only possible, because of this incredible, web platform, that, we have now. As a community we're, going to debate and we're gonna even argue, but, that is how we create, something truly great after. All the contributions, to the web come, from everywhere, with, no single company or individual. Owning it and that, is very much working as intended. Celebrating. The we in web is naming, how we're better together because, of this diversity because. We're all here to move the web platform forward, and events. Like c.d.s with. Many different companies and developers represented. Are really, critical, to, reminding, us of this fact if, you. Remember only one thing from this morning please know that, chrome is here, today and every, day to, show up as one. Small member of this much much bigger community, and so. With that in mind we're here at CES to. Highlight some of our recent contributions. In three. Key areas. So. Today we're going to talk first about the platform, itself and as developers were highly, motivated to address some of the web's key, challenges, for. Example diversity. And reach of the web is core to what is great about the internet but it's also one of the reasons why interoperability, remains. A top concern this. Morning John is going to share some, of our efforts to improve. As well, as key investments, were making in platform, performance, and discoverability. The. Second is developer, experience, and Dion's, going to share some of the recent work we've done on productivity, frameworks. And open, source and. Finally. The. Chrome browser itself. Teresa, is going to share some of our investments, in a more helpful, inclusive. Experience, for. Our users. But. More importantly, more than all of that I want. To say thank you thank. You for all of you for being here with us this morning and for spending two very. Important, days with us as you continue, and we continue, to invest in this broader community, as I. Said the web is so much more than, one company one product, or one person, and it's, about how we come together to, move the platform forward, we're. Really grateful for a chance to share with. You today and so, let's, go ahead and get started with platform. Thanks. Annie all. The. Most exciting, part about the, web is that it enables frictionless, variety, you, can share any experience, through a link or discover it through a search result and go, right in with one tap the, web's billions, of users and millions of sites have been around for a while so where do we expect the, next wave of growth to, come to the web. It's. Estimated that most of the new Internet users globally, will be coming online in countries, like India Indonesia. Mexico. In Nigeria. Users. In developing markets across, access. To Internet through smartphones, with constrained, memory, and storage so, it's critical, that web, applications. Are lightweight, and have, great performance and. In. Both developing, and developed, markets teenagers. And young adults are growing up with smartphones, infrequently, computing, cross-device, these. Users have very high expectations around, the, overall, web experience, so, it's important, for us to equip the web platform with, powerful, app capabilities, and to ensure the experiences, remain smooth, responsive. And easy, to navigate. We. See big brands, recognizing, this shift with, 65%. Of their first time users landing on mobile web Airbnb.

Recently, Built their website into the progressive, web app delivering. Better performance, and user experience. Seeing. The results today and many of our partners have achieved by investing, in the web inspires, us to keep pushing the web forward and can, you continue, making it more powerful. With. This in mind here. Are the themes of our recent in future, developments, to the web platform we. Want to power fully, capable web, applications, delivered. To users instant. In responsive, web experiences, and make, transactions, between users, and merchants. And payment, providers seamless. And smooth let's. Dive into the first one. To. Ensure the web apps ecosystem continues. To thrive developers. Need the same capabilities, as those found in native apps this, includes, application. Installation discovery. Integrations. And multi-language. Support to, fully achieve feature, parity. Install. Is a foundational. Feature of a program my bath and chrome, has supported install on mobile, since 2016, with. The web you, can focus on building your app and the browser takes care of the details of how it will work on the user's device. In. Over the past year we've taken a step further with the launch of progressive, web app install for, desktop directly. From the browser you can now install on Windows. Mac, Linux and, of course Chrome, OS. To. Take installation, and discovery, of web applications, to where your users truly are earlier. This year we, launched trusted, web activities, web. Content, has been part of the Android ecosystem for. A long time, via webview trust. Of our activities offers a high performance, more. Secure and user choice preserving, way to, build apps they use the web stack this. Is our recommended, way to, upload, and distribute, high quality pwace and play. Partners. Such as Myntra, the leading Indian e-commerce brand, have, used trust and web activities, to target their users on lower-end devices an. Increased. Conversion, rate for these users by over, 115. Percent, other. Early, adopters, includes. Latin-based publisher, tera and indian, affordable hotels chain oil rooms io will be joining us later today to share their story. We're. Particularly excited about the, cross browser support, trusted web activities is getting our, friends at Mozilla have, confirmed, they're experimenting, with TBA and their Firefox preview nightly browser and Samsung. Has, committed, to ship their own trusted web activity in the near future. In. 2015. We enabled notifications, through service workers to allow meaningful, reengagement for web apps over. The past few years we've, added many features to notifications. Including. Action images buttons, and most recently. Notification. Triggers that, give developers the ability to schedule notifications. Even, if your users device is on airplane mode with. This last addition we believe that notifications, have achieved feature parity with their native app counterparts, and what's, even more exciting, is a trusted web activities get all these benefits by. Default. We're. Committed to improving the signal-to-noise ratio, of notifications, and we'll share more through, our CBS lightning talk series. We. Want web developers, to create the best app experiences. And we've been working thoughtfully. To bring api set, unlock OS level capabilities. Contact. Picker API allows. Your users to share contacts, and limited. Details with a web app as you can see here in Twitter's, PWA we're. Putting a lot of care into the design and implementation, of this API to, ensure users have full transparency control, and, we're working closely with, some of our early adopters to get this right. Desktop. Apps especially those focused on productivity have, long wanted to come on the web but. A major blocker, has been a lack of local, filesystem support, so, I'm, happy to announce that we're bringing the very popular native. File system API to Chrome this. Will allow web apps to interact with files on their users local device great, for photo and video editors, ID ease productivity. Tools and more you. Can see it in action here with apps like karelas graphic designer. In. Addition. To giving developers powerful. OS capabilities, and deeper integration, we, want developers to be able to port over their applications, with greater performance, and reliability. Webassembly. Allows, you to bring your existing mobile or desktop applications. And libraries to the web without, needing to rewrite them in JavaScript it uses a combination of low-level. Primitives and strong, static typing to deliver predictable, performance.

With. Additional features like, threads and cyndi applications. Can make full use of modern. Multi-core, processors, we're. Seeing many web apps especially, those focused on desktops, or large screens taking. Advantage of webassembly to bring their apps to the web. We're. Announcing that the first web assembly summit will take place at the Google office in Mountain View on February 20, to discuss upcoming features, and share more examples, you, can join this public group to learn more. Moving. On to our second theme let's. Talk about what we're doing to make web experiences, instant, rich, and. More. Responsive. Or. Its fast, beautiful, jank free navigation animations, as well as great offline and low bail with experiences, I. Oh. This may we announce that signed exchanges, services, that load your content faster, through privacy-preserving prefetch. Were, available in Chrome, to all users. We. Also gave a preview of an experimental, API called portals enabling, you to dramatically, improve the user experience of navigations, across your site portals. Allow you to create seamless navigation, experiences, by pre rendering content and optionally, embedding it unlike. Iframes, portals, give you the ability to navigate users, into this content, and all at lightning speed early. Portals, partners like Fandango, built, this fun new transition, style for their users while navigating within their site. Notice. How, there's no load time in the page rotates, the write a style, you don't see on the web too often. We're. Pleased to announce that the portals API is available behind, a flag for you to experiment with and will soon be available in origin trial for same-origin use cases we, are excited to get your feedback, with. Portals, you can build amazing, user experiences. But, getting users to discover and try these new experiences can be challenging, especially on mobile so. We've been working on a collection of api's and browser features designed, to improve the discoverability, of the web. Imagine. You're building an app that periodically, has new content, and you want to deliver this content even when the browser isn't open for example you, could deliver that content while the user is connected to home Wi-Fi. Before. They go, for their commute which might not have great connectivity. This. Is why we've been working on an API called periodic background, sync this. API, can proactively, cache content, at regular intervals making, the content instantly available for, the user and. To. Help users find the best content whether online or offline we've, built the content, indexing, API it. Allows you to make your offline, enabled and instantly, available content, visible, to the user and we're. Exploring showing, some of this content on the new tab page and, other, surfaces, in Chrome. Now. These readily available pieces, of content are quite, handy, for discovery but. What if you want to make web loading. Supporting. Completely, offline users what. If you wanted your content are apt to be flexibly distributed. Including, shared virally, between users a. Web. Bundle, is a new platform primitive, for packaging up a website, or web app it's, blazingly, fast to, load unlocks.

Easier Offline support and is, highly shareable developers. Can use these self-contained, web bundles to solve a flaky connection issue for, users and a. Web bundle can change content distribution entirely, a bundle. Can be shared between devices, over, chat or email on blogs alongside a review or, even on physical, storage like a USB stick in. Fact. We've bundled the web dev website as well as Skoosh an image, optimization web, app that we demoed at CES last year on a dyno, shaped USB flash drive that you have in your swag bag and we, would love your feedback our. Dyno wanted a gaming friend so we, also threw in Crocs the minesweeper, inspired web game that we've launched at i/o earlier this year. Form. Controls have long been the bane of developers, lives to, the point where many build their own versions of controls that are already in the browser. We've. Worked with our friends of Microsoft, to reskin and improve the accessibility of all, form elements, and we're. Excited, that, these will be shipping soon in both, edge and Chrome. We're. Also continuing land features that you need to improve the look and feel of your site's earlier. This year we. Launched backdrop, filter so developers can build new visual effects without having to hard code images, and. We're. Continuing, our investments. In Houdini where, you can now use the register property API to, animate CSS, variables that were previously impossible to. Animate. We've. Been working on making rendering, and layout performance, faster earlier. This year we, landed the first phase of layout, mg in Chrome layout. Ng is a new implementation, of Chrome's layout algorithm, that promises much greater performance, and reliability it's. Optimized, for modern, dynamic content, and the wide variety, of text languages now in the web and, most. Importantly. Improves. The speed of rendering emojis. Semicolon. Close parentheses. Display, locking is a new API that can have a massive impact on rendering, performance on the web by, locking an area of the Dom in stopping, it from rendering users. Can experience a much higher framerate when. Scrolling, through long documents, Wenlock Tom isn't rendered, it is still searchable, which is great for accessibility and page search and infinite, scrollers and the best part is with, display locking you can now perform batch rendering updates.

Moving. On to our third theme let's talk about seamless, and smooth transactions, on the web one. Of the biggest opportunities we, have to increase web developer success is to, improve their overall transaction, volume we're, reducing the friction between merchants. In their users making. It easier for users to let us know who, they are to. Authenticate, their identity securely and to complete their purchases, by, assisting, with payment handling and fraud prevention. Web. Often allows, Hardware secured second, factor authentication using. Biometrics, like fingerprints, or hardware keys like the Yubikey webathon. Continues, to see great growth businesses. Like github and many more sites including, google google itself have. Integrated, it into their authentication flows to, vastly, improve security, for their users. We've. Also heard that many companies all the world need a way to validate the user's phone number especially. In countries like India where, not all users have email so we're. Pleased to announce this, SMS, receiver API, this. API allows, you to verify a phone number automatically, and with less user abandonment, using, the SMS verification codes. That users input manually today it's. Great to see early partners like India's food delivery service swiggy, implement. It into their PWA. We're. Working on making payment on the web simpler. And safer three. Years ago we launched the payment request API we're. Now seeing great adoption with. Over 15,000. Origins using web payments to complete a transaction in Chrome even. Better web, payment API transaction, volume has doubled since the beginning of the year our. Focus for the next year is to add more capabilities. To web payments API and enable, more sites and native apps field of process payments. The. Web success, relies, on the principle of open, source, transparency. Collaboration. And most importantly community, we. Launched chromium, as an open-source project with, the vision to allow everyone to contribute and anyone. To share our foundations, and today. We're, happy to see that almost every. Individual. Browser project. Is open-source. We. Believe that working successfully, with other browser vendors can, unlock significant. Innovations, on the web. Working. With Firefox Chrome was able to implement a difficult, to ship feature stale, while revalidate, that. Based on experimental data has lifted publisher, revenue by 0.5%, thanks. To a 2%, increase in early ad script loads and resulting, 0.3%, ad impression, increase. We're. Also excited to see the amazing contributions, from our friends at edge who, we recently welcomed to the chromium ecosystem, they, are already making major improvements. To accessibility, scrolling. And media, battery life. We. Want to continue working with our partners in eco suit browsers. And ecosystem partners to, bring many more wins for our developers and users and to speak more about what we're doing to unlock developer, success let, me invite Deon to the stage. Thanks Ron I. Considered. Rebranding, myself to caps-lock beyond, today but you know probably shouldn't do that. Little. Cheap I know. So. As we've, heard we think the open web is pretty special, John. Mentioned the low friction of links and how they get you immediately, into an experience, and. When someone browsers from my site to your site they, feel the web as one. So. How does the web feel in 2019. We. Use the HTTP, archive to, see how the web is built and the, chrome user experience, rapport or crux to, see how it's experienced. And the. Story feels promising, over, the past year we've seen positive growth in the percentage, of sites with, fast first content, full paint and first. Input delay our core. Metrics, for loading and interactivity. Now. It's great that the web at large is improving, but we also know there's a little bit of work to be done and do. You know how your sites are doing. One. Simple way to find out is just to enter a URL into PageSpeed, insights, to get actionable, recommendations for. A single page, now. If you need help identifying hotspots, or, potential, problems across your site good. News we just released a new speed ripple in the search console, which, will give you insights by showing groups, of pages and how they perform for each key metric, is captured.

By Cracks. Now. We know the measuring user experience, quality is multifaceted, and, we're always working to integrate metrics, to tell a fuller picture this. Week you'll hear us talking about some new metrics for. Example, LCP. Or largest. Contentful paint measures. How quickly users, see the largest and often, most meaningful, content, on a page like a hero image or main text. LCP. Is built on top of the element timing, API which, allows you to manually, annotates. That you care about. Now. We've all experienced, this moment, when, a paint changes, just, when you tap it's, always incredibly, frustrating, happens me probably again this Black Friday. So. With CLS, or cumulative, layout, share it. Measures, the degree to which content, may be shifting, on the screen, this. Metric is built on top of the layout stability. API which, enables you to identify and, fix such issues. So. Each of these new metrics, are backed with specs and web platform, tests, allowing. Rum providers, to collect them and. We're really happy to see key, ecosystem, players such as calibre, and speed curve integrating. These metrics into their products. And. We spend a lot of time diving into data from the HTTP, archive and crux as it gives us insights, on where to focus our platform, efforts, this. Real-world data we think is really critical which, is why we ensure that it's fully available to you and the entire community. Now. It's also kind of fun to poke around in the data a little bit for, example, hypothetically, speaking maybe, you're up late at night before giving, a talk, in the keynote trying. To think about things and you find yourself wondering like, what is the largest sea index value on the web so. You take a look at. HTTP, archive and, what, do you think any guesses. 10. Maybe. Hire. Anyone. A, thousand. A million would, you be shocked at. 780. Digits. That's. More than a googol, of digits, that's, a lot of digits and so I just got thinking about how like there's some poor web developer, and. They're. Shouting of the screen div I need you on top, and. Then. I had to you got to take a look at the actual code right this is the actual code and I love the important. At the end the exclamation, important, make, sure and, the. Comment at the top fixed, done we're, all done it's. Fantastic. Love. The web. So. Tater is great but insights lead to fixes, and improvement, we're. Often asked how do i G act on this information, so. We collaborated with experts, from across the community to, build what we're calling the web Almanac. We. Launched in the first 17, chapters today on topics. From markup, to HTTP, to PWA, and many more. Now. I want to give a big shout out because there's tons of collaborators, from across the industry and, I want to thank them for not, only the amazing work they did on this project but, all they do for the web in general so, can we give a round of applause for the collaborator. Thank. You. So. Many of you also go the extra mile to move the metrics in the right direction. And we want to reward you for the hard work the, results, in great web experiences.

So. We've been looking at how can we highlight, and surface, more quality, signals, to, our users across search and Chrome's, UI with. Speed as a core metric. So. We've been playing around with UI, explorations, like this to, make sure that we give you even more of an insert 'iv to work on path we're going to be excited about this. So. Next up we, want to talk more about the ecosystem, and the tooling that's going to help you create this great web content, I think. It's pretty safe to say that no other platform is quite the same level of innovation in user space through. Frameworks, libraries and CMS's, many, of which have become household, names. Adam. Bradley from ionic, recently asked for feedback on the history of web frameworks, which, sparked a typical help youjust healthy, discussion, on twitter and a trip down memory name. And. We loved how each framework innovates, and learns from each other we've. Been excited to see the innovation continue, across the board especially in the area of performance and, developer. Experience. This. Is very much true for next j/s an impressive. Framework that gives react developers, an end-to-end, system, to, allow for scalable performance. We've. Been working with the next year's team and thought it'd be fun to invite qiyamah Roche from zai onstage to. Take us through the journey so, far let's welcome Guiana. At. Site we have a very simple mission we. Want to empower developers like, you to build deploy. And scale the. Best websites, and applications. About. Three years ago we. Identified, an opportunity, to foster this mission in the react space. We. Identified, that creating, a react, website or application was, very tedious it required. Bringing all these different components together every. Time for every single, project, but. We had a very unique idea, what, if it just took one command, to start developing a react app one. Command to build it and your, interface, to the project, was, a very simple, file system, based API where. You just create a folder, and put, a bunch of react components, in there and get everything figured out for you and I'm. Happy to report at that same idea that we had three years ago is this, still true today so. We kept that simplicity, with a remarkable. Attention to, backwards compatibility. This. Project, Nexus has always been about that, we. Wanted, to capture the spectrum, of complexity. And evolution. Of your projects, we. Thought that you needed to have an easy way to start but, then an easy way to evolve your project, that, it should be good for an individual. But it should also be great for a team and as. Well as capturing the complexities, and intricacies, of react, rendering, technologies, like, going, from static site generation, to advanced, server, rendering. We've. Done this so well that. Every. Time you, go, into your favorite web sites today you're probably interfacing, with next is sometimes. Is in small ways sometimes in a big way we, have customers, that span from media. To SAS. To, maybe, your favorite streaming, service. For a music, or video if it's. A static app or if it's something very complex next J's has found its place in a variety of different industries and industries, and use cases and. This. Has been possible as a Neal was saying because we took this approach which, is the approach of the open web, we. Have an internal team that has seen a lot of amazing stewards, of this project. Propel. Nijs, forward, but, we've also included, hundreds. Of contributors, from the open source community and incredible. Partners, that, companies, like GoDaddy and Hulu that bet massively, on xjs but, then also decided to give back if you're, curious about how they're using our framework, I encourage.

You To check out the Hulu case study on our website. But. My favorite partner is a very special, and prolific partner, there are very very productive people, so. Google Chrome reached out to us early this year with. An intention, to make the web better and, they. Shared our give. You that. Great, developer, experience has to marry great, performance. And they. Know this better than anyone because they built the web inspector but. It's very very important, just like Nick J's goes from small to big it. Has to be easy to use and, it has to be very fast for the end user. So. We've, been really busy working, on a different set of features for improving next yes, some. Of them have to do with developer, experience, like an easier way to import CSS, into your react project. Some. Of them have to do with staying, close, to the cutting edge of the, latest and greatest react, features like, adding support for concurrent, and strict mode and some. Of them have to do with just bundling. And compiling your projects, better so. I'm really excited about this changes, in particular because earlier was talking about great. Support, for, backwards, compatibility, so. Some of the changes the Google Chrome team has helped has helped us land such. As improved. Web bundling, have. Helped people. In the real world so, one of our favorite, customers Barnaby's they, run an incredible, search engine, for arts and collectibles, and being. In the e-commerce space. Performances. Of the essence. After. They upgraded next with zero code changes, thanks to the contributions, that chrome made they, saw a third nearly 25. To 30 percent improvement in. Bundling. In, size of the bundles of the main application, but, that also translated, into justice, happier and smoother, experience, that, helped everyone that visited their website this. Is possible. Things of those amazing contributions if. You want to learn more about what. Is specifically, went into making this improvements, please, check, out our session tomorrow at around 11 a.m., led. By Hussein, and Tim, Nutkins who. Are going to talk about all the internals, of of, what it went into making, atlanticus improvements. Finally. If you're interested about neck Jas and want to check it out please, go to next is org that, slash learn where, a five, minute tutorial will just guide you through all the essentials, and you'll be productive, building react applications, in no time Thank, you Thank You. Gianna. That's. Awesome. So. We want to support as many ecosystem, players to unlock performance, wins by default and so, much more we. Announced the framework fund at the last chrome dev summit we've, been really excited to see the impact that these projects, are having and we're, really keen to fund more. Now. You live in content creation and app development tours all day and the. Breadth of the tools of the web has a pretty phenomenal from, no code to low code to pro code whatever those mean and of, course for a nil, vim.

Yes. Any Emacs anyone we're not going to go there. We, want these tools to thrive and for them to get access to everything they need from, the web platform and, our data and insight tours, we. Also want to ensure that our tours are doing everything, they can to help you. First. The metrics that I mentioned, will now be reflected, across our tools, including. Lighthouse, and. Chrome. Dev tools. And. To. Help you understand, these metrics we're adding clear guidance on web dev our primary, developer website which, expanded, today with great content. Now. In lighthouse we recently announced our very first stack pack this one was for WordPress and allowed. Us to extend the general guidance to. Include actionable, WordPress, advice. Today. We're releasing a stack pack for the open source ecommerce, platform Magento. As, well as expand, our coverage to include packs for, web frameworks, such as angular react, and amp now. Content. Platforms, are actually powering more than half of the web and. We've been working really closely with dozens, of them in some, areas investing, deeply. WordCamp. Us just two weeks ago we, announced the 100 release of site kit for WordPress which. Helps content, creators by making it easy to set up and access. Multiple, google tools directly. In WordPress. Now. We've also been working with the WordPress community to, improve site health and performance. By simplifying, HTTP, migrations. Prototyping. Image lazy load using. Font, displace WAP to accelerate, text rendering and much, more, and. Then. There's Shopify. We've. Been really impressed with the performance work that they've been shipping for all of their merchants, one. Example of impact at scale is how they rolled out web peacefull, across, their platform, and saw, a 60, percent decrease. In byte served, in. One extreme case they, saw savings of over 200, and 10 Meg's on a single page which. Made me wonder what are the z-index is on that page so. We're. Super excited to, see our tools become more powerful, integrated. And open to the ecosystem, in, fact let me stop talking for a little bit and instead please, join me in welcoming elisabeth. And paul to, show some of the new features we've landed across, our tools and highlight, how you can use them together to, make web development easier thank, you. Thank. You capslock Dion I am, Elizabeth I'm Paul and, we, are really excited to, work, for Chrome web platform team and be with you here today so we've. Been working really hard to, make sure that you have a really consistent experience, across all of our tools and you, know we wanted to take a moment to walk through from diagnosis. To an actual solution what, that fix workflow, works like looks, like for performance, so. We. Also want to practice what we preach so. We're going to be using one of our own sites to try to optimize it, web dev, for. This demo, all right Paul you good to go let's. Do this okay awesome. So, the first thing Paul is gonna do is jump into the audits panel and dev tools where you can run, a lighthouse report, locally, on your own machine so. He's, just going to run. The performance, category, for an outrageous performance, okay cool. So, it should just be a few seconds. And. I was told to dance here but none of you wanted. This. Is. Okay. All right cool. So the performance score is okay but we chose a pig hmm, that we know, we can improve so, let's, see there seem to be a few images that are a little bigger yeah. Okay, yeah a few images here they're, just oversized. Do. You want to tackle let's just focus on. Spock. Ins I guess definitely. Yeah. Like it. Looks like it's 79. K and, it could be quite. A lot watch smaller, okay, that's Spock, it's good yeah all right let's go check it out, so, it's down here, good yes. Image. Tag ah okay, yeah. 1,800. Pixels wide image but, shown at just, 527. Wide so, way. Oversized. Okay. We could fix, this and, so. I think probably like the fix that we're gonna do we'll. Just use like responsive, images source, set kind, of a thing and. I cheated a little bit I do know that there's already a responsive image on this page so we're gonna get a like just make, use of that so what I'm gonna do is I'm gonna take just. The file name of Spock. It ends and then, we're gonna go find this other one okay here, yeah you can see like the full source. Set and we're, just gonna edit this attribute. And. Just. Replace this command. D, paste. Okay. Yeah, yeah, there we go all right yeah. We're. Gonna take the HTML of this and we're gonna go we're. Gonna go and copy. It over into use. My favorite feature in dev tools local overrides alright. So, now. We're gonna go down and we're gonna find the original, Spock. And image. Tag and we'll just delete that and, then, paste in the new one and then. Hit control s and, then. We should refresh, and. Let's. Just verify that that actually applied, to the page.

Yes. Okay, good yeah so can we actually rerun, lighthouse to see if it fixed it though yeah sure yeah okay so let's take, a look at lighthouse. We'll go back up and, rerun. All. Right come on hey. Elizabeth how do you get a tissue to dance. Put. A little boogie in it. The. Sad part is I knew the punchline. Okay. Amazing. So, okay. Alright, it's not even there anymore it's, not there so. I know you pretty well and I'm gonna guess that you already have a PR ready to go that'll, fix this insource am i right. Yes. Let's. See. That's. Over, yep, yep PR for what I'd have just sorted out yeah. You're so good okay so we want to make sure that we validate that the change is actually good though and convince, the entire team that you know this is actually going to be, a sustainable, fix so. With that we. Want to take a moment to introduce lighthouse, CI, it. Runs lighthouse. Automatically. On every single commit and. We're. Super, jazzed about it yeah yeah yeah good stuff all. Right so, and. We already added lighthouse CI to the reap github repo right yeah, so. Let me show that so if we just scroll down we. Can see we, have the integration right there and. This allows us to do a few cool new things, one. Of which is, actually. Being able to see a an, overview, so you can see the performance of all of your pages over time for all the report categories, this is an automated collection of all of your you know lighthouse report, categories, on every commit that's including the state of audits as well as the values of your performance metrics yep. So. One of the main things we want to do is actually compare the quality of our PR against master to, see if we've done anything that causes regressions, you, know before the change actually goes live and users have to deal with it so there's, there has to be a, better, way to do it though I'm. Talking about going, between two reports, right so, we focused a lot on this kind of experience what actually, made a change here and so let, me show you kind of how that works so if we actually just go back, to that pull request and, we. Click through on the. Status. Check so this is the new diff, view or, lighthouse cio let's. Bump this up so. We see the three point difference, in the performance score, and we see all the changes that have been told metrics. They're. All going down which is an improvement we like that let's go check out properly, sized images, looks, like we have a change there, yeah. Okay, cool so yeah, I made. Them all responsive, and so they're in remove, some of the report we, have the savings.

Is All gone. So we fixed it I check, this out yeah. For, all the images on the page we've reduced the total weighted images by half a Meg so. This is pretty, cool. Yeah. That's amazing, so if you. Would like to learn more about lighthouse, CI as well as other speed tooling updates please join us later for our talk but until then thank you very much thanks. Thank. You. Super. Excited about the tool the lighthouse score not so excited about by the way. So. Thanks, I'm so excited about how we're working to improve the web and make you successful no matter what, framework you use what CMS you use what. I really hope is that you set bold quality, goals and use, our tools and services to understand, the experience your users are getting and then. Create the high quality experiences, that, we all want to see as a link on our World Wide Web now. Finally, I do have one, something. I'm little bit embarrassed to admit and that's, you see all these chrome dev summit URLs, I'm really angry they don't actually work, like. You put them in the browser and they don't work but, to be clear chrome loves. URLs. Anime. They're very clear and to, tell you more about Chrome please welcome parisa from the browser team. Thank. You caps-lock, Dion. Cheerio. Chap. He's. Gonna tell me how far, or close I am to Downton Abbey afterwards, hello. Everyone, hope. You're enjoying dev summit. As. Anil. Mentioned, when we think about the future of the web we, are considering. Four and a half billion, users, and. This. Isn't just users who are coming online for the first time in emerging markets is also young users who, are primarily using their phones. Now. In, Chrome we, really really believe that every, existing. User and future user deserves, an amazing, experience and so I want to share just a, couple of the ways that we're trying to deliver on that experience a. Lot. Of our focus has, been around, three key goals how. Do we make the web perform, better how. Do we make the web more accessible and. How, do we make the web more safe and trustworthy, so. Let's talk about performance first now. We believe that the web is for everyone no, matter what, your device, what. Your internet speed or what. Your purchasing, power and that's. Why we invest in performance, with consideration, for just a huge, range, of devices. Okay. When it comes to RAM we. Have senior memes. All. Of, them and. We. Laugh with you but, we also work hard to not give you as much fodder, and. You. Know for memory it's a really delicate balance, because, sometimes. When you use more memory it actually, can lead to a faster user experience, via. Caching, and it. Also makes possible additional, security mitigations, but you. Know we, obviously know if you use too much it can actually impact the user experience, we. Have lots of people dedicated, to, figuring. Out just what is the optimal, usage for chrome give. Any users available. CPU, and memory resources and, we've been investing, more here lately, one. Of the things that we've done is developed automated, tooling so, that we can find. Memory. Leaks or, UI, jank in the wild and get, engineers, a enough information so they actually can can debug, and fix those issues and. After. A, lot, of work and via the help of this tooling we've. Made a couple, of treatments that were pretty proud of so. What. We've seen in the past year is an 8x reduction, in UI, thread jank in the main browser process and we've. Also seen a 15%. CPU reduction, and 50%, reduction in physical memory for background, tabs in the browser. Now. That's. Pretty good. Thank. You. We're proud of this work but you, know we totally, know it's an ongoing efforts, and this, is something we're gonna continue to invest in so. That's the browser when, it comes to v8, so we've also made a number of memory reductions, here for. Example we reduced memory, renderer. In the memory footprint, by about five percent and, we. Actually expect further reduction, of about 12% via, v8 pointer compression, which is literally rolling out right now. So more cool improvements but you, know people want to see to, believe and, so. You. Can see from this video. With. In v8 we've massively, reduced parsing time and so, now Google, sheets slows way faster this is a comparison of Chrome today versus, Chrome a year ago and, again.

If You're into stats this, is about, 33%. Faster so thanks, to v8. And. At. I/o this year we announced a couple of improvements, that developers, just get by default and. I wanted to just give an update on those so the first one that. We're excited to share relates, to image lazy, load and this, is now going to be enabled, by default for. All Chrome, light mode users now. Lazy load is when. The browser prioritizes. Loading, images or, iframes. In the current view and so it'll actually defer, loading elements, outside of the view until the user Scrolls to it. This means that all chrome light modem users are going to get even, more data savings, and they're going to get even faster content, in view experience, and so that's great for default, users. And Lite mode developers. Can also just enable this by adding. One line of text and. Then. Second. Update and. Something that's coming in a, couple months is launching. Paint holding now. Paint holding is where the browser will wait very, very briefly before starting, to paint so the page renders, as a whole rather, than jumping. Different elements around, and it just avoids kind of what is the distracting, kind of white splash, and so again, just by default giving users a better more, smooth experience. So. Performance. Is one. Big area of ongoing investment, but. You. Know access, to the web isn't just about performance, it's also about making content. Accessible. For. Example users. Who are blind or. Low vision are, often using a screen, reader or Braille, display and. Unfortunately. These, users, will typically, hear image. On, labeled. Graphic, or long. Irrelevant. Filename read. Aloud whenever. They're on a page that has unlabeled, images and obviously. This can be a pretty frustrating experience so this is something that we wanted to help, those users with. Know. We, used googly eye to. Automatically. Generate descriptions. Of images so now if users, turn on they get image descriptions, from Google feature chrome is going to automatically, generate, descriptions. Of unlabeled images, and so just as an example if. User came on this image then they might actually here, you know appears, to be fruits and vegetables, at a market. So. As you, all know it. Is still best, practice, for developers, to actually add, their own alt text images because you, know the context, of your, content, best but. This feature is really just intended to help bridge, some of the existing gaps that we know are present in the web today. And. Our. Team, has set a goal for ourselves to, just really meet the highest level, of accessibility, standards. And we've made a lot of progress on this and. In, general are just thrilled to see users. Finding. Improvements, helpful in chrome, just. Recently chrome was actually named one of the most used browsers among blind, users. And this. Was according to a survey by the web accessibility, and mine group and something. That we're. Proud of just given all the effort into, making, chrome. More accessible and. Also. Have a lot more work to do here but very, much driven by the mission to make. Sure that, you. Know we're building helpful features so, that. Really. Technology, can empower everybody. Course, in order to be truly empowered, by, the web it has to be safe and trustworthy. Not, just for Chrome users but, for everyone and so I want to talk a little bit about some of the ways that we've, been investing in doing that. Internet. Wide safety. Absolutely. Demands industry-wide. Collaboration, and together, and, really, I do mean from people in the room and people in the livestream, I'm proud, to say that we've made some huge progress on HTTPS, adoption, today. 90. Of the, top 100, sites now default, HTTP. And that's up from only, about 25, back in 2016. From. What we see, 90%. Of all web traffic at Google across. Popular. Operating systems both, desktop, and mobile is now over HTTPS, and that's. Just a huge accomplishment so. As. A next step chrome, is is investing, in continuing, to improve the security of HTTPS, and we're going to be begin, blocking, all mixed. Contents, or insecure. HTTP. Content loaded on HTTPS, pages by default and, since. We're asking developers to do some work you, know as we always do. We. Know this takes some time and we're gonna be rolling this out over the next four milestones. We're. Also experimenting, with new ways to make. DNS more secure so, as you know DNS is the addressing, system, of the Internet and just a really essential piece of how, the internet works, unfortunately. It remains, one. Of the last, non, encrypted, channels and, this. Potentially, exposes, users to privacy leaks or phishing.

Attacks Or farming attacks. And you. Know a lot of members of the web community have, tried. To improve this overtime but just nothing has really taken off until, more recently now the. Latest proposal from the web community is called DNS, over, HTTP. As. A browser, this obviously plays to our strengths, but, DNS. Has been around for, 35. Plus years and so changing. It it's. Just a really complex, endeavor and it's. One that we are being really, deliberately conservative, about so. We're only going to upgrade Chrome, users to, DNS, over HTTPS, if we already know that their DNS provider support it and we, think that this is the right approach to balance, user, choice and, control. While also delivering, significant. Improvements, that we see for security and privacy. Now. If, there's one topic that takes, over most, of the browser safety. And Trust conversation, late lately, its privacy, and. In particular cookies so. Earlier this year at i/o we are made. Some announcements that we're committed to making controls. For third party cookies just, more usable, and more visible and we've already kicked off some early experiments, you, can check it out in incognito, which is our mode that. We know a lot of privacy conscious users, will turn to you and, in. Parallel, we're continuing, to just make progress on plans to improve the existing cookie. Infrastructure. We. Recently announced that, chrome, is going to start enforcing. Accurate. Cookie classification. Beginning, in February, and in particular, looking. For developers to be able to specify whether their cookies are to be used in a first party or third party classification. Context. And. This is just gonna make cookies more secure and also. Make our tracking controls, more accurate, other. Browsers, have announced. That they're joining us in this effort. And. Then. One. More thing I want I want to talk about on privacy but we're just continuing to innovate on our privacy, sandbox, and what. This is is a secure environment, for personalization, including. Ads and it. Also protects user privacy so. The August announcement, we've announced to intends to implement, click. Conversion measurement and trust, token api's, check. Them out we'd love your feedback and, you'll, hear a little bit more about these in, the next talk at 11:00. Of. Course you can't have privacy without security, and our, philosophy and, chrome is that. You shouldn't have to be a security expert to stay safe online and so as much as possible we, try to build security, and by defaults, so. Since the beginning we've built in protections, to just, warn users of, potentially. Dangerous sites, that may try to fish their credentials, or install, malware and, then, also. Really. Invest in regularly. Updating, users with the, latest security updates, or features and so I want to talk about just, two things we're proud of from this past year. Passwords. Everyone. Knows about passwords. Compromised. Passwords, remain, one. Of the biggest risks to users on the web and that's. Why we continue to invest in our password manager, today. Not. Only can Chrome users safely. Store their passwords they can also generate. Unique strong. Passwords, for, all sites on either desktop, and mobile and, what. We bring to you by the end of the year is actually a. Chrome. That will proactively warn, you if we detect that any of your passwords, have been compromised, and this way as a user you can actually just take additional protections, to protect, those online accounts, which may be at risk and. Then. Finally. Another accomplishment, is just bringing site isolation, to Android so, slight isolation, is like the next major advancement, in browser sandboxing. And it protects users from speculative. Execution attacks. You. May have heard of Spectre which got a lot of headlines two years ago and. Bringing. This to Android, was actually only possible because of a lot of the memory savings, that we made and that I described earlier in. The talk and so kudos, to the teams that, have made this possible. Overall. We, feel a huge, responsibility. In chrome to continue to bring helpful.

Innovation, To just make the web perform, better make. It more accessible and you. Know stay. Of users, expectations, when it comes to security, and privacy and, I. Cannot. Underscore that this would not be possible without the support of the developer, community and, just everybody who's contributing, to the ecosystem, so truly thank, you so much. With. That I'm, gonna call Anil back on stage just with some closing words. Reflecting. Back on my own story if I could take you back to 1993, for a second, there. Is no, way that kid growing up in Montreal on. That Commodore, Amiga 4000. Ever thought that he'd be standing. Here with all of you today and, that. Is what. Makes the web so, great as an, open up as an open platform it, opens up possibilities for. Millions of developers and billions, of people all over the world if you, see a need in your community all, you, have to do is build. Something on the web immediately, and you can push it live with no friction, and no, one of having to approve anything it's available for everyone instantly all. You need to do is give them a link and that's. The power of the web and together we can continue to move it forward in fact. A great example, of this work that I'd love to highlight of building. Powerful, accessible. Web, experiences, is Lotto, a startup, that's using virtual, incentives, to make real world economic. Impact as we. Close this morning's, keynote let's. Listen to their story. Coming. Up on the Cape Flats youth unemployment is a huge problem so we, introduced, slotto. Stato, is it was platform, and incentivizes, young people to volunteer in the community and gain, work experience. Just. Think of it like points in order to purchase things that you need. The. Waves fundamental. Importance that allows our users to access Lotto from any way. We. Realize that people might, not have data, for the cellphones but, it will be a device taking connect, versatile they. Can hop from a cell phone to the computer and. Just go out and use it and. That's. What the web allows us to eliminate that barrier of connectivity. That's. Our responsibility to make sure that people are empowered. Feel. Confident. That stato can, be used in almost any context.

The. Struggle doesn't disappear, because your device changed so we need to meet users where they are, we're. Gonna invest, not, just in the lives of young people but, in the beliefs of young people and. Begin to trust them to solve the problem that they wanna solve. We're. Actually honored to have Allen, and his CTO Curt in the audience here today. So. Thank You Allen. So. That's it for, this morning's keynote so, thank you for letting me the. Chrome team and Google, continue. To be part of this really amazing community, here's. To the we in web. And I, really hope you enjoy the rest of the summer.

2019-11-16 04:01

Other news