4. 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
5. 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
6. 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
7. 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
8. 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
9. 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!
23. Scalable Vector Graphics (SVG)
Images drawn as shapes
infinitely scalable
XML - Can be added inline to HTML document
https://gist.github.com/hail2u/2884613?short_path=66a60ff
24. Scalable Vector Graphics (SVG)
Images drawn as shapes
infinitely scalable
XML - Can be added inline to HTML document
https://gist.github.com/hail2u/2884613?short_path=66a60ff
25. Scalable Vector Graphics (SVG)
Images drawn as shapes
infinitely scalable
XML - Can be added inline to HTML document
https://gist.github.com/hail2u/2884613?short_path=66a60ff
49. Animated GIFs
Video Tags:
<video loop autoplay muted playsinline controls = "false” src="goats.mp4”/>
Video is not pre-loaded, will be last to download
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/
59. 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
71. Video Streaming
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
74. Optimizing Video Delivery
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 chooses 192
KBPS bitrate
Buffer Fills Quickly
Video Plays
79. Video Plays
Optimizing Video Delivery
Video Streaming
Manifest File:
List of Available
Streams
Player selects
192 KBPS stream Stream Manifest:
List of Video Segments
Buffer Fills Quickly
Player can estimate
network throughput
3.5 MBPS
Video
83. Video Plays
Optimizing Video Delivery
Goldilocks Example
Manifest File:
List of Available
Streams
Player selects
3.5 MBPS stream Stream Manifest:
List of Video Segments
Buffer Fills.. Not too
fast.. Not too slow
84. Video Startup
4k Low->High:
4K Middle
(Goldilocks):
4k:High->Low:
PROs: CONS:
Fast Startup Initial Quality: Low
Other Connections:
Initial Quality: Low
Very slow startup
Fast Connections:
Initial Quality: High
Initial Quality: Good
Initial Startup: Not
fast, but not slow