Its timetostopstalling limerick

It’s Time to Stop Stalling:
Doug Sillars
Limerick Games and AI
July 12, 2018
Mobile/Web Performance and You
@DougSillars

Contact Me:
@DougSillars
Doug.Sillars@gmail.com
www.dougsillars.com
Doug Sillars
https://www.slideshare.net/dougsillars/
Freelance Developer Relations
Performance Audits: Web/Native
Workshops:
Performance/Images/Video

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: HTTP2

1.Delivery Speed: Redirects

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

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

Images

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

https://commons.wikimedia.org/wiki/User:Quibik/Cleaning_up_SVG_files_manually

https://github.com/google/brotli

Images
2560 px
1440 px
1555x1200 pixels (1.8 Mpixels)

Image Pixel Count
2560 px
1440 px
720x556 pixels (0.4 Mpixels)

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,f_auto,q_auto,r_0,
w_720/v1517843228/bigFrankSinatraImage_c1mnff.jpg
WebP: 84 KB
94.6% savings!

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

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

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

Images
A random sample of 1,000 Twitter
images:
67% had room for quality and/or
format optimization
(q_auto, f_auto)
https://dougsillars.com/2018/02/27/twitter-and-facebook-profile-images-already-optimized-or-is-
there-room-for-improvement/

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

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

Images Below the Fold
https://www.nngroup.com/articles/scrolling-and-attention/
https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/

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

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

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

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

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

Video Startup
Conviva creen_Streaming_TV_Census_Report_FINAL.pdf
Q1 2018:

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

Video Startup
16.9B total Video plays
400M Fail to Start
2B Abandoned before Start

Video Startup
Average Video Start Time:
N. America: 4.91s
Asia: 3.00s
Europe: 4.30s

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

Preload When It Makes Sense
Ad Playback Video
Download

Preload When It Makes Sense
Ad Playback
Video
Download

...be Careful with Preload
Video Tags:
<video
preload = “auto” | “metadata” | “none”
autoplay
muted
loop
controls
height
width
poster
src="goats.mp4”/>

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

…be Careful with Preload
Preload = “auto”

…be Careful with Preload
Preload = “metadata”

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

Video Streaming
Example Manifest file:

Optimizing Video Delivery
Video Streaming
Manifest File:
List of Available
Streams
Player selects
8.5 MBPS stream Stream Manifest:
Buffer takes a long
time to fill
Video Does Not Play
Player chooses 192
KBPS bitrate
Buffer Fills Quickly
Video Plays

192 KBPS
Video Plays
Video Streaming
Player can estimate
network throughput 3.5 MBPS
Video

Start- Up Delay
Can We Do Better?
Example Manifest file:

Video Plays
Video Streaming
Manifest File:
List of Available
Streams
Player selects
192 KBPS stream Stream Manifest:
Buffer Fills Quickly
Player can estimate
network throughput
3.5 MBPS
Video

Video Plays
Goldilocks Example
Manifest File:
List of Available
Streams
Player selects
3.5 MBPS stream Stream Manifest:
Buffer Fills.. Not too
fast.. Not too slow

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

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

Video Startup “In the Wild”
75%
20%
5%
https://dougsillars.com/2018/03/29/streaming-video-whats-on-the-web-today/

Video Streaming
Large jumps in
throughput
can lead to
streaming
issues

Video Streaming
Large throughput gaps can lead to
many stream changes – that can lead
to stalls

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

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 limerick

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Its timetostopstalling limerick

Similar to Its timetostopstalling limerick (15)

More from Doug Sillars

More from Doug Sillars (20)

Recently uploaded

Recently uploaded (20)

Its timetostopstalling limerick

Editor's Notes