Its timetostopstalling androidcork

Mobile/Web Performance and You
Doug Sillars
Android Cork
May 24, 2018
@DougSillars

0.5
0.6
0.7
0.8
0.9
Standing in Line Standing on the
edge of a virtual
cliff
Experiencing
Mobile Delays
Solving a Math
Problem
https://www.ericsson.com/res/docs/2016/mobility-report/emr-feb-2016-the-stress-of-steaming-delays.pdf
Stress

How Much Do Customers Hate Delays?
3s: 53% of Users Abandon Mobile Sites
500ms: 26% Frustration
8% Engagement
100ms: 1% Revenue Walmart & Amazon (Desktop 2001)
4% Mobile Users Throw Their Phones
https://www.doubleclickbygoogle.com/articles/mobile-speed-matters
http://bit.ly/mobileWebStress
http://www.globaldots.com/how-website-speed-affects-conversion-rates/
https://www.mobilejoomla.com/blog/172-responsive-design-vs-server-side-solutions-infographic.html

Your Customers Demand
Mobile experiences that
are:
Immersive
Rich
Fast
This can be hard.

Cellular Networks Are High Latency Environments
• Connection Establishment 500-2500ms 50-250ms 1-10ms
• Round Trip Time (RTT) 200ms 100ms 8-50ms
3G 4G Wi-Fi

Today’s Goals
Test where your app/site is today
Common Tools
Learn best practices for speed
Learn from existing tests
See the results of performance
fixes

Testing Your Mobile Performance
Native Web
Free & Open Source Tools
Video Optimizer
https://developer.att.com/
Video-Optimizer
WebPageTest
https://www.webpagetest.org
https://webspeed.cloudinary.com

Testing With Video Optimizer
Run network traces on your
phone
1. Pick device
2. Collector type
3. Set network conditions
4. Decrypt HTTPS
5. Record screen?
6. Name
7. GO!

Video Optimizer
Video Optimizer
establishes a VPN
connection on Device
Collects all Traffic in/out
Device screen displayed
on your computer
Click Stop to end trace.
Files copied over to
computer for analysis.

Best Practices– Test Results
Connections
Files and Images
HTML
Security
Video

WebPageTest
Tests Websites on Remote
Browsers
1. Enter Website
2. Set Test Location
3. Choose Device & Browser
4. Options
5. GO!

Optimizing Content Delivery
1.Delivery Speed

1.Delivery Speed
Coin-hive.com is a cryptocurrency mining script that is used
in coin-jacking websites
They have one server in Germany.
Munich, DE ping:
10ms
San Jose, US
ping: 150ms
Singapore
ping: 200ms
Data Collected with Circonius

1.Delivery Speed: Content Delivery Networks
CDNs cache your
content at
various locations
around the
world – reducing
the round trip
time

1.Delivery Speed: Redirects

Pokémon Go!
Quick notes:
GPS: always on
(green)
Packet traffic: radio
nearly always on

Pokémon Go! Cellular Radio Usage
HTTP (ARO can read):
Location images 50-80kb each
HTTPS (ARO can only see packets):
maps.googleapis.com - Map data <10KB each
Storage.googleapis.com – maps and game data ~500kb per batch
Pgorelease.niananticlabs.com – uplink – player info ~35kb per batch
Several analytics companies: unity3d, crittercism <10KB each
We’ll focus
on these

Pokémon Go! Cellular Radio Usage
Storage.googleapis.com – maps and game data ~500kb per
batch
Pgorelease.niananticlabs.com – uplink – player info ~35kb per batch

Pokémon Go! Chatty Connections
5th connection to
same server!

Pokémon Go! Chatty Connections
Connections recur @ ~30s intervals
What if these transmissions could be combined into 1 transmission every 30s?
Cellular radio is off more often – Battery Savings
Fewer Network connections, fewer bursts of traffic

As a Developer, Why Should I Care?
Niantic servers are having trouble with Pokémon Go! Traffic loads
Assumption: Server can handle 1,000 simultaneous connections
Today:
5 connections per customer = 200 customers/server
Tomorrow:
1 connection per customer = 1,000 customers/server

1.Delivery Speed
2.Content Delivery

Text Compression
Screen filled via:
130 KB JSON file

Text Compression
130 KB JSON file
populates screen
"primaryImageUrl":"/db_photos/showcards/v5/AllPhotos/1394
9024/p13949024_b_v5_aa.jpg"
"title":"America's Got Talent"

Text Compression
131 KB Uncompressed:
• Gzip: 16 KB (88% smaller!)
• Brotli: 12 KB (91% smaller!)
Screen is populated with data and images
faster

31
Startup
• App Startup is slow
• There are not a lot of connections,
but the run in serial, not in parallel
• Files do not utilize Gzip compression

3
2
Clean Up Your Data
JSON files downloaded have many
duplicate entries – adding KB to the
download:
Identical data repeated
20x for each channel

33
Duplicate Content
Our tests show between 1.5-4.7% of all data transmitted were duplicate image files!

Images

35
Very Large Images
• Several Images are larger than the phone, yet display in a very small region

Images
2560 px
1440 px
1555x1200 pixels

Image Pixel Count
2560 px
1440 px
720x556 pixels

Image Quality
2560 px
1440 px
85% Quality

Images: Putting it Together
2560 px
1440 px
85% Quality & 720x556 pixels

Image Quality Tooling
http://res.cloudinary.com/dougsillars/image/upload/c_scale,q_85,w_720/
v1517843228/bigFrankSinatraImage_c1mnff.jpg
http://res.cloudinary.com/dougsillars/image/upload/c_scale,q_auto,w_720/
v1517843228/bigFrankSinatraImage_c1mnff.jpg Auto Quality: 128 KB
91.7% savings!
http://res.cloudinary.com/dougsillars/image/upload/c_scale,q_auto,r_0,w_720/
v1517843228/bigFrankSinatraImage_c1mnff.webp
WebP: 84 KB
94.6% savings!

Images and Devices
https://twitter.com/paulcalvano/status/928751141843808256

Responsive Images
http://www.responsivebreakpoints.com/

Preview Images

Preview Images
https://github.com/technopagan/sqip

Animated GIFs
Original MP4
1.4 MB

Animated GIFs
Animated GIF
3.8 MB
270% larger

Animated GIFs

Animated GIFs
MP4: 256 colors
247KB
93% smaller

Animated GIFs
Video Tags are slow:
Video is not pre-loaded, will be last to download
<video autoplay loop muted playsinline controls = "false” src="goats.mp4" />
Img tags are fast!
<picture>
<source type="video/mp4" srcset=”goats.mp4">
<source type="image/webp" srcset=”goats.webp">
<img src=”goats.gif">
</picture>
https://calendar.perfplanet.com/2017/animated-gif-without-the-gif/

52
Buffer Rage
a state of uncontrollable fury or violent
anger induced by delayed or interrupted
streaming video content
http://www.ineoquest.com/press-releases/new-research-reveals-buffer-rage-as-techs-newest-epidemic

Video Startup Delay
After 2 seconds,
every additional
second corresponds
to 5.8% increase in
abandonment
https://www.akamai.com/kr/ko/multimedia/documents/technical-publication/video-stream-quality-impacts-viewer-behavior-inferring-causality-using-quasi-experimental-designs-technical-publication.pdf

Video Startup Delay
https://www.akamai.com/kr/ko/multimedia/documents/technical-publication/video-stream-quality-impacts-viewer-behavior-inferring-causality-using-quasi-experimental-designs-technical-publication.pdf

55
Streaming Video on Demand
• User clicks “Adventure Time”
episode
• Industry Target: <3s delay
• 73s Screen flips to
landscape at (blue
bar)
• 75s Ad for Lego
Batman downloads
• ~80-105s Lego
Batman ad plays
• 108s, get DTV
Authorizing screen
• 116s. Blank player
• 121s video begins
playing

56
Breaking it down: Part 1 Video Ad Download
• User clicks “Adventure Time episode
• Conviva
• Omniture x8
• Freewheel x3
• 45KB file with Mp4
urls (not
compressed)
• DTV
• Adobe (Omniture?)
• Bluekai
(Adobe/Omniture?) x2
• Sizmek analytics
• Freewheel ad manager
• DoubleClick
• ScorecardResearch
• Lego Batman Movie Ad
• Ad Download delayed because of
analytics connections!

57
Breaking it down: Part 1 Video Ad Download
• Connections prior to ad download account for ~ 50% of latency to ad play
• Latency for ad play doubles below 5 MBPS
• Ad file size does not decrease as network quality decreases.
• Measured Times
• First analytics
• First ad packet
• “ad playback start”
• Based on analytics reporting ad start

58
Breaking it down: Part 2 Video Ad Playback

59
Breaking it down: Part 3 THE MOVIE!!!
• Ad ends
• Based on the
chunk download
and when the
video appears on
the screen – there
was a 9-10s delay
from the
beginning of
movie Download
of the ad to the
start of the video.
• ~30s of
video in
buffer
• 5,200 KB
•

60
Breaking it down: Movie startup
• Suggestion to Reduce Buffering
• Begin
downloading
movie while Ad is
playing to reduce
buffering and
delay for
customers
• Ad analytics
report “3rd
Quartile
• Delay of 5 seconds
to download
video is
eliminated
•
Ad Play
Movie
Starts DL
Customer
“buffering”
Movie
Starts
playing
Movie
Starts DL
Customer
“buffering”
Movie
Starts
playing
3rd Quartile of ad

61
Breaking it down: Movie startup
• Time to play not affected by
throughput
• Based on first
packet download
to appearance on
screen
• screen capture
video
• 1 frame 3-4s
• Values are
high here.
• Assume video
startup ~5-10s
after first packet
arrives
•

What Leads to Startup Delay?
Manifest File:
List of Available
Streams
Player Chooses a Stream Stream Manifest:
List of Video Segments
Player Downloads
Segments into buffer
Video Plays

#EXTM3U#
EXT-X-STREAM-INF:BANDWIDTH=8500000,RESOLUTION=1920x1080,sunflower1080/index1080.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=200000,RESOLUTION=416x234,sunflower234/index234.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=600000,RESOLUTION=640x360,sunflower360_600k/index360_600k.m3u8
Example Manifest file:

Video Streaming
Manifest File:
List of Available
Streams
Player selects
8.5 MBPS stream Stream Manifest:
List of Video Segments
Buffer takes a long
time to fill
Video Does Not Play
Player immediately changes the
stream choice to 600KBPS

Video Streaming: Test on Fast Wi-Fi

#EXTM3U#
Example Manifest file:
8.5 MBPS is HIGH throughput for initial streaming
Best Practice: Pick middle throughput to balance startup time and quality

As long as Video download is faster than Playback….
What Leads to Stalls?

What Leads to Stalls?
Video Download
slower than playback,
so the video stalls
Buffer is filling, but
video has not resumed

Balancing the Network with Playback
Player uses available streams to balance download with playback

Video Streaming
#EXTM3U#

Video Streaming
Large jumps in
throughput
can lead to
streaming
issues

Video Streaming
Large throughput gaps can lead to
many stream changes – which can be
visible to user

Performance Summary
1.Delivery Speed
1.CDNs
2.Reduce redirects
2.Content Delivery
1) Text Compression
2) Image Sizing, Quality and Format
3) Video Bitrate

Video
<video Preload = “auto” src="goats.mp4" />
Best to use ”metadata” or “none”

Summary
Web:
WebPageTest https://www.webpagetest.org
WebsiteSpeedTest https://Webspeedtest.cloudinary.com
Native:
Video Optimizer https://developer.att.com/Video-Optimizer
High Performance Android Apps http://bit.ly/HighPerformanceAndroidApps
Images:
Cloudinary https://www.cloudinary.com
http://www.responsivebreakpoints.com/
Tooling

Its timetostopstalling androidcork

More Related Content

What's hot

Similar to Its timetostopstalling androidcork

More from Doug Sillars

Recently uploaded

Its timetostopstalling androidcork

Editor's Notes