Doug Sillars presented optimizations for delivering fast and beautiful images on mobile. The 4 key optimizations discussed were: 1) reducing image quality, 2) using optimized formats like WebP and SVG, 3) sizing images responsively, and 4) lazy loading images. Testing with sites showed these techniques reduced page load times by several seconds on average and data usage by over 1MB.
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
27. Image Formats – Average Size
HTTPArchive mobile websites 15/02/18
28. Image Formats – Average Size
HTTPArchive mobile websites 15/02/18
29. 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
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
83. 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
97. 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
98. 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
99. 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
100. 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
101. Addendum 3: Base 64 Encoding
https://cdn.glowing.com/generated/css/base.474240e8485dbff13fd3652d24ef83bc.css