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. Large Downloads Induce Delays in Rendering
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. Images make up 50% of Web Content
HTTPArchive mobile websites 15/02/18
28. Image Formats – Average Size
HTTPArchive mobile websites 15/02/18
29. Image Formats – Average Size
HTTPArchive mobile websites 15/02/18
30. 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
31. 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
76. Animated GIFs
“The Graphics Interchange Format is not
intended as a platform for animation, even
though it can be done in a limited way.”
-GIF89a Specification
https://www.w3.org/Graphics/GIF/spec-gif89a.txt
89. 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.
112. Addendum 2: Network Info
// Network type that browser uses
navigator.connection.type;
// Effective bandwidth estimate
navigator.connection.downlink
// Effective round-trip time estimate
navigator.connection.rtt
// Upper bound on the downlink speed of the first network hop
navigator.connection.downlinkMax
113. Addendum 2: Network Info
// Network type that browser uses
navigator.connection.type;
// Effective bandwidth estimate
navigator.connection.downlink
// Effective round-trip time estimate
navigator.connection.rtt
// Upper bound on the downlink speed of the first network hop
navigator.connection.downlinkMax
500 KBPS
114. Addendum 3: Base 64 Encoding
Images embedded as Base64 in your HTML/CSS/JS
• Fewer Requests
• Images Now Block Rendering of Page
• Images are 20-30% larger
• Caching is limited
• Difficult to reference more than once
https://calendar.perfplanet.com/2018/performance-anti-patterns-base64-encoding/
115. Addendum 3: Base 64 Encoding
• 91KB CSS Shared as University Template
• 48KB is SVG
• Never Appears on Any Page
Departments, colleges and other units of
the University of Nebraska–Lincoln should
use the Nebraska N as a main identifier,
not the University seal, on all publications,
invitations, websites and other electronic
media.
https://unlcms.unl.edu/wdn/templates_4.1/css/all.css?dep=4.1.36
116. Addendum 3: Base 64 Encoding
https://cdn.glowing.com/generated/css/base.474240e8485dbff13fd3652d24ef83bc.css
117. Conclusion
Optimize Image:
Quality
Format
Sizing
Lazy Load if Possible
aGIFs to movies
No Base64 Encoded Images
Monitor Customer’s headers
Images Video
Optimize Image:
device screen (DPR?)
only download if displayed
Bitrate
Streaming is more efficient
Video can be expensive
120. Love Building with Video and Images?
Media Developer Expert
mde-comm@cloudinary.com
Become a
121. Addendum 3: Base64 Encoded Images
Fewer Requests *can* be better
Images in CSS place Images in the Critical Rendering path
Hardcoding images as text increases size by 20-30%