New internet users are coming online around the world and are facing very different constraints to accessing the internet. In this talk, we'll cover what we've learned from building experiences for new internet users and walk through how you can build great experiences that work well for billions of users around the world. This is a presentation from Google I/O 2017, the video is available at https://www.youtube.com/watch?v=wD3rpdiLMyY Speakers: Tal Oppenheimer, Mariya Moeva, Robert Nyman https://twitter.com/taloppenheimer https://twitter.com/marrrr https://twitter.com/robertnyman

1. Building for your next billion
Mariya Moeva
@marrrr
Robert Nyman
@robertnyman
Tal Oppenheimer
@taloppenheimer

2. Tips for
building
Where our
users are
Things we’ve
learned

3. Internet growth is happening
everywhere

4. 2016201420152014Total internet users –
goo.gl/iJAfRJ

5. 20162014201520142015Total internet users –
goo.gl/iJAfRJ

6. 201620142015201420152016Total internet users –
goo.gl/iJAfRJ

7. 2014≈20142014New internet users –
goo.gl/iJAfRJ

8. 2014≈201420142015New internet users –
goo.gl/iJAfRJ

9. 2014≈2014201420152016New internet users –
goo.gl/iJAfRJ

10. >100 million
users came online in India last year.
goo.gl/iJAfRJ
Again.

11. ~1 billion
Unique mobile subscribers expected in India in 2020
goo.gl/rdNZ7w

12. Hundreds of millions
of Chrome on Android users are
from next billion user countries

13. Brazil, India, Indonesia
are in the top 10 countries with the highest Search volume

14. What we’ve learned

15. 33%
of smartphone users in India
run out of storage space every day
goo.gl/LWchN5

16. 50%
of users in India are on 2G
goo.gl/NVBhcf

17. ~$2
to download a single "Free" 40 MB app in India
goo.gl/4hIF80
goo.gl/i9JglM
goo.gl/WSYY74

18. Full bleed photos are great
Remove barriers

19. No install
Save Data
Work Offline
goo.gl/TNqxAv

20. ~1M app launches per day
20% decrease in bounce rate

21. Optimize for speed
goo.gl/cdSKOI

22. 90% less data
5x faster

23. 50%
increase in traffic due to faster
loading and data sensitivity

24. Full bleed photos are great
Build for intermittent connectivity

26. Full bleed photos are great
Speak many languages
goo.gl/cI1OAL

27. >20%
of users in these countries
search in two or more languages

28. 50%
increase in Hindi searches on mobile

29. Guide new users

31. Optimize speedRemove
barriers
Address
intermittent
connectivity
Guide new
users
Multilingual

32. Building with this
in mind

33. Our best advice for
catering to these
challenges

34. Building for everyone

35. Optimize speed Address
intermittent
connectivity
Multilingual Guide new
users
Remove
barriers

36. Needs the best possible reach
Automatic updates

37. These constraints make it
hard for native apps

38. Progressive Web Apps
- No install needed
- Widest reach
- Using least amount of data
- Being kept up-to-date

39. The best of native & web
coming together

40. Add to Homescreen
Push Notifications
Offline support

41. Web App Manifest

42. <link rel="manifest" href="/manifest.json">

43. {
"short_name": "AirHorner",
"name": "Kinlan's AirHorner of Infamy",
"icons": [
{
"src": "launcher-icon-1x.png",
"type": "image/png",
"sizes": "48x48"
},
{
"src": "launcher-icon-4x.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "index.html?utm_source=homescreen"
}

44. Learn more
Progressive Web Apps
goo.gl/nP4U2z
Service Workers
goo.gl/U5XIUk
Add to Homescreen
goo.gl/boKhks
Push notifications
goo.gl/BsaLVS

45. User experiences need to be…
Reliable Fast Engaging

46. Reliable
Instant loading
Works offline
Fast
Loads fast,
stays fast
Engaging
Add to homescreen
Full screen
Push notifications

47. App size really matters

48. Twitter Lite is under 1 MB
1-3%
the size of Twitter native apps
goo.gl/zRUU5D

49. ~50%
increase in pageviews
~60%
increase in pages per session
Twitter Lite improvements

50. 60 MBon Android
100 MBon iOS
0.5 MBas a PWA
Created with Polymer
Supported on all major browsers,
including UC

51. 2xmore pages visited
2xthe time spent
Compared to their mobile site

52. Remove
barriers
Address
intermittent
connectivity
Multilingual Guide new
users
Optimize speed

53. ~50KBfirst load
~500xlighter than on iOS
~300xlighter than on Android

54. 3s first load
1.8s repeat load
On 2G/ultra low 3G

55. 53%
of users abandon sites that
take longer than 3 seconds to load
goo.gl/4txOLB

56. PWAs solve the performance
on second load.
What about first load?

57. Open-source
initiative
Make the web better, through consistently
fast and high-performing pages across
devices and distribution platforms

58. With AMP, you're guided to only
do things that are fast!

59. AMP HTML AMP JS AMP Cache

60. AMP HTML AMP JS AMP Cache
AMP

61. Your first AMP page

62. <!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html">
<meta name="viewport" content="width=device-width,minimum-
scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s
steps(1,end) 0s 1 normal…
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello World!</body>
</html>

63. Include an image

64. <amp-img src="welcome.jpg"
alt="Welcome"
height="400"
width="800">
</amp-img>

65. 1s load time now
4s load time previously
On slow networks

66. AMP as an entry pointinto your PWA
AMP as a data sourcefor your PWA

67. AMP as an entry point
into your PWA
goo.gl/wNdP1K

68. Instant first load with AMP
Then upgrade to a PWA

69. Start fast, stay fast!

70. amp-install-serviceworker
goo.gl/wNdP1K

71. <amp-install-serviceworker
src="https://your-domain.com/sw.js"
data-iframe-src="https://your-domain.com/install-sw.html"
layout="nodisplay">
</amp-install-serviceworker>

72. 2.75s
AMP load time
down from 12.34s
1.63s
PWA load time
down from 8.77s
Tests done on Nexus 5, slow 3G

73. 74%
visits turning into conversions
95%
increase on conversions

74. AMP as a data source
for your PWA
goo.gl/L5RnOX

75. A common scenario:
PWAs as a SPA that connects
to a JSON API via Ajax

76. 1. Include "Shadow AMP" in
your Progressive Web App

77. <!-- Include a special version of AMP we call “Shadow AMP” -->
<!-- Asynchronously load the AMP-with-Shadow-DOM runtime library. -->
<script async src="https://cdn.ampproject.org/shadow-v0.js"></script>

78. 2.Handle navigation in your
Progressive Web App

79. 3.Use the Shadow AMP API
to render a page inline

81. Network Information API
goo.gl/kd5O36

82. network-rtt = "Network-RTT" ":" delta-milliseconds
delta-milliseconds = 1*DIGIT
network-bw = "Network-BW" ":" kbps-value
kbps-value = 1*DIGIT

83. Save-Data header
goo.gl/HCsosB

84. Save-Data header
Save-Data: On

86. Remove
barriers
Optimize speed Multilingual Guide new
users
Address
intermittent
connectivity

87.
~50%
of users in India are on 2G
goo.gl/NVBhcf

88. Service Workers for
handling slow or no
network connection

90. Two interesting options for
poor network connections and
devices with slow disk access

91. 1. Timeouts for slow networks,
then fallback to device storage

92. 2. Race conditions for devices with
slow read access

93.
~2/3
of users in Nigeria are on 2G
goo.gl/Qxc9jz

94. 92%
less data for first load vs. native
82%
less data for first transaction vs. native
goo.gl/Qxc9jz

95. 63%
less data for first load vs. previous web
84%
less data for first transaction vs. previous web
goo.gl/Qxc9jz

96. Remove
barriers
Optimize speed Address
intermittent
connectivity
Guide new
users
Multilingual

100. Remove
barriers
Optimize speed Address
intermittent
connectivity
Multilingual Guide new
users

101. Making sure to help users when
they visit your web site

102. Add to
Homescreen

103. 5-6x
more likely users will use Add to Homescreen
than install the equivalent native app

104. 63%
of users are on 2G
Fast user experience essential
goo.gl/Qxc9jz

105. 60%
of all visits from the homescreen icon
goo.gl/Qxc9jz
70%
higher conversion than average users

106. Optimize speedRemove
barriers
Address
intermittent
connectivity
Guide new
users
Multilingual
Progressive Web Apps

107. Build for your next billion

108. How to get started
developers.google.com/web/billions/

109. Thank you!
Mariya Moeva
@marrrr
Robert Nyman
@robertnyman
Tal Oppenheimer
@taloppenheimer