The Mobile Web: State of the Union – Google I/O 2016

The Mobile Web: State of the Union – Google I/O 2016

Hello, everybody. I’m Rahul. I work on the Chrome team,
and I’m very glad to be here. Welcome to the Mobile
Web State of the Union. This session is all about
the mobile web– what’s been happening,
what’s coming up, demos, launches, case studies,
stats, and a lot more. There’s a lot happening here. But before we get
into all that, let me take a moment to
reflect on why I’m here, why I care about the
mobile web, and why I think you all should as well. The web is amazing. And it’s so familiar to
us, that sometimes we take it for granted. But just think about it. It’s easy to
discover web content through a search engine,
OR just by sharing a link with a friend. And because everything
is a link click away, it’s very low friction
to interact with the web. Just click A link. And the web works everywhere.>From the earliest PCs
and feature phones, to the latest and greatest
smartphones and tablets, there’s one thing that all of
these devices have in common. They have a web browser. The web has the broadest
reach by far of any platform out there. But perhaps the best thing about
the web is how it operates. It’s completely
open– new features, new functionality are added,
debated, and discussed right there in the open. And the web is decentralized. No one owns it, or, rather,
we all own it collectively, and it’s our responsibility
to be good stewards of the web platform. And we work
collaboratively across all the different browser
vendors to make sure we can uphold that responsibility. The web is one of the most
amazing things ever invented. And Google loves the web. The web is great for users. The web is great for developers. And it’s our mission
on the Chrome team to move the web
platform forward, and to make you all web
developers successful. That’s what gets us motivated. That’s what gets me out
of bed every morning. That’s why I’m up on stage. Now the web is more important
to users than ever before. Four years ago Chrome had no
presence on mobile at all. And just last month,
Chrome crossed and grew to over one billion
monthly active users on mobile alone. It’s really amazing to
see this kind of growth. Now, while the growth of the
mobile web has been phenomenal, we do have to remember that the
web came of age when computing looked a little bit more
like this, and some of you may be too young to remember
the old school Google home page. But most computing was done
on these big beefy desktop machines connected to an
ethernet cable or, if you want to get really old
school, to a modem. And then mobile came along and
changed the rules of the game. These devices were small. They had less power. They had less memory. They had flaky networks. They had touch screens. Everything was different. And to figure out what would
make a great mobile web experience, the web platform
and mobile web browsers had to do a complete
ground-up rethink. And I’m not talking about
a few tweaks here or there. I’m talking about going
back to first principles and figuring out what would
make the mobile web awesome. And we believe the keys to a
great mobile web experience rests on four pillars. First, accelerate
the experience. Make everything fast. Make the page load fast. Make it scroll fast. That’s what gets people in. And once people are in,
provide an engaging experience, an immersive experience,
a polished app experience. That’s what gets people to stay. And once you have a fast,
engaging experience, you’re going to get
a lot of visitors. The web does have
broad reach after all. And so the third pillar is
to take all of those visitors and convert them
into loyal users. This could be by having
users sign up so you can personalize the experience. It could be by
completing a transaction, or it could be some other flow. And then the final pillar
for mobile web success is that once you have
all of those users, you want to retain them. You want to reengage with
them and bring them back into the experience
at the right time. These are all hard problems
to solve, and solving them required many changes
to the web platform and to mobile browsers. But this transformation
is now largely complete. It is possible to build a mobile
web experience that is fast, engaging, good at converting
visitors into users, and good at retaining
and re-engaging those users at the right times. We call such experiences
Progressive Web Apps. Remember back when
Ajax completely changed what was possible
in the desktop web? Progressive Web Apps are
that same fundamental shift for the mobile web. And as you’ll see,
many people are already deploying Progressive Web Apps
and seeing success with them. And I hope that when you all
leave Google I/O, all of you will go out and do the same. In other words, the mobile
web is open for business. So let’s dig into
what that means. Speed is the killer feature. If you have your
finger on a screen, and you’re trying to scroll,
and the page doesn’t respond to your finger right away,
it’s a physically unpleasant sensation. We all know this intuitively. Responsive scrolling is
not a nice to have feature. It’s an absolute necessity. And there’s data
that backs this up. For example, Facebook did an
experiment where they reduced frame rates from 60 frames
a second, which is smooth scrolling, to 30 frames
a second, which is slow scrolling, and what they found
was user engagement collapses. Speed matters. We do a lot of work in
Chrome to make it easy for you to build smooth and
fast experiences for your users. But sometimes we need your help. We need to work
together to provide the best possible experience. For example, we recently
launched passive event listeners. This is an API that lets
you, the web developer, provide hints to the
browser about why you’re listening for touch events. And using this API, the
browser can do a better job of responding to scroll. And this can make
a huge difference. I’m going to show you
a video in a second. But just to tee it up,
you’ll see two phones side by side, both running The phone on the
left– your left– does not have this
API implemented. And the phone on the right
does have this API implemented. And if you can roll the
video, as you will see, as we start loading up
both pages and scrolling, the form on the left
has noticeable lag between when I move my finger
and when the page responds, whereas the phone on the right
responds right away as I scroll my finger up the page. There’s a huge difference
in responsiveness. And I’m glad to say that CNN is
rolling out this change to all of their users as we speak. So that’s great news. If you can go back
to slides– it’s not only about scroll
responsiveness. Studies have shown
that 40% of users will abandon a web page if it
takes longer than 3 seconds to load. And we want to make
it easy for developers to build websites that
are extremely fast. And that led us to
create an open source project called Accelerated
Mobile Pages, or AMP. And if you were here in
the session before this, you’ve heard all about AMP. But the summary
high-level view is this. AMP lets developers take
performance to the next level and make content browsing
experiences lightning fast. AMP pages load four times faster
and use 10 times less data. And we launched AMP
a few months ago. And the response
has been tremendous. There are currently 125
million documents out there from over
640,000 unique domains. And AMP is all about the web. AMP content is nothing
but HTML and JavaScript. And it’s really
amazing that AMP shows what is possible with
performance on the web platform. So we’ve talked about how
to make experiences fast. The second pillar of
mobile web success is to deepen the engagement. And this is all about creating
polished app experiences, experiences that are resilient
to network conditions, whether you’re offline or
just have a flaky network. Progressive Web Apps enable
these engaging experiences through a key piece of
underlying technology called service workers. And service workers provide
full client-side control over fetching and caching. And using progressive service
workers and Progressive Web Apps, you can build really
polished app experiences. Take the case of Jalan Tikus, a
tech review site in Indonesia. I’ve got a link to
Jalan Tikus and an icon on my home page Jalan
Tikus’s Progressive Web App. And when I tap that
icon, what I see is Jalan TIkus shows me
a splash screen, which is really smooth and polished. And then it loads up
in full-screen mode. And as I navigate
around, you can see that the transitions and
animations are rock solid. It’s a really
polished experience. And if you notice,
there’s no Chrome UI here. This is all Jalan Tikus’s
Progressive Web App. Progressive Web Apps
and service workers also enable you to make your
app work really well offline. This is an example of Flipkart,
a leading e-commerce retailer in India. And they’ve built an
awesome Progressive Web App, and it works really
well offline. So if I go to,
and I go offline– I go offline there– you’ll see
that Flipkart cleverly changes the UI to grayscale
to indicate to the user that I’m offline. But the user can continue
to navigate around in the app and even
view cached content. It’s a very seamless experience. Now, Progressive Web Apps and
AMP work really well together. And “The Washington Post” has
put together a really cool integration as well. So to show you this in action,
let me invite up on stage David Merrill senior
product manager from “The Washington Post.” DAVID MERRELL: All
right, thanks, Rahul. We are really
excited at “The Post” to be able to show
you guys today some new investments we’ve been
making in the mobile web space. As pretty much everyone
here probably knows, we joined dozens of other
publishers and Google earlier this year with
the launch of AMP. And we’ve been thrilled
with the results so far. AMP has lived up to its name. Our AMP files– we see
those articles load in an average of
400 milliseconds, and that is a huge gain over
the traditional mobile web. One of the great benefits of
being with AMP right at launch is we can see the metrics on
our end about the load times, and we can also see exactly
how users are reacting to them. And not surprisingly,
users love it. They love the speed. Before AMP, 51% of
mobile users who visited “The Washington
Post” from Google search returned within seven days. Now, with AMP, that
number’s up to 63%. And we give a huge amount of
credit to the speed of AMP for that data there. So we know that
users love speed. We know that we love speed,
because it’s easier for us and because it makes
our users happy. But the question that
faces publishers today is, how can we build engaging
and fast experiences that will build relationships
with users beyond the search carousel? As we get people once or
twice a week from search, we’d love to convert
those people three or four times a week, every day,
using new experiences. So we took what we
learned with AMP, and we started working
on a Progressive Web App. And I am thrilled today
to be able to show you guys what that looks like. Could we get the phone
app on the screens? All right, are we good? All right, great. So I’m going to find us a
“Washington Post” AMP article now. And live demos of search can
always be a little bit dicey, because you don’t know what the
algorithm’s going to turn up, but here we go. We’ve got a “Washington
Post” AMP story right here. I’m going to tap into it. Everyone here can see
it loads really fast. Now, what you can’t see
happening on this AMP article right now is we’re using a
service worker to install a very small piece of
Progressive Web App code into the Chrome
browser, so that we can very quickly and seamlessly
upgrade this user to a more rich, engaging experience. So for the purposes
of the demo, we put a link straight to
the Progressive Web App at the top of the menu. In the future, we’re
looking at testing having all links within AMP open
to this progressive experience, because users will have
that app already installed. So we’ll go into the app now. Here it is. You can see that
loaded really fast. We’ve got load times
here under a second when coming from the AMP page. So once I’m in the
app, we focused on making a really smooth
scrolling experience. So it feels very native,
even though this is obviously the web. You can even see
at the top we’re on domain. And as we scroll
through articles here, we use the ideas and
the principles of AMP to make these pages very light. And then we added on
the caching ability of service workers and
the Progressive Web App to pre-cache pieces
of the article before you even get there. And thanks to that,
we have brought load times within this PWA
down to 80 milliseconds for each article. We were a little surprised
we got it down that low. We’re certainly happy about it. We think the users
are going to love it. So that pre-caching that
the PWA gives us also lets us solve another really
important user experience issue that everyone with a
smartphone faces, and that is, what happens when
you go offline? Now, in D.C., lots of people
take the Metro to work. The Metro goes above ground. It goes underground. You’re in and out
of cell service. So to show you what we do there,
let’s go to airplane mode. So now, just like
a regular website, the article I’m on still
works, but because I’ve used the Progressive Web to
cache the content around it, I can keep reading new articles,
even though I’m offline. So that is our new
Progressive Web experience that we’re testing now. I think it really
brings together the power of the
web in a great way. We’ve got that lightning fast
first load from AMP, followed up by using the service worker
and the Progressive Web App to do a seamless, really fast
upgrade to user experience that we hope will get people
coming back again and again to “The Washington Post.” So I really think
this is going to help bring our journalism to
people all over the world and make it more accessible. And we’re really
happy about that. So I would invite all
of you to check it out. You can get it today
on your phones. If you go to any AMP article,
either through Google Search or Google News, like I just
did, and go to the menu, you can go to the PWA,
or you can also go to
on your phones. Thanks. RAHUL ROY-CHOWDHURY:
Awesome, thank you, David. That was awesome. So I hope by now
you’re convinced that it’s possible to build an
experience on the mobile web that is fast and engaging. And this should get you
lots and lots of visitors, because the web does
have broad reach. So let’s turn our attention to
the third pillar for mobile web success, which is how we
take all those visitors and convert them
into loyal users. Now, there’s something you
may have noticed about mobile. Typing on mobile is hard. This happens to me
more times a day than I feel comfortable
admitting in public. But because typing on mobile is
hard, asking users to sign in is hard. And in fact, we’ve seen
that if a user doesn’t sign in correctly
the first time, maybe because they mistyped their
credentials, 92% of them will give up rather than have to
retype their credentials again. And we do our bit in Chrome
to try and help these users. We have a Password
Manager feature. And through the Password
Manager feature, we try and help users by
autofilling sign-in fields. And in fact, using our
Password Manager feature, we help users sign in
over 8 billion times every single month. So that’s great. We’re helping our users. But we asked ourselves, what
if we could do it better? And we realized that,
yes, we can do it better. We can do it better if
we turn the reins over to you, the developer,
and give you control over the experience. So in that spirit, I’m
very pleased to announce the launch of the
Credential Management API, which does just that. This API lets you interact
with saved credentials inside the browser. And it even works with
federated sign-ins. Now, one company that’s
using this API is KAYAK. And KAYAK is a travel company. And it’s important to them
that their users be signed in, so they can keep track
of travel information across devices and platforms. And using this API,
KAYAK users who have saved their
credentials in Chrome will never need to
re-type them again. And so a user who goes to
KAYAK and taps a sign-in button will see a prompt to select
a credential they want to sign in with, and that’s it. They’re signed in. One tap, and you’re in. It’s a really smooth experience. What’s even cooler is that KAYAK
can remember that the user used those credentials to sign
in, so the next time the user goes back to KAYAK, KAYAK
can just sign that user in automatically. And so I’m launching
up the KAYAK website, and you’ll see a little
blue bar at the bottom that is just saying, hey,
we’re signing you in. So the user knows
what’s going on. But then the user is signed in. The user had to do
nothing– zero taps. So it’s a really
smooth experience. So now, in addition to
helping users sign in, we also want to help users
complete transactions on the web, to pay
for things on the web. And to set this
problem up, there’s just one number you need
to know, which is 66%. There’s a good
66% and a bad 66%. So the good news is that
66% of mobile commerce happens on the mobile web. So the mobile web is critically
important for commerce. On the other hand,
conversions on the mobile web happen at a rate that’s 66%
lower than the desktop web. So the mobile web is critically
important for commerce, but it’s also very inefficient. And we all know why that is. Completing a transaction
on the mobile web is hard. There are many
forms to fill out. There are many screens to go
through and many opportunities for the user to drop off. And again, in Chrome we try
to do our bit to help users. For example, we have
our Autofill feature, and we try and
fill in form fields to help the user
through the flow. And in fact, our studies
have shown that users on Android who use Autofill
complete transactions and form submissions on the web 25%
higher rates than other users. So that’s great. We’re helping our users. But again, in the spirit of
the Credential Management API, we asked ourselves, what
if we could do it better? And again, we realized,
yes, we can do it better. We can do it better if
we turn the reins over to you, the developer, and
we give you complete control over the experience. And so I’m really excited to
announce the launch of the Web Payments API, the new API
that brings one-tap check out to the web for the
first time ever. This is awesome. So one company that is
that making use of this API to streamline their
checkout flow is Shopify. So this let’s take a look at
what their flow looks like. So here a user is using
Shopify, and they’ve got some items in
their shopping cart, and they’re ready to checkout. And when the user
hits checkout, Shopify issues a payment request
API call to the browser to pre-fill all of
the information needed to complete the transaction. So rather than the
user having to go through a bunch of form
fields and a bunch of screens, the user sees this, which
is everything they need to complete this transaction. And when the user hits pay,
the transaction is done. That’s it. One tap, and the
transaction is done. And this example I showed you
is working with a credit card, but this API also
works with Android Pay. So we’re bringing Android
Pay right into the browser through this API as well. And the flow is
exactly the same. And in the future, this
will work on all other types of payment applications also. And with all of these APIs,
we’re working right out in the open, and
we’re collaborating closely across all our different
browser vendors as well. So we talked about
making experiences fast, making them engaging,
converting visitors into users. So let’s look at the fourth
pillar for mobile web success, which is how do
we then retain those users and reengage with them
at the right times? Now, one big thing that
changed in the shift to mobile was the importance of
push-based interactions. We have these devices
with us all the time. And we are allowing
push notifications to stay up to date on the
things that we care about. And this is why we’re excited
about push notifications for the web. These work exactly
as you would expect. Once a user opts in to receiving
notifications from your site, they will get those
notifications, and they’ll get
them whether or not the site is open or whether
or not the browser is open. And they show up
exactly where users expect to see them– on
the notifications tray or on the lock screen. Now one company that is making
use of push notifications is a company called Jumia,
a large e-commerce provider in Africa. And Jumia was
trying to figure out how to solve a problem they had
with abandoned shopping carts. And so they turn to
Progressive Web Apps, and they implemented
push notifications for the web as a way to
re-engage those users who had abandoned shopping carts. And this is early
days, but their results have been spectacular. In fact, Jumia reports that
they see a nine-fold increase in conversions of
abandoned shopping carts for users who come in
through push notifications. So well done, Jumia. This is the kind of success
that we love to see. And it’s not Jumia. Many companies are
implementing and rolling out push notifications
and seeing success. Last November at
Chrome Dev Summit, we announced that
we were sending out 350 million push
notifications every day across mobile and desktop. And today I’m pleased to report,
less than six months later, that number has grown to 10
billion push notifications every single day. And it continues
to grow– amazing. So there you have it– the four
pillars for mobile web success. Accelerate the experience. Make it engaging,
immersive, and polished. Convert visitors
into users, and then retain and reengage those
users at the right times. And to show you an example of
a great Progressive Web App, one that has made very effective
use of these four pillars, let me invite up on
stage Hannes Schwager, head of mobile at Air Berlin. HANNES SCHWAGER:
Thanks for having me. Hi, everyone. For those not familiar
with Air Berlin, we are Germany’s
second-largest airline. We fly to 147
destinations worldwide, including San
Francisco, since May. And we served over 30
million passengers in 2015. As an airline, we are
constantly working on new ways to improve the travel
journey, even offline. And it’s very exciting to
be here today to tell you, or to show you, how we have
been building a Progressive Web App to improve the customer
check-in experience. Like any business. We know that not
all of our customers will download the
app, especially those who are traveling
just once or twice a year. And so we’ve been
looking quite a long time to find a solution
how we can improve or how we can make an
easy check in experience via the mobile web, because
quite a lot of people are checking in
via the mobile web. So that’s why I’m here today,
to show you what we have built within the last month. And therefore, I booked
a flight going to Rome. I love going to Rome. And I booked it a
couple of weeks ago, and Air Berlin
was asking me if I want to accept
push notifications via the mobile web. And I say, well, yes, why not? Just give me a reminder
when check-in is open. So let’s see if it worked. So you can see, oh,
your check-in is ready. It worked out. There it is. Tapping on the
push notification, takes me directly to a
page where I have access to all my flight
details, where I can just check in by one click. And that’s what
we’re going to do. It really opens up
the page very quickly, and just by tapping
Get the Boarding Pass, check-in was successful. So now I have my boarding
pass right away there, thanks to the
Progressive Web App. And I can see, OK, there are
some journey details, OK, check-in done, boarding
30 minutes, just check to be ready for
security, and snacks and drinks will be served. All right, good to know. And Air Berlin is asking
me, add to home screen? I think it was just a great
experience what I had, and I’m traveling
tomorrow to Rome. So it’s fine to add
it to home screen, because then I have much faster
access to all my Air Berlin information, right? But it’s not only having a
cool and convenient experience with the push notification
for the check-in. It’s more. It’s being there
for the customer throughout the whole journey. So as all of you know, often
on airports the internet is very bad, or you don’t
have any connectivity. You are in a rush. You’re in a hurry and not
sure if you can have access to the internet. So therefore, I go for airplane
mode to say, OK, I’m offline. And now I have the possibility
to get back via the home screen icon in full-screen mode. So you have seen it
loaded very, very quickly, and I have all my details
there– all critical content. I can explore destination. Even in offline mode, I can
read what I can do in Rome, get some information about Rome. And most important
thing is I have access to my boarding pass. And I think we don’t need
to do screenshots anymore of our boarding pass, being sure
that I have it with me right. I do it as well. And I think with that, we really
can cancel that and be sure having it right with you. Thanks to the Progressive
Webb App am service worker, we’ve been able to improve the
journey for all our customers, not only those who
installed our app. And the check-in is just
a first step, I would say. We’re already thinking
of rolling out the technology to other critical
parts of the travel journey. And I’m very happy
to say that we’re going to roll out this
version within the next weeks to our users, and a big
thanks to the team who did a very good job within
the last couple of weeks. Thank you. RAHUL ROY-CHOWDHURY:
Thank you, Hannes. That was great. More and more companies are
deploying Progressive Web Apps and seeing success. Take Suumo. This is Japan’s largest
real estate site, and they recently deployed
a Progressive Web App and saw huge improvements
in speed and re-engagement. In fact, Suumo reports that they
were able to reduce their page load times by 75%. And then when they added
push notifications as a way to re-engage users
by sending them information about new
real estate listings that they might care about,
they saw a 31% open rate on those notifications. It’s truly astounding. This is great success,
so well done, Suumo. This is the kind of
success we love to see. Or take AliExpress, a leading
global online marketplace, and they recently deployed a
Progressive Web App as well. And they report increased
engagement across all browsers, across all platforms. In fact AliExpress says that
the time spent in their app went up by 74%, and they saw
an 82% increase in conversions on iOS. So these investments make
sense across all browsers, across all platforms,
not just Chrome. And the momentum
continues to grow. More and more companies are
deploying Progressive Web Apps and seeing success. And I hope that all of you
when, you leave Google I/O, will go out and do the same. Now, we’re not done yet. The web will continue to evolve
as the world of computing evolves. And here on the
Chrome team, we’re working on a long list
of exciting new projects. So let me take
the next six hours and walk through each of
these in a lot of detail. I see people heading
for the exits. No, no, I’m not
going to do that. I’m not going to do that. But let me give
you two examples, just to give you a flavor
for the kinds of things we are working on. We’re working on
the Physical Web. The Physical Web
is a way to extend the web to objects around us. Wouldn’t it be cool
if you got on a bus, and you could get
the bus schedule available on your
phone instantly, right when you needed it? This is possible today in
public buses across London, using the Physical Web. And more generally,
the Physical Web is a way for objects to
broadcast URLs to us and for us to use those URLs to interact
with those objects right on demand when we need it. We’re also working
on Web Assembly. Web Assembly is an
ambitious effort across many different
browser vendors to define a new
low-level language, one that runs at native speeds,
but securely and on the web. It’s still early
days, but we are really excited
about the potential here for unlocking new
high-performance cases, use cases, things from gaming to
media to scientific computing, and who knows what else. So as we work on improving
the mobile web today, and as we look to
the future, there’s one key thing to remember,
which is that we’re all in this together. My session is almost over, but
this conversation is not over. This conversation is
just getting started. We’re Going to have a series of
events throughout the remainder of this year all across
the world as part of the Progressive
Web Apps Roadshow. And there’s a dev summit
in Amsterdam next month, and there’s a registration
link you can use to sign up. And if you can’t make
one of these events, we are active and engaged on
Twitter, on StackOverflow, on GitHub, and we have
a developer portal with a lot more information. We’d love to hear from you. We’d love to work with you. We’d love to help
you be successful. And of course, we
work collaboratively across all the different
browser vendors. Ultimately, it’s
up to all of us– browser vendors and
web developers– to write the future of the web. So go out there and build a
great Progressive Web App. The future of the mobile web
looks very, very bright indeed. Thank you. [APPLAUSE] [MUSIC PLAYING]


  1. So when you visit the NYT website, they "use a service worker to install a very small piece of progressive webapp code so we can upgrade the user…" they should call this Regressive Web Apps, because websites trying to install junk into your browser is very 15 years ago and was eventually considered malicious.

Leave a Reply

Your email address will not be published.