Presented - Nantes GDG, January 2019

1. Fast and Beautiful Images:
Optimisations for When
It’s Just Too Slow
Doug Sillars
@DougSillars
GDG Nantes
January 2019

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. What Is Fast?
https://commons.wikimedia.org/wiki/File:Lightning_Pritzerbe_01_(MK).jpg

6. Fast is a Human Perception
• 100ms:
• 1s:
• 10s:
https://www.nngroup.com/articles/response-times-3-important-limits/
Perceived as instantaneous
Limit for uninterrupted train of thought: Delay is
noticed, but generally accepted
Limit for keeping focus

7. Fast is a Human Perception
In 1993:

8. Fast is a Human Perception
• 100ms:
• 1s:
• 10s:
Perceived as instantaneous
Limit for uninterrupted train of thought: Delay is noticed,
but generally accepted
Limit for keeping focus
65ms: ranged from 34-164ms
https://calendar.perfplanet.com/2018/magic-numbers/

9. Fast is a Human Perception
• 100ms:
• 1s:
• 10s: 3-5s:
Perceived as instantaneous
Limit for uninterrupted train of thought: Delay is noticed,
but generally accepted
Limit for keeping focus
65ms: ranged from 34-164ms

10. Performance Studies
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

11. Profile & Benchmark Where You Are Today
Video Optimizer
developer.att.com/Video-Optimizer
WebPageTest
www.webpagetest.org
Charles Proxy
www.charlesproxy.com

12. Charles Proxy

13. Video Optimizer

14. Video Optimizer

15. Video Optimizer

16. WebPageTest

17. WebPageTest

18. Profile & Benchmark Where You Are Today
Video Optimizer
developer.att.com/Video-Optimizer
WebPageTest
www.webpagetest.org
Charles Proxy
www.charlesproxy.com

19. https://pixabay.com/en/office-business-accountant-620822/

20. https://www.maxpixel.net/Mobile-Cellphone-Hand-View-Mountains-Touchscreen-2590471

21. https://opensignal.com/reports/2018/02/state-of-lte

22. Network Coverage Can be Variable

23. https://pixabay.com/en/office-business-accountant-620822/

24. Profile & Benchmark Where You Are Today
Standardize your connection

25. Devices

26. Your Device is Not Your Customer’s Device
https://deviceatlas.com/blog/targeting-android-devices-sdk-os-version-statistics#screensize

27. Older Phones are Drastically Slower
Websites load 20-50%
faster Year over year
https://arxiv.org/pdf/1603.02293.pdf

28. https://www.androidpolice.com/2018/06/29/alcatel-1x-review-android-go-huge-compromise-every-sense-including-price/

30. Profile & Benchmark Where You Are Today
Pick a mid-low range phone

31. Profile & Benchmark Where You Are Today
Pick a mid-low range phone
Test on Slower Networks

32. Is It Fast?

33. Is It Fast?

34. Is It Fast?

35. Set Goals

36. Rules for Speed
• Deliver Content Quickly
• Faster requests
• More Efficient
• Images and Video are Large Files

37. App Startup

38. JSON Headers: Request

39. App Startup

40. JSON Headers:Response
HTTP/1.1 200 OK
Date Sun, 28 Oct 2018 09:26:24 GMT
Server Apache
X-Robots-Tag noindex
X-Content-Type-Options nosniff
Access-Control-Expose-Headers X-WP-Total, X-WP-TotalPages
Access-Control-Allow-Headers Authorization, Content-Type
X-WP-Total 5222
X-WP-TotalPages 523
Link ; rel="next"
Allow GET
Keep-Alive timeout=5, max=100
Transfer-Encoding chunked
Content-Type application/json; charset=UTF-8
Connection keep-alive

41. JSON Headers:Response
HTTP/1.1 200 OK
Date Sun, 28 Oct 2018 09:26:24 GMT
Server Apache
X-Robots-Tag noindex
X-Content-Type-Options nosniff
Access-Control-Expose-Headers X-WP-Total, X-WP-TotalPages
Access-Control-Allow-Headers Authorization, Content-Type
X-WP-Total 5222
X-WP-TotalPages 523
Link ; rel="next"
Allow GET
Keep-Alive timeout=5, max=100
Transfer-Encoding chunked
Content-Type application/json; charset=UTF-8
Connection keep-alive
Content-Encoding:
Cache-Control:

42. JSON Headers:Response
HTTP/1.1 200 OK
Date Sun, 28 Oct 2018 09:26:24 GMT
Server Apache
X-Robots-Tag noindex
X-Content-Type-Options nosniff
Access-Control-Expose-Headers X-WP-Total, X-WP-TotalPages
Access-Control-Allow-Headers Authorization, Content-Type
X-WP-Total 5222
X-WP-TotalPages 523
Link ; rel="next"
Allow GET
Keep-Alive timeout=5, max=100
Transfer-Encoding chunked
Content-Type application/json; charset=UTF-8
Connection keep-alive
Content-Encoding:
Cache-Control:

43. App Startup

44. Content-Encoding
JSON File: 267 KB

45. Content-Encoding
JSON File: 267 KB
Content-Encoding: gzip
JSON.gz: 42 KB 85% savings
Content-Encoding: br
JSON.br: 30 KB 89% savings

46. JSON Headers:Response
HTTP/1.1 200 OK
Date Sun, 28 Oct 2018 09:26:24 GMT
Server Apache
X-Robots-Tag noindex
X-Content-Type-Options nosniff
Access-Control-Expose-Headers X-WP-Total, X-WP-TotalPages
Access-Control-Allow-Headers Authorization, Content-Type
X-WP-Total 5222
X-WP-TotalPages 523
Link ; rel="next"
Allow GET
Keep-Alive timeout=5, max=100
Transfer-Encoding chunked
Content-Type application/json; charset=UTF-8
Connection keep-alive
Content-Encoding:
Cache-Control:

47. Cache- Control

48. App Startup

49. Thumbnail Images

50. Thumbnail Images

51. Thumbnail
470 KB
http://home.bt.com/news/news-extra/big-thumbs-up-for-trafalgar-squares-new-fourth-plinth-11364101681206

52. Thumbnail
470 KB

53. Little Thumbnail
470 KB
3 KB

54. Little Thumbnail
470 KB
3 KB
99.3%
smaller!!

55. Image Size
2.23 MB
4608 x 3456

56. Image Processing
2.3 MB

57. Image Processing
2.3 MB
16M pixels

58. Image Processing
2.3 MB
16M pixels 1M
pixels

59. Image Processing
2.3 MB
16M pixels 1M
pixels

60. Image Processing
2.3 MB
16M pixels 1M
pixels

61. Image Processing
1M
pixels
Download (s) Image Decode
(ms)
Desktop 14 78
Moto G4 14.2 218
Alcatel 1X 14.2 820

62. Optimising Your Images
• Size
• Quality
• Format
• Caching
• Lazy Loading

63. Optimising Your Images
• Size
• Quality
• Format
• Caching
• Lazy Loading

64. Image Size
220 KB
1400 x 1050
https://res.cloudinary.com/dougsillars/image/upload/w_1400/v1540978150/IMG_20181028_153301_okeb2b.jpg

65. Image Size
78 KB
800 x 600
https://res.cloudinary.com/dougsillars/image/upload/w_800/v1540978150/IMG_20181028_1
53301_okeb2b.jpg

66. What Sizes Are Optimal?
Check Your Analytics. See what screen sizes use your site the most,
and base images on these devices

67. Responsive Images

68. Image Processing (correctly sized)
1.5M
pixels
First Load (s) Image Decode
(ms)
Desktop 2.7 26
Moto G4 3.0 73
Alcatel 1X 3.1 123

69. Optimising Your Images
• Size
• Quality
• Format
• Caching
• Lazy Loading

70. Image Quality
Lossy compression
Removes pixels from
image losing
resolution
Google
recommends 85%
for web

71. Image Quality
Lossy compression
Removes pixels from
image losing
resolution

72. Image Quality
SSIM
Quality adjusted to
limit of human
perception

73. Image Quality
SSIM
Quality adjusted to
limit of human
perception

74. Image Quality
180 KB
1400 x 1050
SSIM Quality
https://res.cloudinary.com/dougsillars/image/upload/w_1400,q_auto/v1540978150/IMG_20181028_153301_okeb2b.jpg

75. Image Quality - SSIM
1.5M
pixels
First Load (s) Image Decode
(ms)
Desktop 2.7 35
Moto G4 2.8 123
Alcatel 1X 2.9 342

76. Optimising Your Images
• Size
• Quality
• Format
• Caching
• Lazy Loading

77. Top Image Formats
jpg, 17,047,941
png, 13,126,543
, 11,795,123
gif, 5,053,385
svg, 1,687,541
ico, 1,076,035
php, 644,839 jpeg, 442,705
webp, 159,089
aspx, 150,792
cnt
HTTP Archive 11/2018

78. Top Image Format Size
HTTP Archive 11/2018

79. WebP Support
11/03/2018

80. Image Format
161 KB
1400 x 1050
SSIM Quality
WebP
https://res.cloudinary.com/dougsillars/image/upload/w_1400,q_auto,f_auto/v1540978150/IMG_20181028_153301_okeb2b.j

81. Image Quality - WebP
1.5M
pixels
First Load (s) Image Decode (ms)
Desktop 2.6 42
Moto G4 2.7 153
Alcatel 1X 2.8 170

82. Fast and Beautiful:
1.5M
pixels
0
2
4
6
8
10
12
14
16
18
0
500
1000
1500
2000
2500
full resize q_auto webp

83. Top Image Format Size: SVG
HTTP Archive 11/2018

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

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

86. Scalable Vector Graphics (SVG)

87. Scalable Vector Graphics (SVG)

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

89. Optimising Your Images
• Size
• Quality
• Format
• Caching
• Lazy Loading

90. Caching

91. Caching

92. Caching
768 x 558
61 KB
768 x 480
31 KB

93. Optimising Your Images
• Size
• Quality
• Format
• Caching
• Lazy Loading

94. Lazy Loading

95. Lazy Loading

96. Lazy Loading: Experiments

97. Lazy Loading: Experiments

98. Optimising Your Images
• Size
• Quality
• Format
• Caching
• Lazy Loading – SVG Previews

99. Preview Images

100. Lazy Loading: Experiments

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

102. Animated GIFs
Original MP4
1.4 MB

103. Animated GIFs

104. Animated GIFs
Animated GIF
3.8 MB
270% larger

105. Animated GIFs

106. Animated GIFs
MP4: 256 colors
247KB
93% smaller

107. Animated GIFs
Video Tags:
<video loop autoplay muted playsinline controls = "false” src="goats.mp4”/>
Video is not pre-loaded, will be last to download
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/

108. Animated GIFs

109. Addendum: What Are Your Customers Saying?

110. Addendum: Save-Data
Save-Data: on

111. Addendum: Save-Data

112. Addendum: Save-Data

113. Addendum: Save-Data

114. Addendum: Save-Data
q_auto -> q_auto:eco
180KB -> 135 KB
https://res.cloudinary.com/dougsillars/image/upload/w_1400,q_auto/v1540978150/IMG_20181028_153301_okeb2b.jpg

115. Addendum 2: Network Info

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

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

118. Be Vigilant!

119. Continue Testing For Performance

120. Summary
Testing:
WebPageTest https://www.webpagetest.org
HttpArchive https://httparchive.org
Images:
ImageMagick https://www.imagemagick.org
SSIM https://github.com/technopagan/cjpeg-dssim
LazySizes https://github.com/aFarkas/lazysizes
Responsive Breakpoints http://www.responsivebreakpoints.com/
Cloudinary https://www.cloudinary.com
Tooling

121. Conclusion
Images Can Be Beautiful AND Fast