The Web for the Entire World (Chrome Dev Summit 2017)

The Web for the Entire World (Chrome Dev Summit 2017)

My name is Tal Oppenheimer. I’m a product manager
on the Chrome team. And I’m excited
to talk about how you can build
experiences that work for everyone around the world. So one of the strengths
that we know about the web is that it really is everywhere. It’s on every form
factor, whether it’s a laptop, a desktop, a
smartphone, or even some TVs. It’s on every operating
system, though it can be a little bit different
on some operating systems. And what this really
means is that it’s also available across
the entire world. And what this means is that
as we’re looking at the reach that the web has, the
user base for the web really is anyone who
has internet access. So if we look at the total
number of internet users around the world, and we
look at the top 10 countries over the last few years, we
see that things have shifted a fair bit in just a few years. So China still remains
one of the countries with the most number
of internet users, and the US, which used
to be second for number of internet users, has actually
been surpassed by India. And you’ll also see that the
growth rates are a little bit different here, with
India very much up and to the right, where
some of the other countries aren’t growing as
quickly, in terms of the number of
total internet users. But you also see some other
countries coming up here. You see Brazil. You see Russia, Nigeria. And you also see
Germany and the UK. But what’s really
interesting isn’t just to look at the snapshot of where
our internet users are right now, but take a
step back and look at where our potential
new internet users are going to be coming from. And so if you look,
instead, at the number of potential new internet
users per country, and again, if we look
at just the top 10, you see a little bit of
a different story here. You’ll notice that the US and
various countries in Europe aren’t here anymore. And instead, you
actually see that some of those countries that we saw
that already are on the top 10 for the total number of internet
users are also on the top 10 for total number of
potential new internet users. So you see that countries
like India and China, Nigeria, Mexico, and Brazil, not
only already have a huge number of internet users, but are
expected to have even more. And so we expect
this to continue to shift over the
next several years so that really the
internet users will be accessing experiences
around the entire world. And if we look instead
at how we are actually developing experiences
today, we’re all used to testing
on different devices to make sure that the experience
looks the way we want, not just on our phone,
but on other phones. And we’re used to testing
on different OSes. But we don’t always
take that step back and look at how we
can actually build our experience
from the ground up with a global audience in mind. And the reality is that everyone
uses the internet differently. I’m sure everyone in this room
uses the internet differently, but as you look towards
different countries and different people who
come from various backgrounds and maybe are interacting with
the internet for the first time on a mobile device, the
behaviors and patterns that they’re going to be
using to access the internet are just going to be a
little bit different. But what we’ve also
noticed, by thinking about this for the last
few years in particular, is that things are also
changing really, really quickly and that it’s not just
a matter of figuring out what’s going on right now,
but where are things headed and really responding to
things as they change. So I just want to walk
through a few of the things to keep in mind
as you’re thinking about building experiences
that work for everyone, and specifically focusing
on some of the changes that we’ve seen. So the first thing to
note here is devices vary. We’re all used to this. We’ve probably, in our
lifetime with smartphone usage, seen how quickly devices
vary just with what we have in our own pocket. This is also the case if
you take this global stance. But it’s more than just
the form factor itself of how big the screen is
or the dimensions there, and it’s actually the
capabilities of the device. For example, we actually
see that in India, about 1/3 of users in India on
smartphones are regularly running out of storage. And this means that
if you’re actually asking them to try
your experience out and expecting them to
download something, you’re asking them to make
the trade-off of if they want to remove that
photo or the video that they have in order to
just try your experience. So this can have a
really big impact on the number of
experiences that people are willing to give a try. But beyond just the amount of
storage space on the device, we also see that the device
specs themselves are a little bit different, and
this can have an impact on how people interact with an
experience once they have it. If you look at some
of the devices that were sold in the first half
of 2017, we see that about 24% of them were under $100. And these devices often just
have very different specs to reach this price point. So they’ll have less
RAM, for example– so less than 1 gigabyte of
RAM or 512 megabytes of RAM– and this can have a
big impact on how users are engaging with the device. App switching can
be more challenging. They can have
out-of-memory crashes. And this can just change the
experience that they have. But beyond just the
physical device, we also see that
access really varies, in terms of being able to access
the internet in the first place and engage with your experience. We talked a lot in the
past about data costs and how this can be really
prohibitive for certain people around the world from
accessing the internet. But what’s really
interesting here is how quickly
things are changing. So if we look at India, for
example, which, in the past we’ve talked about as
one of the countries where data costs have
been quite prohibitive, we’ve actually seen things shift
quite a bit over the last year. So Reliance Jio, which is
a mobile network operator, actually introduced unlimited
4G data for about six months. And this drastically cut
down the price of data cost in India. And it wasn’t only for Reliance
Jio and for 4G networks, but it actually drove down the
prices across all of India. And so what we’re seeing is
as a result of this one thing over the course of 12 months,
the cost in India for data has really gone down. And if you look at
the cost specifically for one gigabyte per month,
you see a nice downward trend there. But what I really want to call
out is that around Q1 2017, the price for one
gigabyte per month dropped below 2% GDP per capita. And 2% GDP per
capita is generally accepted by the Alliance
for Affordable Internet as the threshold
for affordability. So it’s when the cost
drops below this threshold that we tend to see users
feeling more comfortable accessing the internet
and not having to make trade-offs
about the cost of data when they’re thinking about
what to actually access. But I do want to make sure
to note that this is India. So India, specifically, has
seen a huge shift in data costs over the last year,
but there are still many countries around the
world where data costs aren’t even at that 2% threshold. They’re actually well
above that 5% GNI. And so we’re seeing
that data cost is still a challenge around the world. But it does have the option
of switching very quickly. So it’s important
to make note of this and to not only plan to
build experiences that are conscientious of
data usage, but also adapting to the users
who are most sensitive and going from there. Now, we all know
that data costs can be a challenge in some
areas, but we also know that connectivity
can be a challenge. I’m sure all of us have
experienced the slow connection and complained when
we have to wait too long for things to load. But this is even
more so the case when you take a
global look at things. So if we look at a report
from earlier this year that looked at the 2016
connectivity landscape, you’ll see that 2G data
connections are still really common around the world. And even though we’re
seeing that this is shifting in some
countries, it’s not changing
particularly rapidly. So even in India with Reliance
Jio introducing 4G networks, if you look at
estimates from 2017, it still suggests that in 2020,
53% of connections in India will still be 2G. And this is just strictly 2G. This isn’t even
accounting for the fact that 3G connections can still
feel like their 2G speeds just due to the load. And so this is just
strictly 2G connections. So the reality is is that
connectivity challenges aren’t going anywhere, and the need
for really fast experiences across all of these
connection types continues to be really critical
for everyone around the world. And as a result of these
different conditions that people are using
to access the internet, there’s also some
variations in behavior for how they’re actually
accessing experiences and what they’re
doing with them. I just want to call out a few
of these that we’ve seen so far. So one is that downloads
are key, especially when it comes to content. So we’ve seen that
connections are slow, data costs can be high,
and people can actually spend days offline. But downloading content can
actually address all of these, because once you
download content, playback– if it’s
a media experience– can be really smooth
and fast even if you’re on that slow connection. You can rewatch, or reread
content multiple times without having to pay
for that data again. And for those days
that you spend online because you ran
out of a data plan or just don’t have
any connectivity, or in our scenarios, are on a
plane or something of the sort, you’ll see that you can
still access content. And so downloads really
is used across the board to address some of
these challenges. But beyond just this approach
to accessing content, we also see just
different behaviors for specific verticals that
people might be working on. So another one I want to just
call out here is payments. When you take a global
stance and look at payments, you realize that payments
are way more than just credit cards. A lot of us are used
to online payments directly, meaning pulling
out your credit card, typing it in, or using
autofill or any other solution. But this isn’t the
case around the world. If we look again at
India, we actually see that there are 28
times as many debit cards as credit cards in India. So if you’re building
a solution that assumes that someone
has a credit card to be able to go
through a checkout flow or purchase the
item, you’re really only targeting an India market
of about 28 million credit cards, in comparison to
818 million debit cards. And so it’s really
important to think about where your users are
and how they’re actually experiencing the web
and the experiences that you’re building. And what’s more is if you
look at this per country and are thinking about
who you’re targeting, you also see that the government
can have a big effect here. So in India, for example,
still focusing on payments, the government actually
introduced the Universal Payments Interface, or UPI,
which specifically focuses on enabling bank-to-bank
transfers because of the lack of prevalence of credit cards. And after introducing
this, we’ve actually seen this
grow quite a bit. Most notably, you
see a jump there between November and
December in 2016. This is because this is
when demonetization happened in India, and some of the
bills that were commonly used were actually no
longer accepted. And so this actually helped
drive the adoption of UPI, or alternative payment methods. And what we’re seeing as
a result is more and more experiences coming up
that are leveraging these alternative ways to pay
that aren’t reliant solely on credit cards. So you have Paytm, or
most recently, Google also launched Tez that was trying to
think through how we can build an end-to-end payments
experience that doesn’t rely on users
just having credit cards. And payments aren’t
the only thing. This is just one
example of many. We also see as users
are coming online from around the world
that a lot of people speak more than one
language and a lot of people don’t speak English. And so taking a step
back and understanding what language people actually
use is also important. In fact, if you look at some
of these most rapidly growing countries, we actually
see that about 20% of our users from
around the world are regularly searching
in two or more languages. And so we’re seeing
that this is already impacting their
behavior for how they’re interacting with the
web and has implications for how we build for them. And so across the
board, there’s a lot of different
considerations that you needed to keep in
mind when you’re thinking about how you can
build experiences for everyone. But one of the things I
just want to jump into first is, the web already helps
with a lot of these. It can be really daunting
to think of, oh, no, there’s so many things I
need to keep in mind. But the web is
fundamentally built to address a lot of
these key issues. We know that with the
web, it can be easier just to discover something. If you get a link, if you
search for it and you end up on the page, you’ve
already found it. You don’t need to
hunt through it. And what more is when
you’re actually there, you don’t need to install
it to experience it. By virtue of getting
there, you’re already experiencing the product
and what it has to offer. But we also know
that it’s not just about getting users to interact
with your product for the very first time. You’re also, hopefully,
continuing to work on it and make it better. And you want to make
sure that your users are getting those updates. And with the web, when they’re
accessing your experience, they’re accessing the
most up-to-date version of your experience. And you don’t have any
challenges of actually updating users to the latest
version that you’ve built. And as a result of
all of these, we’ve also seen that the web can
have a tremendous reach. And so these fundamental
building blocks has actually allowed the
web to grow, especially in line with how large
the internet access has grown over the past few years. If you look at the top 1,000
mobile web properties compared to the top 1,000
native apps, you’ll see that even with a
large initial user base, the mobile web
audience is growing even faster than native. And this is in
part because we’ve been working on moving the web
forward across all browsers. And this has really
been an initiative that we’ve been
doing with all of you and a lot of folks around
here to make sure that the web platform can offer the
capabilities that developers need and that users need. And so we actually today
have Service Worker– which is one of the key
technologies that you all heard a lot about yesterday– supported across some of
the most popular browsers around the world,
so from Firefox, to Opera, to Chrome, to Samsung
Internet and UC Browser, they all have some Service
Worker capabilities to make sure that we can provide
the best possible experience to our users. But there’s more that you can
do than just build a web site. And so I just want to
walk through some concepts to keep in mind based on
some of those challenges that we outlined before
for how you can build the best possible experience. So just to jump
right in, we all know that storage is challenging. We’ve probably all experienced
some storage constraints on our phone. We took too long of a video
and now have no more room, we took too many photos,
whatever it might be. This is definitely the case
around the world as well. And one of the really key
opportunities we have here is that PWAs just
take less storage. If we look at OLA, for example,
which is a popular ride sharing app in India, you’ll see that
they already have an iOS app. And the iOS app was
about 100 megabytes. They also had an Android app. Their Android app was
around 60 megabytes. But they were really
focused on how they could increase their reach,
specifically targeting tier two and tier three
cities in India where they knew that storage
constraints were a real problem. And so they looked
into their options there and actually decided
to build a progressive web app, specifically to
target this set of users and to expand their reach
to areas where people have more storage constraints. And what they built was a
PWA that was 200 kilobytes. I just want to emphasize
here that’s kilobytes. I don’t know 200
can look bigger. But that means that
they were able to build an experience that was
comparable and able to address the key flows that they
needed for their users at 1/300 of the size of
their native Android app. And that’s compared to
their Android app, not even their iOS app. And so this was
huge for actually increasing the reach and the
opportunities that they had. And fundamentally, what
we’re seeing more and more is that PWAs are a key
strategy for extending the reach of your
experience and making sure that everyone can
access it from the get go and don’t have to
jump through any hoops. And so what you’re really
doing is making sure that there are no unnecessary
barriers to trying out your experience. And one of the barriers we
talked about before was also around data costs, so I do want
to focus on that a little bit. And while we’ve been seeing
things shift in India, India is just one
of many countries, and we want to make sure
that we’re building really for everyone if we’re
trying to extend our reach as much as possible. So in Chrome, on
Android, we’ve had for a while a feature
called Data Saver, which is a server-side
proxy for HTTP content to help users save more data. But what we also want is
that you, as developers, know what you can do to
specifically identify users who are most
data sensitive and adapt your experience. And so what we have here
is a Save Data header. And in Chrome, this maps
directly to whether a user has Data Saver on
or off and allows you to see who is the
most data sensitive. So this is pretty simple. It’s either on or off,
and you can figure out whether a user is
data sensitive or not. And this is standardized
across browsers as well. And then you, depending
on your experience, can decide what
optimizations to make. So it might be that
you replace images, or you choose which images
are the most critical for your flow. It might be that
you choose to change the bandwidth of video
playback, or whatever it is. And you can really decide
what’s right for your user base based on the flows that you
know that they need to complete. But what’s also
really important here isn’t just saving users’
data and identifying who needs that data
saved, but you also want to make sure that you show
users when you’ve saved data. Because if you’ve saved someone
data and they don’t know you’ve saved them data,
they don’t necessarily feel like they can trust you
and that they can continue to use your experience. Because they’re not
sure that you won’t just use way more of the
data than they expect. And we’ve been taking the
same principle with Chrome as well, with showing for Data
Saver users with just one tap so that they can see
their data savings and learn to trust that the
web is looking out for them and being data conscientious
as they’re browsing. But beyond just
data use, we also know that memory is a
constraint, especially as we see more and more devices
being sold at a $100 price points or lower. And what we want
to make sure here is that it’s not
just about accessing that experience
for the first time, but that users are really
having a good rich experience as they’re interacting with it. And the first step
to solving a problem is always to know
what the problem is. So the first piece
here is really to know your memory usage. And Paul Irish will
be talking a lot more about this later today, so
definitely check out his talk. But one of the key
things to identify here is understanding where
your memory is going and what opportunities you have. And memory usage isn’t
an equivalent constraint for everyone. So it’s also important
to identify which devices and which users need us to
make the most improvements. And so we have Device Memory
Header and a Device Memory JavaScript API
that can allow you to identify the devices
that are most constrained. And we’ve been keeping these
same principles with Chrome as well. We actually did a similar
effort around our V8. And specifically, by
focusing on devices with one gigabyte
of RAM or less, we’re able to decrease our
heap memory consumption by 15%. And so the main
thing here is to make sure you’re keeping a very
close eye on your memory usage and specifically targeting the
users that are most challenged by this constraint to make sure
that you’re delivering a really high quality experience
and that it’s not that someone will
access your experience and then have an
out-of-memory crash, because that’s not
good for anyone. But beyond just the
device considerations, we also know that connectivity
can be a challenge. And this goes across the board. This happens here. This happens in India. This happens in Indonesia. It happens really
around the world. Just the frequency of some of
the challenges that can vary. And so one of the important
things with connectivity that we talked
about yesterday is that you can build across the
board sort of fast, integrated, reliable, and
engaging experiences. But I want to focus
specifically on reliable here, because this is one of
the considerations that comes up the most when you’re
looking at a global scale. And so similar to what we
said before with memory, the first step here, again,
is to know your connection and know what the challenges
you actually face are. So we have the
NetworkInformation JavaScript API. And this is something
that you can use to figure out what situation
is your user currently in, so you can adapt accordingly. In the past, we’ve
talked about downlinkMax. And so downlinkMax
would give you the information about the
maximum throughput based on the user’s connection. So if they’re on
3G, or 2G, or 4G, what’s the maximum throughput
for that particular connection type? But we also know that
that’s not necessarily representative of what
they’re actually experiencing. So you can also look at downlink
or rtt, which will actually estimate these values
based on recent connections that we’ve seen in that area. So we use our network
quality estimator to give you more information
about the actual experience that the user is getting. And beyond this, sometimes you
might need the more detailed pieces of downlink and rtt. But sometimes you just need
the high level summary. And so we also
have effectiveType. And this can give
you the details of, based on the current
downlink and rtt, what is the effective connection
type that the user is actually experiencing? So they might be technically
connected to a 3G network, and so downlinkMax might give
you the maximum throughput that a 3G network could
provide, but the effectiveType would let you know
that actually this is functionally a 2G network. And you treat it
like a 2G network and make sure that
you’re creating the best experience from there. But of course, knowing
it isn’t enough. You also want to
make sure to adjust the experience accordingly. And we’ve had a lot of different
topics and presentations about how to make sure your
site is as fast as possible. But I do just want to highlight
that Service Worker, which is something we talk a lot
about for fully offline options, is also really, really
helpful for addressing intermittent connectivity
or slow connections, whether it’s doing requests
timeouts when you’re on slow connections, or
just caching content so that you can handle those
intermittent connection situations. It’s really important to think
about how Service Worker can be used to build in resilience. And building for
intermittent connections isn’t just about the text
and images on your web page. It’s also about more interactive
content that you might have or any media. And in fact,
supporting offline is really critical
for fast playback on some of these connections. We talked about
earlier how downloads are really common as a way
for people to access content around the world. And if you support
offline, this is in part because playing back video
content that has already been downloaded
is just much more reliable on these
flaky connections, or on slow connections. But people are also
sometimes totally offline, whether it’s on a plane, or just
running out of your data pack, or just having really
lousy connectivity and going into airplane mode
to maintain your data cost. And so we do have the
capabilities on the web to fully support offline
media experiences. And what’s really
exciting here is that one of the challenges we
have with supporting offlining of media is that we
need to make sure that we’re still, as developers,
in control of the experience. Because there are trade-offs
here that you need to make sure you’re following the media
provider’s expectations. And so with background
fetch, you actually remain in control
so you can provide these offline experiences to
users while still maintaining the control that you need. And this allows users to
not only have video content or audio content that
works completely offline, but also allows users
to have quick playback on any connection type. And we’re working on the same
concept in Chrome as well. So we all have the offline
dino game with the great game that I know you all play the
physical version over there. But one of our main principles
that we’re taking here is we want to make sure
users never hit a dead end. So if users do get to a page
where a Service worker hasn’t stepped in to help, and they are
hitting an offline dino page, we want to help them
bridge that gap as well. And so we offer an
option for users to choose to download the
page when they’re online so that when they reconnect,
we’ll automatically download that page for
them and let them know, so they can get back to it
and continue their browsing experience, and so that they
can access that even when they’re offline. And so this is just one
way that we’re really trying to make sure that users
are not hitting a dead end. And of course, as developers,
we’d love for you to address this as well with
Service Worker, because this is just our
one-size-fits-all solution. And beyond just
the options here, we also want to
make sure that when users are online and
engaging with content, it’s the best possible
experience for them. And so for the multi-lingual
users and users that speak many languages
around the world, we want to make sure
that we’re tuning our experience accordingly. So reiterating here, the
first step to a problem is knowing what the issue is. And you have ways
to actually know which language, or
languages, your user speaks. So we have the
Accept-Language header, which will allow you to see what
information the browser knows about your user’s
language preferences. And this doesn’t necessarily
have to be one language. So for example
right here, we see that the user prefers Danish. Otherwise, they’d be comfortable
with British English, and otherwise, they
can use English. And so this can
just give you a way to understand what your
user actually wants and adapt your experience. But sometimes you
don’t necessarily have information from an
Accept-Language header, and there’s other
ways that you can try to figure out what language
preferences your users might have. For example, with
Search Console, you can see where your
users are coming from. So if we look into the countries
here, you can tap into this. And then you can easily
see the list of countries where your users are
accessing your experience. So in this fake
example here, we see that users are coming from
China, Indonesia, and Malaysia. And you can use this
information to understand to what extent is
multi-lingual support critical for your experience
and to what extent is supporting your experience in
different languages important? And of course,
countries is great and can give you a sense
of various language diversity of your user base. It’s not the end-all solution. Some countries have
an incredible amount of language diversity, and
just knowing the country level details isn’t
sufficient to know which languages to prioritize. But it’s a great starting
point to understanding where to dig in more and
what you should really be prioritizing
for your user base, or your potential new user base. And if you do see
that your users are coming online and using
your experience from all around the world,
and you do want to adapt to support
different languages, we have a number of lower level
APIs that can help you do so. And so these can help you
handle different languages, figure out the right
ways to pluralize in different languages,
appropriately match different scripts, and
customize accordingly. So you have the tools in place
to also adapt your experience. So the main thing here is
by looking at the storage constraints and
leveraging progressive web apps to make sure that users
can get to your experience, you can build experiences
that anyone can access. And if you take into account
the data costs and specifically tune it to users who have
expressed particular concerns about data, you can
make sure that they feel comfortable freely using
your experience over and over again. And if you look at
memory, you make sure that the experience stays high
quality across the board, even when the user’s facing
memory pressure, and that it’s adaptable
to all connectivity types, whether it’s slow connectivity,
intermittent connectivity, or days that they
may spend offline. And finally, you
can also make sure that it feels personalized
and really built for them by making sure you support
the languages that they prefer and build experiences that work
across all these languages. And when you keep
these things in mind, you can build some really
amazing experiences. And I just want to highlight a
few here from around the world. So one here is BookMyShow, which
is India’s largest ticketing firm. They built a Progressive
Web App that’s really smooth and feels immersive
like their native app. But it’s 54 times smaller
than their Android app. And when they launched
this, they actually saw an 80% increase
in conversion with their Progressive Web App. And so they were not only able
to deliver an experience that had much more
reach, but they were able to convert
the flows that they needed the most even better. To give another
example, we also have Garbarino, which is an online
retailer in Argentina that sells everything
from home appliances, to consumer electronics,
and pretty much everything in between. And what they’ve done
here is they’ve actually used Service Worker
to cache things, to make sure that they
load really, really quickly across all connection
types, so not just looking at that offline support, but
how Service Worker can be used to speed things up as well. And then there’s also
companies like Kompas. So Kompas is the largest
news site in Indonesia. And what they did is
they were able to build a really immersive Progressive
Web App experience that not only works fully
offline, but also sends users notifications when there’s
most critical information. And by building these sort of
engagement aspects that takes into consideration people’s
connectivity variations, they actually saw 1.6x increase
in engagement as a result of this launch. And these are just
some examples. We’re seeing this
around the world. And what we really see here is
that everyone uses the internet differently. And we know that things are
changing really quickly, but with the web, we’re actually
uniquely equipped to help. Because you’re able to reach all
of these users that are coming online for the
first time and adapt your experience as
they’re coming online and interacting with it. And the reality is, if you
take all of these aspects into consideration, we really
do have a world wide web that works for everyone. Thank you. [MUSIC PLAYING]


Leave a Reply

Your email address will not be published.