Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Building for your next billion
Mariya Moeva
@marrrr
Robert Nyman
@robertnyman
Tal Oppenheimer
@taloppenheimer
Tips for
building
Where our
users are
Things we’ve
learned
Internet growth is happening
everywhere
2016201420152014Total internet users –
goo.gl/iJAfRJ
20162014201520142015Total internet users –
goo.gl/iJAfRJ
201620142015201420152016Total internet users –
goo.gl/iJAfRJ
2014≈20142014New internet users –
goo.gl/iJAfRJ
2014≈201420142015New internet users –
goo.gl/iJAfRJ
2014≈2014201420152016New internet users –
goo.gl/iJAfRJ
>100 million
users came online in India last year.
goo.gl/iJAfRJ
Again.
~1 billion
Unique mobile subscribers expected in India in 2020
goo.gl/rdNZ7w
Hundreds of millions
of Chrome on Android users are
from next billion user countries
Brazil, India, Indonesia
are in the top 10 countries with the highest Search volume
What we’ve learned
33%
of smartphone users in India
run out of storage space every day
goo.gl/LWchN5
50%
of users in India are on 2G
goo.gl/NVBhcf
~$2
to download a single "Free" 40 MB app in India
goo.gl/4hIF80
goo.gl/i9JglM
goo.gl/WSYY74
Full bleed photos are great
Remove barriers
No install
Save Data
Work Offline
goo.gl/TNqxAv
~1M app launches per day
20% decrease in bounce rate
Optimize for speed
goo.gl/cdSKOI
90% less data
5x faster
50%
increase in traffic due to faster
loading and data sensitivity
Full bleed photos are great
Build for intermittent connectivity
Full bleed photos are great
Speak many languages
goo.gl/cI1OAL
>20%
of users in these countries
search in two or more languages
50%
increase in Hindi searches on mobile
Guide new users
Optimize speedRemove
barriers
Address
intermittent
connectivity
Guide new
users
Multilingual
Building with this
in mind
Our best advice for
catering to these
challenges
Building for everyone
Optimize speed Address
intermittent
connectivity
Multilingual Guide new
users
Remove
barriers
Needs the best possible reach
Automatic updates
These constraints make it
hard for native apps
Progressive Web Apps
- No install needed
- Widest reach
- Using least amount of data
- Being kept up-to-date
The best of native & web
coming together
Add to Homescreen
Push Notifications
Offline support
Web App Manifest
<link rel="manifest" href="/manifest.json">
{
"short_name": "AirHorner",
"name": "Kinlan's AirHorner of Infamy",
"icons": [
{
"src": "launcher-icon-1x.png",
"type": "...
Learn more
Progressive Web Apps
goo.gl/nP4U2z
Service Workers
goo.gl/U5XIUk
Add to Homescreen
goo.gl/boKhks
Push notificati...
User experiences need to be…
Reliable Fast Engaging
Reliable
Instant loading
Works offline
Fast
Loads fast,
stays fast
Engaging
Add to homescreen
Full screen
Push notificatio...
App size really matters
Twitter Lite is under 1 MB
1-3% 

the size of Twitter native apps
goo.gl/zRUU5D
~50%
increase in pageviews

~60%
increase in pages per session
Twitter Lite improvements
60 MBon Android
100 MBon iOS
0.5 MBas a PWA
Created with Polymer
Supported on all major browsers,
including UC
2xmore pages visited
2xthe time spent
Compared to their mobile site
Remove
barriers
Address
intermittent
connectivity
Multilingual Guide new
users
Optimize speed
~50KBfirst load
~500xlighter than on iOS
~300xlighter than on Android
3s first load
1.8s repeat load
On 2G/ultra low 3G
53%
of users abandon sites that
take longer than 3 seconds to load 

goo.gl/4txOLB
PWAs solve the performance
on second load.
What about first load?
Open-source
initiative
Make the web better, through consistently
fast and high-performing pages across
devices and distrib...
With AMP, you're guided to only
do things that are fast!
AMP HTML AMP JS AMP Cache
AMP HTML AMP JS AMP Cache
AMP
Your first AMP page
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html">
<meta name="viewport...
Include an image
<amp-img src="welcome.jpg"
alt="Welcome"
height="400"
width="800">
</amp-img>
1s load time now
4s load time previously
On slow networks
AMP as an entry pointinto your PWA
AMP as a data sourcefor your PWA
AMP as an entry point
into your PWA
goo.gl/wNdP1K
Instant first load with AMP
Then upgrade to a PWA
Start fast, stay fast!
amp-install-serviceworker
goo.gl/wNdP1K
<amp-install-serviceworker
src="https://your-domain.com/sw.js"
data-iframe-src="https://your-domain.com/install-sw.html"
l...
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
74%
visits turning into conversions
95%
increase on conversions
AMP as a data source
for your PWA
goo.gl/L5RnOX
A common scenario:
PWAs as a SPA that connects
to a JSON API via Ajax
1. Include "Shadow AMP" in
your Progressive Web App
<!-- Include a special version of AMP we call “Shadow AMP” -->
<!-- Asynchronously load the AMP-with-Shadow-DOM runtime li...
2.Handle navigation in your
Progressive Web App
3.Use the Shadow AMP API
to render a page inline
Network Information API
goo.gl/kd5O36
network-rtt = "Network-RTT" ":" delta-milliseconds
delta-milliseconds = 1*DIGIT
network-bw = "Network-BW" ":" kbps-value
k...
Save-Data header
goo.gl/HCsosB
Save-Data header
Save-Data: On
Remove
barriers
Optimize speed Multilingual Guide new
users
Address
intermittent
connectivity


~50%
of users in India are on 2G
goo.gl/NVBhcf
Service Workers for
handling slow or no
network connection
Two interesting options for
poor network connections and
devices with slow disk access
1. Timeouts for slow networks,
then fallback to device storage
2. Race conditions for devices with
slow read access


~2/3
of users in Nigeria are on 2G
goo.gl/Qxc9jz
92%
less data for first load vs. native


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


84%
less data for first transaction vs. previous web
goo.gl/Qxc9jz
Remove
barriers
Optimize speed Address
intermittent
connectivity
Guide new
users
Multilingual
Remove
barriers
Optimize speed Address
intermittent
connectivity
Multilingual Guide new
users
Making sure to help users when
they visit your web site
Add to
Homescreen
5-6x
more likely users will use Add to Homescreen
than install the equivalent native app
63%
of users are on 2G
Fast user experience essential
goo.gl/Qxc9jz
60%
of all visits from the homescreen icon
goo.gl/Qxc9jz
70%
higher conversion than average users
Optimize speedRemove
barriers
Address
intermittent
connectivity
Guide new
users
Multilingual
Progressive Web Apps
Build for your next billion
How to get started
developers.google.com/web/billions/
Thank you!
Mariya Moeva
@marrrr
Robert Nyman
@robertnyman
Tal Oppenheimer
@taloppenheimer
Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017
Upcoming SlideShare
Loading in …5
×

Building for Your Next Billion - Google I/O 2017

3,883 views

Published on

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

Published in: Technology

Building for Your Next Billion - Google I/O 2017

  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
  25. Full bleed photos are great Speak many languages goo.gl/cI1OAL
  26. >20% of users in these countries search in two or more languages
  27. 50% increase in Hindi searches on mobile
  28. Guide new users
  29. Optimize speedRemove barriers Address intermittent connectivity Guide new users Multilingual
  30. Building with this in mind
  31. Our best advice for catering to these challenges
  32. Building for everyone
  33. Optimize speed Address intermittent connectivity Multilingual Guide new users Remove barriers
  34. Needs the best possible reach Automatic updates
  35. These constraints make it hard for native apps
  36. Progressive Web Apps - No install needed - Widest reach - Using least amount of data - Being kept up-to-date
  37. The best of native & web coming together
  38. Add to Homescreen Push Notifications Offline support
  39. Web App Manifest
  40. <link rel="manifest" href="/manifest.json">
  41. { "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" }
  42. Learn more Progressive Web Apps goo.gl/nP4U2z Service Workers goo.gl/U5XIUk Add to Homescreen goo.gl/boKhks Push notifications goo.gl/BsaLVS
  43. User experiences need to be… Reliable Fast Engaging
  44. Reliable Instant loading Works offline Fast Loads fast, stays fast Engaging Add to homescreen Full screen Push notifications
  45. App size really matters
  46. Twitter Lite is under 1 MB 1-3% 
 the size of Twitter native apps goo.gl/zRUU5D
  47. ~50% increase in pageviews
 ~60% increase in pages per session Twitter Lite improvements
  48. 60 MBon Android 100 MBon iOS 0.5 MBas a PWA Created with Polymer Supported on all major browsers, including UC
  49. 2xmore pages visited 2xthe time spent Compared to their mobile site
  50. Remove barriers Address intermittent connectivity Multilingual Guide new users Optimize speed
  51. ~50KBfirst load ~500xlighter than on iOS ~300xlighter than on Android
  52. 3s first load 1.8s repeat load On 2G/ultra low 3G
  53. 53% of users abandon sites that take longer than 3 seconds to load 
 goo.gl/4txOLB
  54. PWAs solve the performance on second load. What about first load?
  55. Open-source initiative Make the web better, through consistently fast and high-performing pages across devices and distribution platforms
  56. With AMP, you're guided to only do things that are fast!
  57. AMP HTML AMP JS AMP Cache
  58. AMP HTML AMP JS AMP Cache AMP
  59. Your first AMP page
  60. <!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>
  61. Include an image
  62. <amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"> </amp-img>
  63. 1s load time now 4s load time previously On slow networks
  64. AMP as an entry pointinto your PWA AMP as a data sourcefor your PWA
  65. AMP as an entry point into your PWA goo.gl/wNdP1K
  66. Instant first load with AMP Then upgrade to a PWA
  67. Start fast, stay fast!
  68. amp-install-serviceworker goo.gl/wNdP1K
  69. <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>
  70. 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
  71. 74% visits turning into conversions 95% increase on conversions
  72. AMP as a data source for your PWA goo.gl/L5RnOX
  73. A common scenario: PWAs as a SPA that connects to a JSON API via Ajax
  74. 1. Include "Shadow AMP" in your Progressive Web App
  75. <!-- 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>
  76. 2.Handle navigation in your Progressive Web App
  77. 3.Use the Shadow AMP API to render a page inline
  78. Network Information API goo.gl/kd5O36
  79. network-rtt = "Network-RTT" ":" delta-milliseconds delta-milliseconds = 1*DIGIT network-bw = "Network-BW" ":" kbps-value kbps-value = 1*DIGIT
  80. Save-Data header goo.gl/HCsosB
  81. Save-Data header Save-Data: On
  82. Remove barriers Optimize speed Multilingual Guide new users Address intermittent connectivity
  83. 
 ~50% of users in India are on 2G goo.gl/NVBhcf
  84. Service Workers for handling slow or no network connection
  85. Two interesting options for poor network connections and devices with slow disk access
  86. 1. Timeouts for slow networks, then fallback to device storage
  87. 2. Race conditions for devices with slow read access
  88. 
 ~2/3 of users in Nigeria are on 2G goo.gl/Qxc9jz
  89. 92% less data for first load vs. native 
 82% less data for first transaction vs. native goo.gl/Qxc9jz
  90. 63% less data for first load vs. previous web 
 84% less data for first transaction vs. previous web goo.gl/Qxc9jz
  91. Remove barriers Optimize speed Address intermittent connectivity Guide new users Multilingual
  92. Remove barriers Optimize speed Address intermittent connectivity Multilingual Guide new users
  93. Making sure to help users when they visit your web site
  94. Add to Homescreen
  95. 5-6x more likely users will use Add to Homescreen than install the equivalent native app
  96. 63% of users are on 2G Fast user experience essential goo.gl/Qxc9jz
  97. 60% of all visits from the homescreen icon goo.gl/Qxc9jz 70% higher conversion than average users
  98. Optimize speedRemove barriers Address intermittent connectivity Guide new users Multilingual Progressive Web Apps
  99. Build for your next billion
  100. How to get started developers.google.com/web/billions/
  101. Thank you! Mariya Moeva @marrrr Robert Nyman @robertnyman Tal Oppenheimer @taloppenheimer

×