1.
It’s Time to Stop Stalling:
Doug Sillars
GDG Bruxelles
May 31, 2018
Mobile/Web Performance and You
@DougSillars

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

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

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

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

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

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

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

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

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

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

12.
WebPageTest Results

13.
Optimizing Content Delivery
1.Delivery Speed

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

15.
Optimizing Content Delivery
1.Delivery Speed

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

17.
Optimizing Content Delivery
1.Delivery Speed: Redirects

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

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.
Image Compression Use “In The Wild”
442,000 mobile sites
Analyzed 3/15/18

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

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

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

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

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.
Optimizing Content Delivery
Images
A random sample of 1,000 Twitter
images:
67% had room for optimization
(q_auto, f_auto)
Of 63,000 Twitter images, 1: 1000 >
50 KB (as high as 550KB)
https://dougsillars.com/2018/02/27/twitter-and-facebook-profile-images-already-optimized-or-is-
there-room-for-improvement/

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

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

41.
Optimizing Content Delivery
Preview Images

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

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

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

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

46.
Optimizing Content Delivery
Animated GIFs
Original MP4
1.4 MB

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

48.
Optimizing Content Delivery
Animated GIFs

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

50.
Optimizing Content Delivery
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/

51.
Optimizing Content Delivery

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

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

54.
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.
Video
<video Preload = “auto” src="goats.mp4" />
Best to use ”metadata” or “none”

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

57.
Optimizing Content Delivery
What Leads to Startup Delay?
#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=400000,RESOLUTION=480x270,sunflower270/index270.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=600000,RESOLUTION=640x360,sunflower360_600k/index360_600k.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1200000,RESOLUTION=640x360,sunflower360_1200k/index360_1200k.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=3500000,RESOLUTION=960x540,sunflower540/index540.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1280x720,sunflower720_5000k/index720_5000k.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=6500000,RESOLUTION=1280x720,sunflower720_6500k/index720_6500k.m3u8
Example Manifest file:

58.
Optimizing Content 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 immediately changes the
stream choice to 600KBPS

59.
Optimizing Content Delivery
Video Streaming: Test on Fast Wi-Fi

60.
Optimizing Content Delivery
What Leads to Startup Delay?
#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=400000,RESOLUTION=480x270,sunflower270/index270.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=600000,RESOLUTION=640x360,sunflower360_600k/index360_600k.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1200000,RESOLUTION=640x360,sunflower360_1200k/index360_1200k.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=3500000,RESOLUTION=960x540,sunflower540/index540.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1280x720,sunflower720_5000k/index720_5000k.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=6500000,RESOLUTION=1280x720,sunflower720_6500k/index720_6500k.m3u8
Example Manifest file:
8.5 MBPS is HIGH throughput for initial streaming
Best Practice: Pick middle throughput to balance startup time and quality

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

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

63.
Optimizing Content Delivery
Balancing the Network with Playback
Player uses available streams to balance download with playback

64.
Optimizing Content Delivery
Video Streaming
#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=400000,RESOLUTION=480x270,sunflower270/index270.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=600000,RESOLUTION=640x360,sunflower360_600k/index360_600k.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1200000,RESOLUTION=640x360,sunflower360_1200k/index360_1200k.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=3500000,RESOLUTION=960x540,sunflower540/index540.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1280x720,sunflower720_5000k/index720_5000k.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=6500000,RESOLUTION=1280x720,sunflower720_6500k/index720_6500k.m3u8

65.
Optimizing Content Delivery
Video Streaming
Large jumps in
throughput
can lead to
streaming
issues

66.
Optimizing Content Delivery
Video Streaming
Large throughput gaps can lead to
many stream changes – which can be
visible to user

67.
Optimizing Content Delivery
Video Streaming
#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=400000,RESOLUTION=480x270,sunflower270/index270.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=600000,RESOLUTION=640x360,sunflower360_600k/index360_600k.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1200000,RESOLUTION=640x360,sunflower360_1200k/index360_1200k.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=3500000,RESOLUTION=960x540,sunflower540/index540.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1280x720,sunflower720_5000k/index720_5000k.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=6500000,RESOLUTION=1280x720,sunflower720_6500k/index720_6500k.m3u8

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

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