This presentation is a developer preview of two upcoming APs with packaging and portals with these api’s. We believe that the you’ll be able to take that with no friction nature to the next level and the created zero friction user experiences.
I hope you like it. Let’s dive right into it all right, so here’s the slide showing a slide to be more precise. This is one of those old-school projector slides in their day, slides like these were useful way to communicate or held important memories for people to view the slides content. The projector needed to mechanically position it into place so that the light source would shine through it and for those of you who might have readed one of these old-school slide shows.
You probably remember how tedious it was to progress through each slide. This kind of makes me feel you know like how we think about the web today, the same feeling just like progressing through cylinder slides when you browse the web today, you can feel all the navigations today the web is used a lot on the go say in Between meetings in an elevator or maybe you’re, on a poor connection, when I’ve got limited time, focus on my phone before the next distraction comes along spending five seconds or longer staring at a white screen.
Waiting for the content to come in for the page should be interactive. That’s incredibly noticeable. Many of you may have observed. We use some exaggerated long transitions on our own slide. So far in this talk, don’t worry we’re going to put an end to that soon. Those were just one second fades, think of how use of the cycle of reading and then waiting reading and then waiting that we’ve kind of grown used to.
We think it’s time to do better and we have some ideas to help. You create seamless, zero, friction. User experiences and that’s what this talk is all about, so how I decide to see team user experience on the web, it’s not near in chrome, 13, back in 2011, we launched a feature called instant site which provides such a blissful user experience. It did so by prayer enduring the search results it would use, it would most likely click on.
However, the feature only worked in materials for various reasons, in particular for professionalism. It only worked for the search results the user had already visited and for which we had a high confidence of user interest them in 2015. Another external problems had to experience what’s launched. I’r talking about armed Rudi is going to oh Castro. What it took in the were things I had it so Cooper said advancing the state-of-the-art in page.
Loading has always been of intense interest to us at Google and for Google search. We point users to a whole lot of web pages and thinking about the totality of the experience that the user gets, we really wanted to feel as fast and as seamless as possible, even as the user goes off, of search and into the whole great world of Content that they’re looking to explore when we started amp, we were intent on using the full power of the web platform that was available, but where we wanted to get was here, and we felt that what we could achieve on a scalable way on the web.
Kind of just got us up to here, so we gave it a bunch of thought and came up with an architecture for instant loading that could work on today’s web. It’s still what we use today. First, there’s the amp javascript library. It helps to ensure that the experience is fast by default, and this is enforced by a validation step which helps keep the experience fast, even as the site is getting updated. The next layer was thinking about how server response times can vary a lot globally and not every site is situated on great infrastructure.
Also, as we’ve seen earlier, you know, sticking huge images into pages intended for mobile. Viewing is still pretty common, and so, for these reasons we added the second layer of caching, where we can ensure that the content is pushed to the edges of the network for faster delivery, and we can do common-sense optimizations and last truly. The best thing we can do to get load times down to zero milliseconds is to pre render the content use our psychic powers, as we just discussed.
This was tempted in search before with instant search. However, you need to think really carefully about the privacy implications of such a design and we had trouble scaling it. The cache will actually help us complement this pre-rendering very well, and koneko will explain more about that in a moment. So we got all of this stood up, and this is where we ended up. Most of what you’re looking at here is what we call the amp viewer.
That’s the account page you’re visiting it’s responsible for displaying the content serve through the amp cache for speed and privacy reasons. However, you’ll notice, by looking at the address bar that the URL is still saying, google.Com in it to help the user understand the where the content they’re viewing came from, we had to add an extra piece of UX to the top of the content area of the Page, the idea of the instant loading was achieved, but the design constraints that we faced and the workarounds that we had to build for them ended up being put on full display in the product experience, and that wasn’t great.
So we hear a bunch of feedback on this, maybe even from some of you so earlier this year we started down this path to make the URLs for amp pages better and after having an amp in the wild for two years we decided it was time to Take all that we had learned and developed the necessary primitives in the web platform directly, so we could make all the content across the web be able to benefit from this kind of technology.
So this means that, for the cases where you click on a link in search – and it’s just a simple navigation, then we want the publishers URL to be the one that shows up in the browser’s address bar while still having the instant or nearly instant loading experience. So I already talked a lot about hub has been bashing with the goal of highly optimized, the user experience. There was a lot of special handling required because of gap in the web platform.
We are now taking inspiration from past efforts like amp and the instance sites in the trying to eliminate this cap by extending the web platform, and by doing so, we also want to enable this direction user experience it’s across all content on the web. We are working on multiple proposals to achieve this goal, but in this talk all introduced to new primitives with packaging and the porters, so let me start with away packaging, as the name implies.
It’s meant for packaging, a piece of web content with liquid to enable various interesting use cases, but let me start first explain how it can help instant navigations was for amp and non amp content, so stepping back we belong. We wanted to make web content load instantly and reliably here’s why it’s hard when you publish something on the web in the simplest setting, you do have a server in the your content to be a project there.
Then someone brought your content, but the server might be overloaded and your content will load slowly. Change experience not good, so what we did in previous Wow, we would be to fit your content suppose that your content linked from a popular traffic source site when a user visits a site, it can trigger a privilege when things that the user is about to be J’tia content, then, because the content is already in the user to church the navigations happen very fast, our fortunately the prefetch.
The website can learn about the user, the interest, even if they don’t visit the website. One way to fix this would be folder before our site to other cache. Here, then, the referral site could bootstrap your page load in the privacy-preserving manner, because it could let the browser private, your content from this. This fix the privacy concern in the content loss instantly. So is this the holy grail? No, not yet.
As already explained, this design ends up in free display in the product. The browser’s address bar shows the URL observable for our site, instead of viewers, because this is where the browser thinks the content is coming from. This is converging to the users. The issue is that the report from doesn’t provide a proper way to let others would stop your page lot, but what if we are in the critical resources, could be shared with popular traffic sources and were loaded on your behalf.
This satellite traffic source to boost appear petals in the winter user, navigates it’s just a regular page load from your service, only much faster. So how can we achieve this? The browser needs a way to verify the tourism resources that are served by a fast cast. This can be done by adding a proof of origin on these resources, which is exactly what we packet in provides. So, let’s see actual standard proposals with packaging.
It’s not the name of a single proposal, but an umbrella concept for multiple spec proposals. The most important one is design exchange, it’s basically a format that represents a single HTTP exchange or a pair with HTTP request/response, very simple, except it’s digitally signed, so that the browser can verify the original resource. There’s another proposal building on top of signed exchange called bounded exchange.
This is a bundle of exchanges, therefore, can represent multiple resources in one package like a whole webpage. We think that the bundles exchanged will enable other interesting use cases while we started to design exchange. Since that’s the key building block and after a year block we’re pleased enough that we’re starting an oompa experiment of the feature on chrome 71, which is in beta now, you can play locally with it by enabling a flag or conjoined experiment to interpret on your site.
Please visit bittley’s /, try fxg to find out how we’d love to get your feedback on this. That will help us improve this feature more quickly. So, in order to create and publish signed exchanges for your resources, you need to first acquire a certificate that can sign exchanges and the hosted at a public. You are. Such a certificate can be created at digital today, once you do that you can generate signed exchanges for your resources by using an Opus, a stirrer.
This process is very manual, but I’ll talk, we’ll talk about each options later in this talk, so the origin trial process is needed for sites that are going to link to signed exchange content. That could be your own site, but it also includes platforms like Google com. So we’ve gone ahead and enrolled Google comm in the signed exchange origin trial and we now like to show you a demo of using signed exchanges for delivering amp content from Google search to walk you through it.
Please join me in welcoming to the stage tsumo from 1-800 flowers and Rustom from CloudFlare. Hey thanks really Amber’s provided a prominent pathway for user discovery of results and brands, teaser close a gap between discovery and speed to engage in thanks to an active developer community and thanks for rollout of new web components where packaging for the deepens experience of providing native Ui, while staring the benefits from the am cash today, we’re excited demo an example of where packaging life are.
You ready check it out. Let’s search Christmas greens, oh yeah, so notice in this search result there’s a amp badge, so it’s prominently featured so you know it instantly. This is an amped search unit. I click on it or tap on it and instantly as Rudy is mentioning. You see that there’s no Google in the you and the URL hat, which is pretty key over here, because now you instantly feel that you’re natively on the website versus being on a separate cache importanly enough.
You also see that there’s no there’s no view ahead of so adds further to the prominence that you are actually on on this in this case, when you have flowers, calm. Furthermore, having attribution so seamless, I just adds to a much more confident realization for a lot of brands that now there will be absolutely wonderful, an attribution going from the SERP to the native site and a big shout out really to the to the amp team and To the gue, mobile consultants, team who’d really been pushing the boundaries of UI UX enhancement and really making sure that the web is taking all the strides possible to go to the next level.
Ristin your go through how this works sure thanks to mom. Yes, so let’s look under the covers and talk about how you would actually deploy something to support sign exchange. So at the top here in green, we have the request flow from your origin through a front-end proxy to your users device on the bottom. You have the request flow into the amp cache and in between you have an amp packager. This prepares the documents for the cache and signs them to support signed exchange.
Now at CloudFlare we sat down and thought about how to use our global programmable network to make this all simpler, and this is what we ended up with. We took all the logic necessary to support, signed exchange and built it into a CloudFlare worker. This sits at our edge and supports both the cryptographic operations, the packaging operations and the logic necessary to arbitrate between the user and am cash request flows, so you might be asking what’s a worker and simply put it v8 running on the edge.
This allows you to write JavaScript targeting the serviceworkers API, deploy it to our edge and have it running instantly in 155. Locations supporting signed exchange and this packaging experience is a great example of what workers is capable of. So, in addition to we’re releasing the code that supports this demo so that you can all build your own workers to try signed exchange, we also plan on building a full, fledged CloudFlare feature to support it at launch.
Go back to Rudy, Thank You, sumo and roast them. So if you’re publishing am content, we’d like to invite you to try out a Developer Preview of signed exchange, amp content in search using the instructions at the link up on the slide, GGO slash web package preview, you can learn more about creating packages and building an Endo and flow, like you just saw for your own amp countenance factory, so we’ve seen the benefits of sign exchange spring to AM publishers, but it’s important not to forget that this will also benefit all pages on the web too.
Now I want to show an additional example of regular cross with navigation on the flow networks. The content will load slowly. On the other hand, the right side shows how it can be done with a prefix with repackaging. You can see that the user is navigate to a page on a different site instantly the profits down from the cash of the referral site so therefore down the privacy-preserving manner so efficient how to use web packaging to realize the privacy-preserving instant navigations by you know.
We’re still doing navigations right, so it still feels like we are progressing through pages at disjoint experience, not a nice seamless experience and we’ll be wondering how you could improve this even further and let me introduce our latest proposal portals. So, let’s see what we mean by navigation versus transition, maybe it’s not too surprising again. This shows a regular navigation. This blood, slowly depending on activity in the breaks years of law and right side, showed an example of what transient, as you can see, when the user taps on a article, a nice indigenous animation, triggered creating a sense of continuity.
The navigation just happened without being felt. The navigation, the so subtle that it worth taking a closer look at the can be seen from the address bar. The user starts their journey from a pigeon feeder to Krista to me and when the animations are finished, the user ends another website. You start horrid ojp. So it’s a cross, I transition combining portals in the Zion exchange. It enables these types of user experience while preserving the user’s privacy.
You might not be interesting yet, but Porter the not limited to cross website navigations. Let’s take a look at how it can improve the user experience of a single website built with multiple page architecture. I’d like to thank her Tina young with ample web comics, our partners in Japan, whom we worked with to create this early exploration for their reading. Manga. On the go website called upon any language on, so let’s see the user experience without porters.
When you reach the end of a chapter, you see an interest shop which, as you can see it takes time to load the next chapter. That’s because the website the using multiple page structure and it needs to load a new page for each chapter. Now, let’s see how that could look like with portals at the end of a chapter, we can produce the next chapter and make the transition seamless pretty cool right. The beauty of this is that you can achieve this smooth user experience without having to be Arctic to your website into single page app, which is, as you know, a non-trivial amount of work.
So what are portals portals are like iframes? You can create one at an image element of a page using a portal tag. At this point it looks pretty much the same as an eye and then navigate to an element by calling an octave atypia when that API is called. The element is detached from the page and becomes the new top-level page. You can also add an animation to smooth out the transition. So what are the differences between porters and iframes? The biggest difference is that portals can be navigated into another interesting differences.
That portals are always created at stop reverberating context where they can still be embedded in a page like iframes. Let’s recap: the benefits portals enable seamless page transitions like what you get with single page apps, but without having to reactive to your site and even across different side origins. So you can just build your website using multiple pages and we can connect them with POTUS.
So here’s the example code snippet of reporters. You can create a portal as an HTML element in the engine, append it to the page to help it emit. Then, when the user touch the embedded portal, you can show a nice animation and the cause activate API to make the actual transition. That’s it exciting, isn’t it and you probably won’t know the current status. We have an explainer on the github digit BT fresh waters, spec to learn more chrome.
Implementation is in progress. We are aiming one origin for next year in the eagerly awaiting me, a feedback that will help us to define this proposal. So that’s basically all from us about low friction desire, friction, but I have one more topic: bounded exchanged, so remember that we hinted that bundle exchanged earlier. They allow multiple resources to be bonded in one package and you might be wondering if about the current status of development so well.
The chrome team has touched the building a prototype to explore the possibilities. We think this could enable interesting use cases, scenarios like offline PW illustration and much more here. Isn’t it I’m Bob a newsreader pdaboy? This is based on toy them. Read up built by one of our or some dabrander Fox in the now runs on a custom chrome. Build to use bounded exchanges G up, allows the user to read news articles reliable way by little bit serviceworker download and saved articles as bandits if the news page provides them so that the user can later with the saved articles from multiple sites, even while offering not That start with us to show ads coming from the original news sites in the site’s keep maintaining the control over them.
Here’s another example, as you may know, loading a large number resources costly in the burning of them in one big javascript file using bandwidth like epic. It’s a very popular technique. We did an experiment to see if bonded exchanges can be used here which could allow the browser to process in the cache individual resources in the browser, in the bundle without executing the javascript, and one of the results looked like this.
While still preliminary it looks promising, we think so we think there’s some potential and don’t want to know what you think all right. So let’s go back to the main topic and wrap up the stock. So we talked about two new proposals for zero friction user experiences. First, web packaging enables privacy-preserving instant navigations and second portals enables seamless transitions between pages or sites combined together to enable zero friction.
Page changes transitions on top of any web pages even across origins, and here’s a look at the roadmap prize to ship style exchanges on stable by the middle of 2019 and also to start an origin trial for porters sometime around then as well. So for Google search really excited about both signed exchanges and portals as a path to building more zero friction user experiences across the whole web. Following the footsteps of the demo you just saw earlier in am we’d like to launch support for amp signed exchanges next year.
We’re also actively working on how Nonnie pages can adopt these same technologies for highly optimized user experiences. We believe that the bench I just have a highly optimized content on the web regardez foods I eat sample, not with all the standard work we are doing today and we think engaging various partners as well as other browser vendors, because we want to refine what we Have and I want to make sure that it will help them and the developers like you achieve highly optimized user experiences.
For instance, such teams at Bing Yahoo, Japan Biden, Google content publishers in the web developers at 1-800, flowers ha Tina, young magenta, web comics, CD ends and certificate authorities such as digit in the crowd flair, as well as folks working on the decentralized web at the protocol. We hugely rely on your feedback and are eagerly awaiting to hear what you think here are the important links that we referenced and that you can check out to learn more and share your opinion and give us input.
You can also come to the ask chrome area in the next break and we’ll be there to answer your questions. We’re really excited about the future of the web, and I didn’t like the kinds of experiences that we showed today and we’ll appreciate your help and joining us to move these technologies forward. Thank you. You
Jimmy's Internet Marketing Business Blog 