The web: state of the union (Google I/O ’18)
Articles Blog

The web: state of the union (Google I/O ’18)

August 8, 2019


[UPBEAT MUSIC] BEN GALBRAITH: Good
afternoon, everyone, and welcome to the Web
State of the Union. I’m Ben Galbraith, the product
lead on the Chrome team. MALTE UBL: And I’m
Malte, Engineering Lead for the AMP Project. BEN GALBRAITH: In
this talk, we’re going to share with you Google’s
perspective on the state of the web, and we’re
going to highlight what we’re excited about. MALTE UBL: And we’ll talk
through the exciting latest dev development tools libraries
and frameworks we’re working on to make you more productive. BEN GALBRAITH: We’ve got a lot
to cover in this session, so let’s dive right in. MALTE UBL: Let’s go. The web has special
meaning for us at Google, because
our core mission to organize the
world’s information and make it
universally accessible depends on an open access
system like the web. So it’s incredibly
important for us that the web is
healthy and thriving. BEN GALBRAITH: And the
web’s evolved dramatically over the past few years,
gaining significant new APIs and capabilities. MALTE UBL: Probably
the most important API introduced to the web
in the last 10 years is the Service Worker. Since the beginning
of the web, it’s been about pages that users
request and the browser renders. But the Service Worker
changed and introduced a brand new, top-level
abstraction that goes beyond what a page
can do, receiving events like push notifications, handle
data synchronization even after the page
has gone away, let you take control of
networking so you can make robust offline web pages. Service Worker have been in
a good amount of browsers for a while, but now,
they’re basically everywhere. With AMP rolling support
in Safari on iOS and madOS this March, and super hot off
the press, Microsoft Shift Workers last week, [INAUDIBLE]
every single major modem browser supports the standard. BEN GALBRAITH: This is a
huge moment for the web. We’re really excited about it. So we’ve been using the
term progressive web app to help explain all
these new improvements. And the gradual rollout
of Service Worker illustrates the importance
of the progressive bit here. Because PWAs that are
written progressively to take advantage
of browser features as they become available can
seamlessly upgrade with no need to redeploy. So PWAs are now everywhere, and
I want to share a few examples. Let’s start with Ofo, a
global bike-sharing company, which I hear is coming
to the Bay Area soon. MALTE UBL: Another one. Is that right? BEN GALBRAITH: Well, you can
never have too many, Malte. And their brand new PWA
uses your device’s GPS to locate the nearest
bike, and your camera to scan the bike’s
QR code to unlock it, all directly in the browser. And that’s it. You can start riding the bike. I love this example, because
it shows the power of the web’s low-friction model. You skip all the steps of
finding an app in the store and installing it. So Mother’s Day is
coming up next week. MALTE UBL: Uh-oh. BEN GALBRAITH: I guess it makes
1-800-Flowers a timely mention. They’re a global gift and
flower delivery service. And after they
shipped their new PWA, 50% more of their
customers bought things on their site, which
is pretty amazing. Let’s also take a look
at it Editora Globo, part of the largest
media company in Brazil. After they upgraded their site,
they saw a 50% increase in time that users are
spending on their site. MALTE UBL: Starbucks is
another great example. They recently
rolled out their PWA and saw the daily and
monthly active users double. And because the site
works well on desktops, user can order ahead
from their desks. And somewhat to their
surprise, Starbucks found that this is actually
something users want. BEN GALBRAITH: So these
are just a few examples. But it turns out
across all sites that advertise with Google, we’ve
seen that upgrading to a PWA delivers an average 20% boost to
the website’s conversion rate. That’s 20% more people
who wind up transacting on the site as a result. So this PWA movement that
we’ve been talking about isn’t just lip service. All of these new
modern web capabilities deliver a materially
better user experience. And it shows up in the
bottom line of the businesses that we’ve all built on the web. MALTE UBL: All right, Ben. Since we are, you
know, a Google I/O, I thought it’d be
kind of a good idea to talk about how Google itself
is doing in the PWA space, right? I think that kind
of makes sense. So let’s start with our
arguably most important web application, Google Search. Turns out the search
result page is now backed by Service Worker. It makes it both load
faster and more reliably. All in all, it reduces
JavaScript download by users by a whopping 50%. And that, in turn, reduces
interactions delayed by not having JS around by 6%. At the scale of storage, that’s
a huge win for user experience. The Service Worker enables a
whole category of new features. If you don’t have the
Service Worker around, when you make a search
and you’re offline, you just get an
error message, right? With the Service Worker,
you got a friendly message that a push notification
will notify you when you’re back online and
the search result is ready. BEN GALBRAITH: So let’s go from
our original service to one of our newest– Bulletin. They’ve got a PWA, and
it’s another great example of the low friction of the
web, because their use case is all about helping people capture
time-sensitive local news events right as
they unfold, so you can get right into
the site of the action without any install friction. And because the web
is cross-platform, the Bulletin team has a super
efficient development story, because they can get to
desktop, Android, iOS, and more with a single progressive
product and code base. MALTE UBL: Another
interesting case study comes from our Maps team. They built a version
of our app designed for low-cost devices
that are gaining traction in some of the web’s
fastest-growing markets, like India. The app is called Maps Go,
and it’s a progressive web app using Service
Worker, active home screen, and other features. It’s optimized for
low network usage, so it’s better for regions
that have unreliable networks. And more important,
it costs less money to use when your
connection is metered. BEN GALBRAITH: Let’s
talk about media. It’s a really important
use case on the web. In fact, it represents
15% of all time spent in Chrome on Android
and 20% on Chrome for desktop. And over 30,000 years of
video are watched daily in Chrome worldwide. I think this actually
just may be my kids alone. I’m not sure. Maybe. So a bunch of
media-specific work has been happening
on the platform. First, the platform’s gained
a bunch of new media features, like the Media Session
API that gives you integration with lock screen
controls on the device. And the media-sharing
site Vimeo is an example of a developer who just recently
integrated this, and seen strong usage, especially
for longer media types. There’s the Media
Capabilities API that exposes rich stats
about your device, and you can make
intelligent choices about which stream to use. There’s Picture-in-Picture
support, which we’re showing here. This works across desktop
and mobile devices. And there’s the new
Presentation API that allows you to
explicitly control what you show on secondary displays. And let’s talk about offline
support for a minute. It’s a major use
case for many parts of the world with limited access
to reliable, high-bandwidth connections. And so the large Indian media
property Voot, as well as Globo, are enabling the
new web offline media APIs into their sites. And there’s a new,
next-generation, open, royalty-free codec coming. It’s called AV1. We’ve developed
it in partnership with over 30 major media
and tech companies, and it provides 30%
better compression over the earlier VP9 codec. So this is going to have a
big impact, and its shipping in Chrome later this year. OK. So we’ve been focused
on mobile, but now, I want to talk about
desktop for a minute, because it’s an audience
that remains in the billions. And productivity web apps,
like G Suite, continue to grow. And as we saw with Starbucks,
even mobile-focused experiences are finding big traction when
they come over to desktop. So we’re starting to
take mobile lessons over to the desktop platform. And one of the
things we’re doing is adding support for add to
homescreen to desktop Chrome so that, once you install
a PWA on the desktop, it gets its own icon and
its own top-level window. So finally, you
can use Alt-Tab– or a Command-Tab, if you like– to get to those windows,
which is something I’ve wanted for a long time. And because this window is
powered by the full Chrome browser, you also get access to
Chrome’s browser affordances, like autofill. So these new
desktop PWA features are available in beta
in Chrome OS today, and they’ll ship to
everyone in June. And we’ll follow with Windows
and Mac later this year. I’m also a big
Spotify fan, so I’m excited about this next bit. They’re shipping support
for desktop PWA features, and you can experience
it now on Chrome OS. I think it’s a great fit,
because the web gives music fans a fast and convenient way
to get right in the Spotify and listen to their
favorite songs. And their desktop
PWA is a rich client that allows for playback
of music and podcasts. And it has Google Cast
and Spotify Connect support for remotely
playing music, either through speakers
or other devices, or through Spotify
apps that are running. And you can get right into it. And it’s an app-class experience
with no installation hurdles or app updates to manage. MALTE UBL: Wow. That Spotify PWA is cool, but
let’s talk about something even more exciting– email. You know, I’m a manager now. I spend, like, half
my life in Gmail. I absolutely love the
new upgraded and super awesome Gmail that we
recently announced. You know, it’s basically
the original web app, and now it’s an awesome
desktop PWA with Service Worker-based offline mode. These new PWA feature is set up
to be a true top-level window. Like Ben said, you
can Alt-Tab to it, and basically treat it
like any other app running on your operating system. And so the boundaries
between websites and apps are blurring on desktop as well. BEN GALBRAITH: So while we’re
talking about the desktop web, there’s another example
I want to share. AutoCAD. So AutoCAD popularized
computer aided design since its initial
release in 1982, and it continues
to innovate today. I think there’s an
estimated 2 to 5 million AutoCAD drawing files opened
every day, and billions of them are stored in cloud-hosted
file services. So using the web is a great
fit to create a viewer for these types of files. They set out to create
a web-based editor about eight years
ago, but they found that their complex,
optimized codebase was impractical to
rewrite in JavaScript. So enter Web Assembly. It’s a new web
standard that enables high-performance
execution of compiled code right in the browser. And it gives this code
access to web APIs. So this opens up a bunch of
interesting new use cases for the web, like enabling
large C and C++ code bases, running performance-sensitive
code right in the browser, such as a media codec, and
it enables a whole new class of games on the web. In fact, Unreal and
Unity, which are really popular gaming engines, can
both target Web Assembly, and using WebGL, you can do
high-performance 3D gaming. The best part is that Web
Assembly is available today across the major modern
browsers in mobile and desktop. This is the first time
in the history of the web that we’ve had a broadly
available alternative to JavaScript cross-browser. MALTE UBL: I think this is
another really big moment for the web, actually. BEN GALBRAITH: So let’s
get back to AutoCAD. They launched a new
web app in March that was able to take their
35-year-old codebase that’s literally older
than the web itself. MALTE UBL: It’s also kind
of older than me, almost. BEN GALBRAITH: I’m not
sure which aged better, to be honest with you. But they were able to bring it
to the web using Web Assembly, and AutoCAD is now universally
accessible on all devices instantly. So if you’re away
from your workstation, you can make edits
to your CAD drawings, regardless of the device
or operating system. And their engineering team
now has a shared C++ codebase. So as they make
changes, they’re easily integrated into that web app. So Web Assembly and
Chrome is powered by V8, our JavaScript engine. So it’s a good time to talk
about JavaScript performance. We’ve continued our focus on
optimizing for real-world web sites, and in partnership
with the community, we created a new benchmark
called Speedometer 2. So this measures browser
and JavaScript performance in a web app that’s
been reimplemented in over a dozen web frameworks. And we’re pleased to share
that over the past year, our performance on this score
has dramatically improved– including a 112%
improvement with React, with significant performance
gains across other frameworks, as you can see. MALTE UBL: Let me just try to
rephrase that really quick. Your React apps will
now run twice as fast compared to a year ago
on the same hardware. I think that’s really amazing. BEN GALBRAITH: So in
addition to all of this, V8 has implemented
support for a bunch of powerful new modern
JavaScript features, so be sure to check out
the talk for more details. MALTE UBL: As a
web developer, I’m incredibly excited
with the next topic. Who here has ever put
together a web page with, like, Chrome DevTools,
and ever found it doesn’t quite work the same
way in other browsers, right? That sometimes happens. I think, like, 15 years
ago, we developed for IE, and then it didn’t
work in Firefox. Browsers change, but the problem
of subtle browsing capabilities never really has. But there is light at
the end of the tunnel. In your own project,
do you have, like, unit tests or integration tests? And if you don’t,
right, you probably kind of feel bad about it. The web has never had
anything like that. So I’m incredibly excited
that automated tests for web standards are finally a thing. These automated tests are
shared amongst browsers to validate our
implementations, ensuring that when new features like
Service Worker come out, you minimize
cross-browser capabilities and inconsistencies. And things are actually
getting better. Browsers are working hard
to becoming more compatible. And we want to especially thank
the countless volunteers who are helping with
web compatibility. As you can see on
this chart, the number of web features for
only one browser is going down over time. And the same number,
the number of features on all major engines,
is constantly going up. There’s a lot of
work to do, but we’re excited that things are
going on the right track BEN GALBRAITH: OK. So we’re going to shift
gears now and move on from talking about
the web platform to the tools, libraries,
and frameworks that we’re working
on here at Google to make web development
more productive. Let’s get started with the tool
that we ship to every Chrome user worldwide– Chrome’s own DevTools. Millions of developers
use this every single day, and it keeps getting
better and better. Please welcome Paul
Irish, who is here to give us a taste of
what’s new this year. [APPLAUSE] PAUL IRISH: All right. Thank you. Thanks, Ben. All right. So it’s 2018, right? The world is asynchronous. And when we’re debugging,
we can’t necessarily step through code line-by-line. Like, we have
timers, and promises, and network activity
to contend with. So the Chrome DevTools
have transformed to adapt to this new
asynchronous world as well. So let me show you what
it was like a year ago. We have this little function–
setTimeout with console log within it– and we’ll just take a
look at what happens. So this is Chrome
from a year ago. And I want to step
into the console, into the setTimeout to
pause in the console log. But when I hit step
into, we step past it. This is not really
what you want. But in today’s Chrome, we have
the same code, we step in, and we jump into the
invocation in the setTimeout. And again, now we’re paused
right on that log method point. So this is what we expect
when we hit setTimeout, right? setTimeout, like
stepping, debugging, this should match
our expectations of being in this
asynchronous world. So I’ve shown this
with setTimeout, but you can expect the same
kind of debugging upgrades when you work with
web platform features like premises, postMessage,
Web Workers, and more. So speaking of
features, web platform evolves quickly, right? Now, as it evolves,
we as developers have to feel comfortable with
the new APIs, the new objects, and how our code interacts. And the console has always
been kind of our home base for that exploration. So I’m excited to share with
you a brand new DevTools feature that I think revolutionizes how
we interact with the console. We call it Eager Evaluation. And the best way to
explain it is with a demo, so let’s do that. Let’s switch over to
my machine right there. OK. So we got this little
code right here. We have a regular expression. We’re going to call Exec on it. We have a string. Let me just finish
off this string. Thanks. All right. Now, as I finish off
everything, watch this. Now, I didn’t hit Enter
yet, but I’m already getting the results of this evaluation. The cool thing is, we’re going
to update this as we type. So let me go over here. Will this even work if
I change this to using, like, parens around that? No. OK. Well, no. So the regular expression
is a little brittle. I’ll admit it. All right. OK. But I do see– OK. The 0 to 9 range. We could actually improve this. Actually, all three of them. Let’s just select all
three, and we’ll just replace it with slash d. And yeah, OK. Looks like we’re still
pulling out the same stuff. So that’s good. All right. And the other thing
I wanted to do was I wanted to pull the area
code out of this phone number right here. So you know, while we have
these multiple cursors, let’s just go ahead and
add some capture groups to the regular expression. All right. Boom boom boom, capture
capture capture. So area code is one. All right. Sweet. So in a few short moments, we’ve
explored an API, found a bug, made an improvement,
and got the result that we were looking for. It’s pretty awesome. All right. Let’s switch back to the slides. So really, that demo
is just a taste. Eager Evaluation enables
you to work with all sorts of JavaScript language
features, .APIs. You’re in JavaScript code. And the really
powerful thing about it is that we can guarantee
there will be no side effects. And the way that
we enable this is that we introduced a new
mode in V8, where we attempt to evaluate some JavaScript. And if we know that
it’s about to cause a side effect that will
change the outside state, we just bail. So speaking of V8– we’ve been working hard
to bring the same DevTools experience from the
back end– sorry, from the front end
to the back end by making it a great
tool for Node.js. so grab yourself a
recent build of note and you can use the same
feature set on the server that you do normally
on the client. OK. So we have covered a
lot of ground in this. If you’d like to
see more, check out the DevTools talk, where
we’ll be diving deeper into all of this. Thank you guys very much. [APPLAUSE] BEN GALBRAITH: Thanks, Paul. So if you didn’t
notice on the slide, Paul’s session starts
bright and early tomorrow, but is really worth the
effort to get an early start. Encourage you to attend. OK. I want to talk about
another feature of DevTools called Lighthouse. This gives you clear guidance
on how your website can be improved in categories such
as performance, accessibility, capabilities, and more. And people are
actually using this. So far this year, over
500,000 developers have used it to analyze
over 2 million pages. So we’re working hard to
make Lighthouse better. And this year, we’re
launching a new version, 3.0, with a refined UI and
higher-quality insights. And we’re announcing
a new Lighthouse API to bring these insights
into your workflow and to enable integration with
other tools and platforms. Lighthouse generates
some great insights, but in the real world,
there are a host of variables that
could influence how your site actually
performs, like variable network conditions or the different
devices that people are using. And so late last
year, we launched the Chrome User Experience
Report to help with this. It contains real-world
performance data showing how Chrome users
are experiencing over 4 million global domains. So you can analyze
this data set yourself using the free BigQuery tool,
or, we’ve also integrated it into our PageSpeed
Insights tool, which is the easiest way to
use some of this data to see your performance. And you can also
compare yourself to your competitors, which
can be very motivating. OK. So we also introduced the
Puppeteer open-source project last year. This is a Node.js
library for controlling the headless version
of Chrome, giving you programmatic access to
its rendering engine and to its DevTools. This project is on fire, with
over three million installs. And it’s used by over
600 NPM projects. So, I mean, who knows? Maybe that’s SyntaxHighlighter
just installed brought it along for the ride. You never know
with these things. Most important of all, it
has 30,000 GitHub stars. MALTE UBL: That’s actually
the most important thing. BEN GALBRAITH: Is it? I think it may be, actually. I don’t know. So it went 1.0 in
January, and it opens up a bunch of interesting use
cases to integrate Chrome into your developer workflow. We’re also releasing a new
version of our Workbox library. This makes common Service Worker
scenarios significantly easier. With it, you can
transform code like this– which is about creating
a cache for CSS files– into this. MALTE UBL: I think
Workbox is maybe the most underrated
library from Google. If you’re thinking about
making a Service Worker, I’d really recommend
you start with Workbox. It’s incredibly easy,
instead of running your own. BEN GALBRAITH: OK. So if done poorly,
sign-up and sign-in can be a big friction
point for users. So our new one-tap sign-up
and auto sign-in library, currently in early access,
can drive really big impact. MALTE UBL: Wait, is
that actually the name? BEN GALBRAITH: Well,
I mean, naming’s one of the hardest problems in
computer science, right? So yeah, that is the name. But this library, it
does create a truly one-tap sign-up experience. There’s no typing, there’s no
identity provider to remember, and there’s no
password to create. And so when users
return to your site, they can sign back
in really easily. It works by drafting
off of the existing sign-in that the user has on the
device with a Google property, like Gmail, and it’s based
on the Credential Manager web standard. There are a few examples
I want to share here of where the benefits. come in. First, Redfin, a real estate
company here in the US, saw an 80% increase in
sign-ups after implementing the one-tap library. And Trivago, one of the world’s
leading hotel search engines, operating in 55 countries, saw
a 2x increase in user sign-ins after using the library. So payments is another area
where some optimization can go a long way. And we’ve just recently
made Google Pay available on the web. MALTE UBL: Now,
that’s a good thing. BEN GALBRAITH: Well, it took
us a while to get there. But you can easily use
this to accept payments from users who have cards
saved to their Google account, and it works seamlessly across
platforms and global regions anywhere that you have
users signed in to Google. And platforms like
Shopify now that you integrate with Google
Pay with a single click. All right. I want to talk about
Web Components. We’re a big fan of this. It’s a set of APIs that let
you build your own reusable, encapsulated components
using primitives that are baked into the
web platform itself. And it’s only been in
the past few months that Web Components
now have native support in major browsers, and there are
polyfills to reach all of them. So they give you a
really interesting way to create nice,
reusable chunks of code that you can pass around. And you can create
them with just about every major framework. We created a website called
Custom Elements Everywhere, with up to date compatibility
information on many of the modern frameworks. And Preact, Vue, and
many others are now entirely compatible
with the core test. And our own Angular
team just released Angular Elements–
a first-class way to use Web Components within
an existing Angular app. And speaking of
Web Components, we created the Polymer
Project to help you build Web Components,
whether to help your own team achieve
reuse, or to create custom elements for other developers. And this week, the
Polymer team is releasing the next
major version, 3.0, which adds support for
ES modules and npm, so it now works seamlessly
with your favorite tools and frameworks. And the Polymer team
is also unveiling a few cutting-edge
new products here at I/O that are focused
on creating fast-loading and tightly optimized web apps. One of these is lit-html. It’s a small, three
kilobyte rendering library that uses the latest
ES6 features, that enables a web app to perform
fast efficient updates to the DOM, which gives you a
really snappy user interface. And using this library,
you can create really compact web components, in
terms of file size, that work directly alongside
your existing web components or other framework elements. It’s a great example of
leveraging the modern web platform to make your
development easier and your apps more efficient. MALTE UBL: Ben, I think it’s
fair to say that you just went through a lot of stuff,
which actually kind of brings me to the next topic. Talking to developers,
one message comes up over and
over again, which is, like, hey, Chrome team. You keep pushing all
these awesome new features at I/O, talk about them. But frankly, it’s
a bit overwhelming, and we’re kind of
lost on what to do. Now, obviously, this may not
be many of you here, right? The web works great for
experts among us who like to dive deep on topics. But not everyone is like that. Not every company
can necessarily afford to always be up to
date with the absolute latest capabilities and best practices. And if you start out
with an expert team, your project might
eventually be maintained by people with less context. It’s important for your
forms to remain stable as your web app ages. I think we need to
recognize for the web to be truly open
and inclusive, we must bring these
folks along as well and allow them to build
great experiences. I think that is where the
project that I work on, AMP, comes in, and it
fits an important niche. As a super short summary, AMP
is a Web Component library and acquisition system for
building reliably fast websites with great user experience. By encapsulating best practices
and providing automated guidance to work
success, AMP enables a vast range of publishers to
deploy great user experience at incredible scale. Let’s take a look at
that scale really quick. Currently, now, there’s
over 6 billion AMP pages across 56 million domains,
and most importantly, they continue to load in well
under one second, measured from Google Search,
at the median. This translates into
business success. Overstock.com saw a 36% increase
in revenue on their AMP pages. Indian marketplace ShopClues saw
a 29% increase in conversions, and Chinese news
site Tencent News saw 2x increase in time on
site, and a 40% decrease in bounce rate. Talking about AMP in e-commerce,
maybe my favorite example is AliExpress. They went all in on AMP. They use it for their home
page, for the detail pages, category pages on their
own, and then they back it with a Service Worker to
turn it into a progressive web app. And they have seen
some great results. Now, AMP is sometimes seen
as a technology specific to Google Search. This is a metric that
specifically filters out traffic from Google Search,
and they saw a 31% increase in conversion rate. And another important thing– they’ve been using it
successfully in AdWords as well. So if you are making
AMP pages, make sure you also tie them
to your AdWords account. As I’ve mentioned earlier,
we’re really focusing on the AMP playing a bigger set
of [? properties ?] to create great
experiences on the web. AMP Stories is such a project. Because content consumption
on mobile is changing, bite-sized, full-screen
storytelling formats are becoming more
popular every day. But this development
happens almost exclusively in native apps. The web is literally the
best platform to build these, and it certainly has
all the capabilities to create such content, but
the technical investment that each single publisher would
have to make to implement them is often prohibitive. And so, they’re drawn to
these wild gardens that make things easy end-to-end. With AMP stories, when
publishers capture an emerging type of storytelling,
they’ll be able to publish on their own website with
minimal technical investment. And so we created a
set of web components with rich storytelling
on the mobile web. They have great support for
vertical video, animations, and [INAUDIBLE] directions. And while they’re
designed for mobile, they work great on
desktop as well. Now, obviously, I’m sorry–
this is a pretty radical shift. We’re trying to progressively
enhance the plain old web page. So we’re constantly at
work at implementing best-in-class features as
easy-to-use web components that can be added to any document
with minimal effort. This includes stuff
like parallax scrolling, immersive light
boxes, and things like videos that stay on
the screen as you scroll. Well, our goal, to summarize,
is to get these behaviors added to as many web pages as
possible to make sure that the web continues to
make user expectations. All right. So I think this
can be summarized as a lot of exciting
stuff coming to AMP. But I did want to touch
on a different angle. We’ve realized that
AMP isn’t for everyone. Being opinionated
naturally comes with limitations, which is not
the right tool for the job. And also, being opinionated
means that some people have different opinions. Let’s say your opinion is,
I don’t want to use AMP. BEN GALBRAITH: I don’t know
what you’re talking about. I’ve never heard
anyone say that. MALTE UBL: Right? Sometimes happens. And if you think
that’s great, that’s what the web is all about. And we’re committed
to make it happen. Let’s take a look at the
core features that AMP brought to the web experience. Real-live user experience,
instant loading, and what we call seamless navigation. I think the first two kind
of explain themselves. We’ll talk about the last one–
seamless navigation– later in this presentation. We want to enable platforms
such as Google Search to provide the same
innovative experiences as they do for AMP today for all
pages on the internet to implement a new set of
web platform standards. So if you’d rater not use
AMP, that’s super cool. You still get access to the
placement and capabilities. Let’s take a look at
some of the factors that play the [INAUDIBLE] version
of the AMP experience. As I mentioned earlier AMP
pages load, in median, at well under one second. With the Chrome User
Experience Report, there is now a
public data set that shows how fast a
particular web page loads. So we’re planning
to use that data to find web pages
that meet or exceed the benchmarks set by AMP. But load time isn’t everything. For example, a web page that
loads super quickly but isn’t actually interactive,
because JavaScript blocks the main thread, does
not provide a great user experience. So we’re developing
a new set of metrics that, in combination, reflect
a more holistic spectrum of the experience a user
has when they visit a page. Another feature that
AMP brought to the web was privacy-preserving
instant loading. I’m going to explain really
quick what that means. To achieve instant
loading, you need to download a resource
before the user clicks, because otherwise, the network
will always be in the way, and things won’t quite be
instant, especially on mobile. With link rel=prefetch
and link rel=prerender, the web actually had
built-in methods for this. But it turns out that naive
pre-fetching would sometimes not be what the user
expects in terms of privacy. Because now, the owner
of a page as a pre-fetch, might to be able to, for
example, set a cookie and later send you
ads based on that, although you never actually
ended up going to the page. AMP’s implementation
of instant loading does not have this problem. And now, we want to bring the
same privacy-friendly features to the wider web. That is where an
emerging standard called Web Packaging comes in. Web Packaging allows you to
bundle up your web content, allow other parties to
spread it on behalf of you, while keeping the integrity
guarantees of HTTPS. It has a bunch of awesome
applications like faster JavaScript loading, and
we think it could actually form the missing primitive
behind a more decentralized web. And then finally, it allows
for the same privacy-preserving instant-loading for all
content on the web that provides web packages. It also has one very
AMP-specific benefit, because those pesky
google.com/amp URLs that you don’t like, I don’t
like, nobody likes– they’re going away
from web packaging. You couldn’t be more excited. All right. I talked about how this
web-packaging standard it is still very
new, but we actually implement it in Chrome. You can try it behind
the flag today. My team has built an open-source
tool to create the packages. The Google Search team
has built a prototype that works with the packages. And then, finally, we
use two companies– Food Network and
Pinterest– to actually make web packages for the content. To give an impression about how
this all works together, please welcome onstage
Ludo from Pinterest. LUDO ANTONOV: Thanks, Marte. At Pinterest, our
focus is to help people around the world discover
and do the things they love. We wanted to create
a seamless experience on the mobile web that puts
the right content in front of our users,
enabling them to take full advantage of discovering
content and browsing Pinterest without the friction
of slow load times or having to
redirect to the app. This is why we’re really
excited to showcase how we’re using AMP PWA and web
packaging today in the product. So to do that, let’s
start with a simple search and switch to the demo. So I have a
five-year-old at home. She loves to make things. And so, I’m looking for some
spring craft ideas for her. So here, you see that when
I click on the AMP page, it loads really fast. And even though we
are on an AMP page, you will notice that the
URL says pinterest.com. This is made possible by the
web packaging technology that enables us to publish
signed content that then can be served directly
from the Google’s cache. It also is a big win for
the privacy of our users, as all of their actions
are now contained within the pinterest.com origin. So from here, I’ll
find a cool idea. And now, you’ll see that,
when I click on that, I was very seamlessly
transitioned into the Pinterest PWA app. From here, I can take
more rich actions, like save this to my board. Oh. But more importantly, also,
once I’m on our PWA app, then I can add Pinterest to the
home screen, and from there, show all the cool ideas that I
have collected for my daughter so that we can do them together. So at Pinterest, we’re
committed to making world-class experience
for our users. We were the first class
at scale that enables AMP, and we’ve been able to
shave over 70% of load times for our users
over billions of pages and for millions of users. This is, in a nutshell, how
our mobile web experience is evolving to help
people around the world find inspiration. Thank you. [APPLAUSE] MALTE UBL: Thanks, Ludo,
for the awesome demo. To summarize, Web
Packaging here allows a privacy-preserving instant
loading of web content. It does not depend on a
particular technology like AMP to work. As I said earlier, this standard
is still being finalized. It is not ready to ship. We do expect significant
changes based on input from other browser
vendors in the web community. But meanwhile, building the
infrastructure for all of you to be able to make web packages. Stay tuned for announcements
later this year. Summarizing AMP. Publishers, merchants, and
advertisers across the globe are seeing amazing
success using AMP as the foundation of
their PWAs and web sites. If you already have
AMP pages, check out the huge set of
new web components super easily enhance
the user experience. We’d love you to
use AMP if you’d like to benefit from
Google’s expertise and help to create
great web apps. It’s for technologies
like web packaging and advanced metrics that
bring AMP’s core benefit like instant loading
the reliable user experience the wider web. BEN GALBRAITH: It’s great to
see what’s happening with AMP. And throughout this talk,
we’ve highlighted examples where the web connects
users right to content without any installation steps. We see this low-friction
model of web links as being akin to a super
power of the platform. As Malte mentioned,
Web Packaging is a really exciting
emerging standard for a bunch of reasons. And I’m really glad that AMP’s
able to use it to resolve your issues, but I think there’s
a bigger opportunity here for Web Packaging to help the
web lean into this super power and to go from fast
load times to no load times whatsoever, and to do
it for the entire platform, not just AMP. So what would this
kind of truly instant, friction-free experience
actually look like? We’d like to show
you a prototype. MALTE UBL: Here’s a demo
that the Google Image team is exploring. So imagine you search for
something with Google Image Search, and you click
one of the results. All right? And you go with a large image. Right? That makes sense. But how do you go to the web
page where the image came from? Today, you have to click
that little button. You might do that. You might also not do that. What if, instead, you could
simply scroll to the page instead? We think that,
[INAUDIBLE] answer, there would be significant
higher number of people actually move on to
the next page, which would be amazing for
publishing the web content, and a great experience as well. All right. This was, of course,
just one example where we’re super
excited to re-think how navigation on the
web could work to truly make the web the most seamless
and frictionless experience on mobile. BEN GALBRAITH: OK. We are running out of time. So we should wrap up with
the takeaways for the talk. The web presents a fantastic,
compelling business opportunity for all of us. So use our Insights
tools, like Lighthouse, to understand where your site
is falling short, where you have an opportunity to get better. And upgrade your site using the
latest web platform features. MALTE UBL: Used AMP
to easily create rich content and
commerce experience, and get consistently
high-quality results. BEN GALBRAITH: And use our
other libraries and frameworks like Workbox,
Polymer, and Angular for more general-use cases. MALTE UBL: And now,
go make the future. BEN GALBRAITH: But
speaking of the future, please join us this
November at the Chrome Dev Summit in San
Francisco, where we’re going to gather as
a community to talk more about the path
forward for the web. You can sign up at this
URL for more information. And we hope to see you there. Finally, thank you for
attending the talk today. We hope you enjoyed it. Thank you. MALTE UBL: Thanks. [UPBEAT MUSIC]

Only registered users can comment.

  1. no vim bindings in console? denied!

    😉 really nice presentation, looking forward to getting into these great new tools

  2. I pretty much only hear of 1800Flowers in tech examples. I don't know a single person that has used the service.

  3. It would be great if we had more control over the PWA desktop portion, I'd love to just have an Install button instead of the weird second visit thing

  4. The new generations after 5-10 years (OR EVEN sooner) won't EVEN know WHAT THA HELL is that "install" !! 🙂

  5. Full serviceWorker support changes the game. The PWA revolution is here!

    Now we just need PWA-as-native support on macOS and I'll be writing PWAs for web, desktop and mobile with a single codebase.

Leave a Reply

Your email address will not be published. Required fields are marked *