The web celebrated its 30th anniversary this year, and what an amazing three decades they have been. We’ve seen the platform go from powering simple hypertext documents, to one that enables rich, immersive, and dynamic experiences that are at the forefront of design.
Looking forward, the world’s needs continue to evolve, and that motivates us to continue our participation with the global web community to adapt and improve the platform to meet the needs of the future. Our efforts are focused on making the web faster and more powerful, while keeping our users’ trust and safety front and center.
Vision for an Instant Web
Speed matters on the web. We’ve found that users are highly sensitive to loading speed and this can have a direct impact on the business.
So we’ve been working hard to make the browser faster and lighter so developers can do more with their experience. By focusing on startup bottlenecks, we were able to improve the loading speed on Chrome’s startup by 50% on low-end devices; and 10% across devices. We also improved scrolling performance by 18% and through V8, JavaScript memory usage reduced by up to 20% for real world apps.
Apart from making the browser more efficient, we’ve also been adding more features to the platform to take the burden away from developers. And we’d like to share a few of these here:
To deliver a great image loading experience without needing developers to build their own JavaScript solutions, we’re bringinglazy loading for images and iframes directly into the browser. All developers have to do is add a simple HTML attribute and Chrome will take care of the rest.
For fast sites, Chrome’s eager clearing of the page, when a user wants to navigate to another page, can be detrimental to the experience. To avoid this flash of a white “loading page”, we’re rolling out a new experiment called Paint Holding to improve navigation on the web. You can see it in action for the Awwwards website here:
Speaking of navigations, Portals, is a new technology that we believe will fundamentally change the way users traverse the web. Portals are similar to iframes and allow content to be embedded directly in a page, but unlike standard iframes, they can be ‘activated’ to become the top-level page, enabling instant transitions across the web. Advanced experiences can even hold pieces of the original page’s UI privately and securely, so that you can provide seamless overlays that still hold our ideals of the origin model.
At I/O, we shared our vision of how developers would be able to use Portals and associated APIs to support pre-fetching, enhanced transitions and the exchange of contextual information between sites. And now that Portals API is available behind a flag in Chrome Canary, we’re excited to see what developers will build with this new primitive.
Another technology that we’re particularly excited about is Web Packaging, a bold new contract between web developers and web servers. With Web Packaging, the model for loading pages changes from the browser requesting the page from the origin’s server to it being able to load from anywhere — even potentially other peer devices.
This gives the browser the flexibility to preload content and load pages instantly while doing so in a privacy preserving way. Signed Exchanges, the first phase of this vision is now available in Chrome for developers to use.
These are some of the things that we’re doing to make the web more instant, but its success is predicated on developers making their experiences fast and maintaining that performance. So we’ve added a bunch of tools to help.
In 2017, we launched the Chrome UX reportto give developers a better sense of how their users truly experience their webpages by providing them real world metrics. The report is now includes a data set of nearly 6 million origins and is powering more of our tools, including the latest Speed Report in the Google Search Console. The report is currently in beta and you can register here to join the program and share your feedback.
To give developers an even wider array of real world metrics, the Firebase team have broadened their Performance Monitoring tool to also cover web apps.
And to stay on the rails for performance, we’ve seen many top sites implement ‘performance budgets’ within their build environments, and that is why we’ve built performance budgets directly into Lighthouse, so that you can get alerted to performance regressions before they hit your production site.
Creating a more powerful web
Our vision is to allow you to do absolutely anything that you want your users to do, on the web. So we’ve been working hard over the last year to close the capability gap by focusing on the features that get your experiences closer to your users.
Working closely with the community to address the most pressing and critical needs, we’re bringing many of these features to fruition at a great pace. Some of the capabilities that we’re most excited about include File system access, Unlimited Quota and the SMS based authentication feature that is particularly important for developers working in markets where “one-time passwords” are an important part of the authentication process.
And while we continue our momentum here, we’ve already launched the Web Share Target API allowing your apps to be integrated into the native system sharing, and opened up Shape Detection APIs that enable experiences like the Web Perception toolkit that we launched at I/O today. The toolkit allows developers to integrate with the mobile camera and enable people to use their website more effectively.
With mobile gaining many such strong capabilities, we also wanted to enable developers who build quality web experiences to get more reach. So we’ve launched Trusted Web Activities, that allow developers to integrate their web content into Android apps. And businesses like OYO Rooms, India’s biggest affordable hotels network, are already using Trusted Web Activities to power a lite version of their experience, a common pattern that we’re seeing amongst partners in some markets.
But the thing that we’re most excited about is the progress that we’ve made on desktop capabilities, with technologies like Web Assembly and individual media and productivity APIs unlocking many new use cases. Hulu and Google’s Duo are great examples of what’s possible on the web today. And we’re excited to have our friends at Slack join in and fully committed to roll out an offline-enabled web-powered version of their desktop app later this year.
PWAs on desktop came to ChromeOS last year, to enable web apps that need full window support and common desktop app capabilities. And now we’re excited to have extended support to Windows, Mac, and Linux.
We’re excited to see the momentum for PWAs on desktop and we wanted to ensure that we do our part to ensure that users can identify high quality PWAs and install them easily, so we’ve improved discoverability by bringing a new “Install” button directly into Chrome’s UI, within the Omnibox. This is one step to support developers building amazing experiences to get more engagement with their loyal users and we hope to continue doing more here.
In this landscape of massive device fragmentation, we wanted to see if it is possible for us to build an experience that could work across all devices, from the lowest-end feature phones to the large screen desktops. So we built a fun game - Proxx, that uses preact for UI, Comlink to be able to use workers and do more off the main thread. And yes, it works across all devices and performs well even on the most constrained ones. And because it's on the web, you can play it right here; but maybe after you're done reading. :)
Over the next year we will continue to open up even more of the capabilities that enable the next generation of games, productivity, media and social apps to come to the web, all whilst ensuring that the core principles of user safety and trust are preserved.
Bringing transparency, choice and control
User experience is extremely important to us and their safety and privacy remains at the heart of it. At I/O, we shared important upcoming changes to how Chrome will handle cookies in order to enable choice over tracking, and that enhance web security and privacy generally. And later this year, we will preview new features in Chrome that give users transparency and control over how they are tracked on the web.
We believe these changes will help improve user privacy and security on the web — but we know that it will take time. So we’re committed to working with the web ecosystem to understand how Chrome can continue to support these positive use cases and to build a better web.
Improving your developer experience
As the scope of the web platform increases and the demand from users to have ever faster, safer and more capable experiences at their fingertips it should be easier, not harder to build high-quality sites.
We built web.dev to bring our measurement tools, aka, Lighthouse and guidance all in one place. We’ve improved the site that now provides over 200 easy to follow guides for performance, safety, accessibility, resilience, and more. And at I/O, we announced our intent to build guidance for the tools that you use, starting with React.
And we’re adding the same level of personalization to Lighthouse, to give developers reports and improvement tips for the framework that they use. We’ve built in guidance for Wordpress and will be adding more over the rest of 2019 and beyond.
The web has come a long way over the last 30 years and we’re excited to be working with the developer community and other browsers with a shared mission to bring universal access to information and services to more people than ever.
Chrome’s 10th birthday gave us an opportunity to reminisce about how much Chrome and the web have evolved over the past decade. We love seeing how rich the content, apps, and games you build have become.
Amongst other updates that we’ve made to Chrome, one that we work very hard at is making the browser fast. We see speed as one of the defining and most important features of the web. No other platform can match how quickly a user can go from discovery to the actual experience and move between websites, but this breaks down if the sites take too long to load or if the UI is janky.
Thus, we'd like to collaborate even more with the web developer community in delivering delightfully fast experiences to our end users, from the moment they click on a link.
Fast from the first click
HTTPArchive shows that since 2011, sites are using on an average of 8x more JavaScript. We’re starting to see the CPU becoming one of the main performance bottlenecks, especially with more and more code often compiled and executed on under-powered mobile devices.
Businesses who focus on the first load (and beyond) are increasingly seeing great results by focusing on the use of Performance Budgets. These budgets can be based on the byte size of your JavaScript, CSS, images and other resources, as well as other loading metrics. For example, you could specify that Time-to-Interactive will not exceed 5s on an emulated 3G network and specific class of mobile phone.
Consistently staying within budget as you add features over time isn’t easy. After Wayfair noticed their own regressions, they built an internal performance budgeting system for their developers to track their performance scores. Since then, their page speeds have continuously become faster, and they’ve seen a year-over-year conversion rate increase of more than 10%. Pinterest revamped their mobile web experience focusing on performance and saw an uplift in user sentiment and engagement. Their mobile website is now their top platform for sign-ups! You can see their journey here:
Buttery smooth beyond the click
Optimizing the loading speed of your webpage is important, but so is ensuring that the page delivers a smooth, interactive user experience as it loads and after it’s displayed. This means responding to all user input quickly, in less than a 1/10th of a second, and ensuring that the user interface doesn’t “jank”— meaning the UI doesn’t pause and then jump suddenly.
Over the past decade, we’ve been evolving Chrome so that it can off-load as much work as possible from the main thread. For example, now we decode images and parse JavaScript separately, and with Web Workers you can execute long running JavaScript without blocking up the UI.
How buttery smooth can you make your web apps today? Especially if you have non-trivial workloads? Our team set out to explore just this, and the end result is a new application launching today called Squoosh. This powerful image compression tool launches almost instantly, and then manages a smooth UI even when it’s doing heavy work, including using Web Assembly to do more with codecs the browser doesn’t have baked in. Tune in to Jake and Mariko's session later today to learn how they did it.
But there is even more to do here, and we are excited about up-coming platform APIs, such as Worklets , Virtual Scroller, and even a scheduler, that help developers build smoother experiences more easily. You’ll hear more about many of these tools and techniques in our Day 2 keynote and beyond.
Capable with deeper integrations
We’ve seen that PWAs make it easy to delight your users, grow engagement and increase conversions. Now with deeper integrations to the host OS and the ability to load and run faster than ever, your PWAs can really shine, yet most of these integrations have been focused on mobile-first, or even mobile-only.
Over the last 6 months we’ve been renewing our investments in providing these same set of capabilities across all desktop platforms. Chrome OS has given us a fantastic surface to really push the boundaries of the web, and based on these learnings we are expanding our Desktop PWA support across Chrome for Windows and Linux, with Mac support targeted to land in Chrome 72.
As we bring more and more capabilities to both mobile and desktop, we want to include the voice of the community to ensure we prioritize features that are important to the community. So today we are sharing our plan to get the capabilities YOU need on the web, and how we can work together to make sure we are solving your real world needs.
Helping you as a web.dev
We know that you want one place that consolidates all the reference information for modern Web APIs, and this is why we continue to collaborate with MDNon improving the core reference documentation of the web.
We have also heard that you would like more hands on guidance on how to deliver on the principles that make a web experience great. So today, we’re excited to announce a new approach: web.dev.
Through a partnership with Glitch, a deep integration with our Lighthouse tool and best-practice guidance from our team, web.devhelps you improve your site through direct and targeted best-practice and the ability to monitor your sites over time to ensure that you are always able to keep your site fast, resilient and accessible.
As we were working on web.dev, we were inspired by other amazing content on the web that help you learn. Dave Geddes, who created Flexbox Zombies and CSS Grid Critters, created a new learning game. Service Workies helps you understand Service Workers soup to nuts. The first chapter of the adventure is rolling out in beta now. We partnered with Dave to make sure the full adventure can be free to all, so check it out now and whatever you do, listen to Grannie!
Web design, right in the browser
At Chrome Dev Summit we cover all of the updates to our developer centric tools and libraries that you know and love, but we also want to show you a new, early experiment that we would love your feedback on.
We remember the impact that Firebug had when it hit the scene, and how it showed how the browser could be the developer tool platform itself. Now we are also thinking about design on the web, and just as Lighthouse started as a Chrome extension to explore, we have another extension, Project Visbug, which allows you to design — right in the browser. You can download it now, but before you do see it in action right here:
Tune into ourlivestreamor watch the videos on the Chrome Developers Youtube channel to follow the rest of the sessions of the day and watch this space for our Day 2 wrap up blog where we will have some more exciting announcements.
As the very first pages were served on the open web in 1990, people recognized that the ability to deliver dynamic content would make the web unique—you could provide information and function just by sharing a URL. The Common Gateway Interface standard released in 1993 defined a simple interface for web servers to run code in response to web requests. It brought a new era of experience and capability to computing, accessible at the click of a link. Hop forward two short years to JavaScript, then another year to frames, specifically the <iframe> tag. These innovations let developers dynamically load content into pages, brought a new level of interactivity to the web, and increased user expectations of what could be done in the browser.
Accessibility, linkability, indexability, and universal reach have always been the web’s core strengths. Alongside these super powers, users want ever richer and more-engaging experiences. “Ajax” was coined in 2005 to describe the combination of asynchronous JavaScript and XML, which shaped a more interactive, modern web. It led to the creation of such services as Google Maps, cementing the web as the best way to deliver experiences available to anyone, on any device.
2008 – 2014: Web applications, HTML5, and the start of the mobile era
Chrome saw huge progress in its early years, with a large number of what are now considered “core APIs” coming to the web after the WebKit implementation. The video, audio, and canvas elements were some of the first “modern web” features that many of us distinctly remember (and who can forget border-radius?). These features brought a new level of interaction to web experiences, and meant developers no longer needed plugins such as Adobe Flash or Java, to build interactive media and graphical experiences. Chrome experiments have captured great examples of rich experiences that are a direct result of the web’s improved performance.
The “Mobile Web” really hit the world in 2010, and we saw a slew of new platform primitives introduced for the platform (many inspired directly by Google Gears) to help make building web apps easier. We could now make responsive, offline-enabled applications with AppCache and WebSQL, request permission to access the user's geolocation, and even understand the orientation of the user’s device. WebSocket landed on the platform the same year, heralding a change in the types of experiences developers could deliver on the web. No longer did they have to use long polling to enable a bi-directional channel between the user and a service; developers now had a two-way channel with a simple API to provide real-time communication.
Plink is an interactive music experiment synchronising player state via websockets.
Four major APIs came to Chrome in 2011. WebGL, Web Audio, and the Fullscreen API let us build rich and immersive experiences that could take advantage of the entire screen. IndexedDB — a new “web-first” storage mechanism — us store and query serializable JavaScript objects such as Strings, Objects, Arrays, Files, and Blobs more effectively.
Chrome Web Lab was an experiment that bridged the physical and digital worlds. It used Web Socket, video, real-time streaming, WebGL, and Web Audio to create an immersive world.
A bumper year for game-changing experiences on the web arrived in 2012. On the back of WebGL and Fullscreen, the Pointer Lock and Gamepad APIs let us build games and other web experiences that felt really interactive. The game-changing collection of WebRTC APIs truly set the web apart from all of the other platforms: It let us build P2P video-chat and real-time data sharing, without any plug-ins or proprietary stack, and accessible by simply clicking a link.
One of the first Chrome on Android to Chrome on Android WebRTC calls (March 2013)
In just seven years, the web changed drastically. Browsers got significantly faster and more capable, letting developers build richer experiences on the desktop. Users started to consume even more content on mobile, meaning we all had to rethink how our experiences would work across devices and form-factors, even when the user had no connectivity.
2015-2018: PWA, The Extensible Web, and deeper integration era
In 2015, we experienced a fundamental change in how we thought about integrating capabilities into the web platform. The Extensible Web manifesto asked browser engineers to consider a layered platform that offered lower-level primitives that were easier to explain, more efficient to implement, and allowed web developers to easily build higher-level abstractions, thus increasing the cadence and availability of compelling new features. Service Worker is an example of building on these APIs to follow these principles. Service Worker is a small piece of JavaScript that sits between the browser and the network, and lets the developer decide what to do with any web requests.
The combination of Service Worker and a handful of new APIs allowed marked the beginning of the Progressive Web Apps (PWA) era. PWAs are high-quality sites that combine the reach of the web with the user expectations that come with native platforms. Specifically, PWAs are...
Fast—they load instantly
Reliable—they never show the “downasaur,” even in uncertain network conditions, by taking advantage of the Service Worker and Cache APIs
Engaging—they respond quickly to user interactions with silky-smooth animations and no janky scrolling
Capable—the sites feel like natural extensions on the device, with immersive user experiences provided by features such as “fullscreen” and standalone mode through Web App Manifest; they deliver capabilities for meeting specific business goals, such as re-engagement through the Add to Homescreen feature and Web Push notifications
As PWAs became more established, so did the capabilities of the platform. The Background Sync API brought increased opportunities for developers to improve the resilience of their applications. We also got a better understanding of the network capabilities with extensions to the Network Information API.
Pointer Events, a critical component for any web site or app, came to Chrome after a long wait. Pointer Events presented a unified model for handling all forms of gesture-based input, ranging from touch to pens to mouse pointers.
In 2017, deeper integration of web apps with the host operating system and secure access to devices around the user arrived..
The Image Capture and Media Capture APIs provided full-frame access and control over a phone camera, as well as from other input sources such as a canvas. The Web Share API let sites share data directly with the operating system’s native sharing systems.
The Web Bluetooth API let a user securely select a Bluetooth LE device and have a webpage interact with the device. The Web USB API enabled the same level of connectivity, but to devices connected to the user's machine.
WebAssembly (WASM) opens up many possibilities. It brings a runtime that can execute code at near-native performance. Plus, it opens a new world of experiences on the web by letting developers use existing codebases built for other platforms on the web platform.
Web VR came to the web at roughly the same time it came to native platforms. It let us deliver immersive experiences without installing an app, significantly reducing the gap between a new native primitive arriving on platforms and being available across the web platform.
Forward to the future
We’re excited about the possibilities of the web platform. The web can (and should) be feature-rich, but new capabilities don't always have to be more complex. Web development should be predictable, manageable, and pain-free. Coming APIs such as Feature Policy are great examples of additions that will help developers create amazing sites in a more predictable way, and provide more control and customization over the UX of certain browser features. Feature Policy is the browser's built-in guide rails to help web developers avoid common pitfalls and use best practices.
Layered APIs is another initiative that we're excited about. With it, developers will be able to load and use high-level features shipped directly into the browser as JS modules. For example, instead of building a custom virtualize-scrolling component, developers can just import and use <virtual-scroller> in a site. Layered APIs can be quickly iterated on by the standards bodies and implemented by browser vendors, and will help create a pay-as-you-go standard library for the web. And looking further, the Houdini and Web XR APIs will radically change experiences we can build on and with the web.
Over the last 10 years, we’ve seen a massive increase in the rate at which new primitives and capabilities can be introduced to the web. We can thank all the browser vendors for their continued work to create and iterate on specs, using streamlined processes like those defined by the WICG and based on the principles in the Extensible Web Manifesto. We’ll continue our commitment to work with browser vendors and the developer ecosystem to prioritize features that users need, and to ensure that those capabilities arrive in a “webby” way. By doing so, we can uphold our original mission, while also prioritizing user safety, discoverability, instant access, and universal reach for everyone on the planet.
Here’s to the future of an even-more-capable open web. Posted by Paul Kinlan, the Wizzy Web Warrior.
