Presented January 30, 2019

1. It’s Just Too Slow:
Mobile Application Performance
Testing
Doug Sillars
@DougSillars
MOT Edinburgh
January 30, 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. Testing For Fast
Benchmark

12. Testing For Fast
Benchmark
Application Lifecycle

13. Testing For Fast
Benchmark Identify Fixes
Application Lifecycle

14. Testing For Fast
Benchmark
Make
Optimisations
Identify Fixes
Application Lifecycle

15. Testing For Fast
Benchmark
Make
Optimisations
Test
Identify Fixes
Application Lifecycle

16. Testing For Fast
Benchmark
Make
Optimisations
Test
Identify Fixes
Launch fixes
Application Lifecycle

17. Testing For Fast
Benchmark
Make
Optimisations
Test
Identify Fixes
Launch fixes
Application Lifecycle

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

19. Charles Proxy

20. Video Optimizer

21. Video Optimizer

22. Video Optimizer

23. WebPageTest

24. WebPageTest

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

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

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

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

29. Network Coverage Can be Variable

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

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

32. Devices

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

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

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

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

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

39. Is It Fast?

40. Is It Fast?

41. Is It Fast?

42. Set Goals

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

44. App Startup

45. JSON Headers: Request

46. App Startup

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

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

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

50. App Startup

51. Content-Encoding
JSON File: 267 KB

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

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

54. Cache- Control

55. App Startup

56. Thumbnail Images

57. Thumbnail Images

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

59. Thumbnail
470 KB

60. Little Thumbnail
470 KB
3 KB

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

62. Image Size
2.23 MB
4608 x 3456

63. Image Processing
2.3 MB

64. Image Processing
2.3 MB
16M pixels

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

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

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

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

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

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

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

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

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

74. Responsive Images

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

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

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

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

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

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

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

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

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

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

85. Top Image Format Size
HTTP Archive 11/2018

86. WebP Support
11/03/2018

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

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

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

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

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

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

93. Scalable Vector Graphics (SVG)

94. Scalable Vector Graphics (SVG)

95. Scalable Vector Graphics (SVG)
KB
Original 946
Optimized 1

96. Scalable Vector Graphics (SVG)
KB
Original 946
Optimized 1

97. Scalable Vector Graphics (SVG)
KB
Original 946
Optimized 1
GZip 687 bytes

98. Scalable Vector Graphics (SVG)
KB
Original 946
Optimized 1
GZip 687 bytes
Brotli 525 bytes

99. Scalable Vector Graphics (SVG)
KB
Original 946
Optimized 1
GZip 687 bytes
Brotli 525 bytes

100. Scalable Vector Graphics (SVG)
<style >
.svgorange {
filter: invert(.5) sepia(1)
saturate(5) hue-rotate(5deg);
}
</style>
<img class="svgorange" src ="map-
marker-circle.svg">
https://medium.com/@union_io/swapping-fill-color-on-image-tag-svgs-using-css-filters-fa4818bf7ec6

101. Scalable Vector Graphics (SVG)

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

103. Caching

104. Caching

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

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

107. Lazy Loading

108. Lazy Loading

109. Lazy Loading: Experiments

110. Lazy Loading: Experiments

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

112. Preview Images

113. Lazy Loading: Experiments

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

115. Animated GIFs
Original MP4
1.4 MB

116. Animated GIFs

117. Animated GIFs
Animated GIF
3.8 MB
270% larger

118. Animated GIFs

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

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

121. Animated GIFs

122. Addendum: What Are Your Customers Saying?

123. Addendum: Save-Data
Save-Data: on

124. Addendum: Save-Data

125. Addendum: Save-Data

126. Addendum: Save-Data

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

128. Addendum 2: Network Info

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

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

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

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

133. Addendum 3: Base 64 Encoding
https://cdn.glowing.com/generated/css/base.474240e8485dbff13fd3652d24ef83bc.css

134. Be Vigilant!

135. Continue Testing For Performance

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

137. Conclusion
Images Can Be Beautiful AND Fast