Today, moving from page to page on the web feels like a long, slow transition - users have to stare at a white screen as their site loads and if they’re on a bad network, they’re disappointed when they see...nothing.
We want to enable developers to deliver a zero-friction, seamless experience to their users on the web and we’re excited to share two new specifications that we’ve been working on - Web Packaging and Portals.
One way to make loading fast is to get content as close to the user as possible, such as in edge caches. But the rise in HTTPS had the side effect of making this harder to achieve. And while AMP enables us to have privacy preserving pre-rendering of content with lightning fast load times, it came with the nagging issue of the browser not showing the publisher’s URL. Building on the AMP model, we introduced Web Packaging that gives the browser a proof of origin for the resources that it renders. This is achieved through Signed Exchanges, a subset of the full Web Packaging proposal.
So as long as the package is properly signed with a key that corresponds to the domain, it is presented to the user as having come from that domain. This enables privacy-preserving preloading and makes edge caching much easier, because now your content can be distributed to multiple caches without the need for an explicit DNS relationship with that cache. And we’re excited to see that Signed Exchanges are already available for origin trial. One of the first places you can see this in action is with the Google Search developer preview for signed exchange AMP content.
While instant loading is great, Portals take away the entire perception of navigation between pages by enabling multi-page sites to act like single-page applications through the same level of fluid transitions. It’s best when seen in action:
It’s still early in the development of the spec and we’d love your feedback on how we can make them more relevant for your use case.
Smooth user experience without losing developer experience
Having buttery smooth interactions is important, and as Mariko said yesterday, you can never add enough butter. However this level of UX often comes with a bitter trade-off, one that none of us like - bad developer experience. But we believe that it IS possible to break this dead-lock and that is where we’ll be spending a lot of our time in the coming year.
The Houdini APIs, such as the CSS Paint API, Animation and Layout Worklets give developers an unprecedented level of control to build new and modern interfaces.
And to give developers a well-lit path and ensure that they don’t regress from their performance goals as they build in incremental features, we’re working to build Feature Policy that catch common mistakes and give developers a signal during staging and more importantly in production. For more on this, tune in to Jason’s talk later today.
Performance at scale
Focusing on performance is critical today. Frameworks play a very important role in achieving lasting improvements at scale. We’ve already seen some great work done by various frameworks over this past year, and we want to collaborate and support their efforts in 2019.
So we’re excited to announce that starting today, we’ll be making feedback from framework teams a standard part of the Chrome Intent to Implement process. We want to use this process to include the voice of frameworks within the features that we prioritize.
Secondly, to really strengthen this collaboration, we’re launching a fund with an initial amount of $200,000 to support the development of performance related features in third party frameworks. We’ll share performance goals that we’d love to see “on by default” in frameworks. We’re excited to see what the developer community will come up with given their experience working with frameworks and the wider ecosystem. And based on the potential impact of the proposal, we’ll support your work through direct funding.
We’ll have more to share on this in the coming weeks. In the meantime, developers can go to this link to register interest. Applicants can start an RFC on the github repo of the project they intend to modify and would be considered only if the project’s core maintainers sign-off on the feature.
Meanwhile, stay tuned on the livestream to watch the rest of the sessions of day two of Chrome Dev Summit 2018!
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.
