Post on 23-Jan-2018
transcript
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
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
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
~$2 to download a single "Free" 40 MB app in India
goo.gl/4hIF80 goo.gl/i9JglM goo.gl/WSYY74
Full bleed photos are greatRemove barriers
~1M app launches per day
20% decrease in bounce rate
90% less data 5x faster
50% increase in traffic due to faster loading and data sensitivity
Full bleed photos are greatBuild for intermittent connectivity
>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": "image/png", "sizes": "48x48" }, { "src": "launcher-icon-4x.png", "type": "image/png", "sizes": "192x192" } ], "start_url": "index.html?utm_source=homescreen" }
Learn more Progressive Web Apps
goo.gl/nP4U2z
Service Workers
goo.gl/U5XIUk
Add to Homescreen
goo.gl/boKhks
Push notifications
goo.gl/BsaLVS
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 notifications
App size really matters
~50% increase in pageviews
~60% increase in pages per session
Twitter Lite improvements
60 MB on Android
100 MB on iOS
0.5 MB as a PWA
Created with Polymer Supported on all major browsers, including UC
2x more pages visited
2x the time spent
Compared to their mobile site
Remove barriers
Address intermittent connectivity
Multilingual Guide new users
Optimize speed
~50KB first load
~500x lighter than on iOS
~300x lighter 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 distribution platforms
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" 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>
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 point into your PWA
AMP as a data source for your PWA
Instant first load with AMP
Then upgrade to a PWA
Start fast, stay fast!
<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>
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
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 library. --> <script async src="https://cdn.ampproject.org/shadow-v0.js"></script>
2.Handle navigation in your Progressive Web App
3.Use the Shadow AMP API to render a page inline
network-rtt = "Network-RTT" ":" delta-milliseconds delta-milliseconds = 1\*DIGIT
network-bw = "Network-BW" ":" kbps-value kbps-value = 1\*DIGIT
Save-Data header
Save-Data: On
Remove barriers
Optimize speed Multilingual Guide new users
Address intermittent connectivity
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
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
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