1.
Fast and Beautiful Apps:
Optimisations for When
It’s Just Too Slow
Doug Sillars
@DougSillars
QA Fest Kiev
September 21, 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/ML/AR
http://bit.ly/HighPerformanceAndroidApps

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

4.
What Is Fast?
https://commons.wikimedia.org/wiki/File:Lightning_Pritzerbe_01_(MK).jpg

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

6.
Fast is a Human Perception
In 1993:

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

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

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

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

11.
Charles Proxy

12.
Video Optimizer

13.
Video Optimizer

14.
Video Optimizer

15.
WebPageTest

16.
WebPageTest

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

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

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

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

21.
Network Coverage Can be Variable

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

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

24.
Devices

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

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

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

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

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

30.
Is It Fast?

31.
Is It Fast?

32.
Is It Fast?

33.
Set Goals

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

35.
App Startup

36.
JSON Headers: Request

37.
App Startup

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

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

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
Content-Encoding:
Cache-Control:

41.
App Startup

42.
Content-Encoding
JSON File: 267 KB

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

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

45.
Cache- Control

46.
App Startup

47.
Thumbnail Images

48.
Thumbnail Images

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

50.
Thumbnail
470 KB

51.
Little Thumbnail
470 KB
3 KB

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

53.
Image Size
2.23 MB
4608 x 3456

54.
Image Processing
2.3 MB

55.
Image Processing
2.3 MB
16M pixels

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

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

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

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

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

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

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

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

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

65.
Responsive Images

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

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

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

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

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

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

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

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

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

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

76.
Top Image Format Size
HTTP Archive 11/2018

77.
WebP Support
11/03/2018

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

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

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

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

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

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

85.
Scalable Vector Graphics (SVG)

86.
Scalable Vector Graphics (SVG)

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

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

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

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

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

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

93.
Scalable Vector Graphics (SVG)

94.
Caching

95.
Caching

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

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

98.
Lazy Loading

99.
Lazy Loading

100.
Lazy Loading: Experiments

101.
Lazy Loading: Experiments

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

103.
Preview Images

104.
Lazy Loading: Experiments

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

106.
Animated GIFs
Original MP4
1.4 MB

107.
Animated GIFs

108.
Animated GIFs
Animated GIF
3.8 MB
270% larger

109.
Animated GIFs

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

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

112.
Animated GIFs

113.
Security – Leaking info to 3rd parties
• https://medium.com/free-code-camp/local-sheriff-watching-them-watching-us-
5eacf3eb00ca
Are your URLs to 3rd parties leaking PII?

114.
Security – Leaking info to 3rd parties
• https://medium.com/free-code-camp/local-sheriff-watching-them-watching-us-
5eacf3eb00ca
Are your URLs to 3rd parties leaking PII?

115.
Addendum: What Are Your Customers Saying?

116.
Addendum: Lite Mode: Save-Data
Save-Data: on

117.
Addendum: Lite Mode: Save-Data

118.
Addendum: Save-Data

119.
Addendum: Save-Data

120.
Addendum: Save-Data

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

122.
Addendum 2: Network Info

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

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

125.
Be Vigilant!

126.
Continue Testing For Performance

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

128.
Conclusion
Images Can Be Beautiful AND Fast

129.
Love Building with Video and Images?
Media Developer Expert
mde-comm@cloudinary.com
Become a