Presented October 10, 2018

1. It’s Time to Stop Stalling:
Doug Sillars
Cambridge MOT
October 10, 2018
Mobile/Web Performance and You
@DougSillars

2. Contact Me:
@DougSillars
Doug.Sillars@gmail.com
www.dougsillars.com
Doug Sillars
Freelance Developer Relations
Performance Audits: Web/Native
Workshops:
Performance/Images/Video
http://bit.ly/HighPerformanceAndroidApps

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. Your Customers Demand
Mobile experiences that
are:
Immersive
Rich
Fast
This can be hard.

7. 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

8. 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

9. 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

10. 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!

11. 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.

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

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

14. WebPageTest Results

15. Optimizing Content Delivery
1.Delivery Speed: Redirects

16. © 2017 AT&T Intellectual Property. All rights reserved. AT&T, Globe logo, Mobilizing Your World and DIRECTV are registered trademarks and service marks of AT&T Intellectual Property and/or AT&T affiliated.
companies All other marks are the property of their respective owners. AT&T Proprietary (Internal Use Only). Not for use or disclosure outside the AT&T companies except under written agreement.
Optimizing Content Delivery

17. 3rd Party Interference

18. 3rd Party Interference

19. Optimizing Content Delivery
1.Delivery Speed
2.Content Delivery

20. Optimizing Content Delivery

21. Optimizing Content Delivery
Text Compression
Screen filled via:
130 KB JSON file

22. Optimizing Content Delivery
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"

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

24. Optimizing Content Delivery
Images

25. Scalable Vector Graphics (SVG)

26. Scalable Vector Graphics (SVG)

27. Scalable Vector Graphics (SVG)

28. Scalable Vector Graphics (SVG)
https://commons.wikimedia.org/wiki/User:Quibik/Cleaning_up_SVG_files_manually

29. Scalable Vector Graphics (SVG)
https://github.com/google/brotli

30. Optimizing Content Delivery
Images
2560 px
1440 px
1555x1200 pixels (1.8 Mpixels)

31. Optimizing Content Delivery
Image Pixel Count
2560 px
1440 px
720x556 pixels (0.4 Mpixels)

32. Optimizing Content Delivery
Image Quality
2560 px
1440 px
85% Quality

33. Optimizing Content Delivery
Image Quality
2560 px
1440 px
85% Quality

34. Optimizing Content Delivery
Images: Putting it Together
2560 px
1440 px
85% Quality & 720x556 pixels

35. Image Quality Use “In The Wild”
442,000 mobile sites
Analyzed 3/15/18

36. Image Quality Use “In The Wild”
Median Savings (50th percentile):
• 2.83 seconds faster page load
• 419KB less data

37. Optimizing Content Delivery
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!

38. File Format: WebP
https://caniuse.com/#feat=webp

41. Optimizing Content Delivery
Images and Devices
https://twitter.com/paulcalvano/status/928751141843808256

42. Optimizing Content Delivery
Responsive Images
http://www.responsivebreakpoints.com/

43. Optimizing Content Delivery
Preview Images

44. Optimizing Content Delivery
Preview Images
https://github.com/technopagan/sqip

45. Web Usage
https://www.nngroup.com/articles/scrolling-and-attention/
https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/

46. Lazy Loading
https://www.nngroup.com/articles/scrolling-and-attention/
https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/

47. Lazy Loading Use “In The Wild”
442,000 mobile sites
Analyzed 3/15/18

48. Lazy Loading: Experiments

49. Lazy Loading: Experiments

50. Optimizing Content Delivery
Animated GIFs
Original MP4
1.4 MB

51. Optimizing Content Delivery
Animated GIFs
Animated GIF
3.8 MB
270% larger

52. Optimizing Content Delivery
Animated GIFs

53. Optimizing Content Delivery
Animated GIFs
MP4: 256 colors
247KB
93% smaller

54. 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>
Optimizing Content Delivery
Animated GIFs
https://calendar.perfplanet.com/2017/animated-gif-without-the-gif/

55. Optimizing Content Delivery

56. 56
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

57. Video Quality Metrics
1.Does the Video Start?
2.Does the Video Stall?
3.Does it Look Good?

58. Video Startup
Conviva creen_Streaming_TV_Census_Report_FINAL.pdf
Q1 2018:

59. Video Startup
Conviva creen_Streaming_TV_Census_Report_FINAL.pdf
Q1 2018: Video Startup
16.9B total Video plays
400M Fail to Start
2B Abandoned before Start
~800M hours of video
playback lost

60. Video Startup
Conviva creen_Streaming_TV_Census_Report_FINAL.pdf
Q1 2018: Video Startup
16.9B total Video plays
400M Fail to Start
2B Abandoned before Start
~800M hours of video
playback lost

61. Video Fails To Start

62. Video Startup Failure

63. Video Startup
Conviva creen_Streaming_TV_Census_Report_FINAL.pdf
Q1 2018: Video Startup
16.9B total Video plays
400M Fail to Start
2B Abandoned before Start

64. 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

65. 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

66. Preload When It Makes Sense
Ad Playback Video
Download

67. Preload When It Makes Sense
Ad Playback Video
Download

68. Preload When It Makes Sense
Ad Playback
Video
Download

69. ..be Careful with Video Preload
Preload = “auto”

70. …be Careful with Preload

71. Background Video

72. Video Background
Video (as Downloaded): 5.3 MB
Video 5 MB
Audio 250 KB 5% of file
Best Practice:
To save bandwidth, remove the audio stream from videos that
are played silently.

73. Video Background: Mobile
Best Practice:
If Viewport will not support Video…
Don’t Download it

74. Video Background

75. Video Background
33.6 MB
27s
2560 x 1226
10 MBPS

76. Video Background
Best Practice:
Resize Video to reasonable size.
33.6 MB
27s
2560 x 1226
10 MBPS

77. Video Background
Best Practice:
Resize Video to reasonable size.
PROTIP: Renaming the file is not enough…

78. Video Resizing
• 1920x1080: 8.1 MB
• 1280x720: 4.3 MB
• 1080x608: 3.3 MB
• 720x405: 1.76 MB
http://res.cloudinary.com/dougsillars/video/upload/vc_auto,w_720/v1533591785/depend_p2ryou.mp4

79. Video Third Parties

80. Video Third Parties

81. Video Third Parties

82. Video Third Parties

83. Video Streaming
Manifest File:
List of Available
Streams
Player Chooses a Stream Stream Manifest:
List of Video Segments
Player Downloads
Segments into buffer
Video Plays

84. Video Plays
Optimizing Video Delivery
Video Streaming
Player can estimate
network throughput
Optimal video Bitrate
HTTPArchive
Mobile: 1.6 MBPS
Desktop 5 MBPS

85. Video Streaming: Manifest File
https://hls.ted.com/talks/2208.m3u8
Video Tracks
Video Tracks (iFrames)
Audio Tracks &
Subtitles

86. Video Streaming: Manifest File
https://hls.ted.com/talks/2208.m3u8
Video Tracks

87. Video Streaming: Manifest File
https://hls.ted.com/talks/2208.m3u8

88. Optimizing Video Delivery
Video Streaming
Manifest File:
List of Available
Streams
Player selects high
bitrate stream Stream Manifest:
List of Video Segments
Buffer takes a long
time to fill
Video Does Not Play
Player chooses low
bitrate
Buffer Fills Quickly
Video Plays

89. Video Startup
Conviva creen_Streaming_TV_Census_Report_FINAL.pdf
Q1 2018: Video Startup
Average Video Start Time:
N. America: 4.91s
Asia: 3.00s
Europe: 4.30s

90. Video Streaming: Startup Time
Low -> High
High => Low
Middle (Goldilocks)

91. Video Startup
10s 11s 12s 13s 14s 15s 16s 17s
4k Low->High:
4K Middle
(Goldilocks):
4k:High->Low:

92. 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

93. Video Streaming: Manifest File
https://hls.ted.com/talks/2208.m3u8 Testing with WebPageTest 3G

94. Video Streaming: Manifest File
https://hls.ted.com/talks/2208.m3u8

95. Video Streaming: Manifest File
https://hls.ted.com/talks/2208.m3u8

96. Video Streaming: Manifest File
https://hls.ted.com/talks/2208.m3u8
Testing with WebPageTest 3G

97. Video Streaming: Manifest File
600k.m3u8

98. Video Streaming: Manifest File
600k.m3u8

99. Video Streaming: Manifest File
https://hls.ted.com/talks/2208.m3u8

100. Conclusion
Optimize Image:
Quality
Format
Sizing
Lazy Load if Possible
Only download Video when displayed
Strip audio if silent
Resize Videos for Mobile
Audit 3rd Party Videos
Streaming: Start with lower bitrates to speed video playback
Streaming: Conservative bitrates *may* reduce stalls, but will lower quality
Images
Video

101. Performance Summary
1.Delivery Speed
1.CDNs
2.Reduce redirects
2.Content Delivery
1) Text Compression
2) Image Sizing, Quality and Format
3) Video Preload, Sizing, audio
4) Video Bitrate: Low to Start
5) Video Bitrate: conservative lowers quality

102. 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