Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Fast and Beautiful Apps:
Optimisations for When
It’s Just Too Slow
Doug Sillars
@DougSillars
QA Fest Kiev
September 21, 20...
Contact Me:
@DougSillars
Doug.Sillars@gmail.com
www.dougsillars.com
Doug Sillars
Freelance Developer Relations
Performance...
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
Pro...
What Is Fast?
https://commons.wikimedia.org/wiki/File:Lightning_Pritzerbe_01_(MK).jpg
Fast is a Human Perception
• 100ms:
• 1s:
• 10s:
https://www.nngroup.com/articles/response-times-3-important-limits/
Perce...
Fast is a Human Perception
In 1993:
Fast is a Human Perception
• 100ms:
• 1s:
• 10s:
Perceived as instantaneous
Limit for uninterrupted train of thought: Dela...
Fast is a Human Perception
• 100ms:
• 1s:
• 10s: 3-5s:
Perceived as instantaneous
Limit for uninterrupted train of thought...
Performance Studies
3s: 53% of Users Abandon Mobile Sites
500ms: 26% Frustration
8% Engagement
100ms: 1% Revenue Walmart &...
Profile & Benchmark Where You Are Today
Video Optimizer
developer.att.com/Video-Optimizer
WebPageTest
www.webpagetest.org
...
Charles Proxy
Video Optimizer
Video Optimizer
Video Optimizer
WebPageTest
WebPageTest
Profile & Benchmark Where You Are Today
Video Optimizer
developer.att.com/Video-Optimizer
WebPageTest
www.webpagetest.org
...
https://pixabay.com/en/office-business-accountant-620822/
https://www.maxpixel.net/Mobile-Cellphone-Hand-View-Mountains-Touchscreen-2590471
https://opensignal.com/reports/2018/02/state-of-lte
Network Coverage Can be Variable
https://pixabay.com/en/office-business-accountant-620822/
Profile & Benchmark Where You Are Today
Standardize your connection
Devices
Your Device is Not Your Customer’s Device
https://deviceatlas.com/blog/targeting-android-devices-sdk-os-version-statistics...
Older Phones are Drastically Slower
Websites load 20-50%
faster Year over year
https://arxiv.org/pdf/1603.02293.pdf
https://www.androidpolice.com/2018/06/29/alcatel-1x-review-android-go-huge-compromise-every-sense-including-price/
Profile & Benchmark Where You Are Today
Pick a mid-low range phone
Profile & Benchmark Where You Are Today
Pick a mid-low range phone
Test on Slower Networks
Is It Fast?
Is It Fast?
Is It Fast?
Set Goals
Rules for Speed
• Deliver Content Quickly
• Faster requests
• More Efficient
• Images and Video are Large Files
App Startup
JSON Headers: Request
App Startup
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...
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...
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...
App Startup
Content-Encoding
JSON File: 267 KB
Content-Encoding
JSON File: 267 KB
Content-Encoding: gzip
JSON.gz: 42 KB 85% savings
Content-Encoding: br
JSON.br: 30 KB 8...
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...
Cache- Control
App Startup
Thumbnail Images
Thumbnail Images
Thumbnail
470 KB
http://home.bt.com/news/news-extra/big-thumbs-up-for-trafalgar-squares-new-fourth-plinth-11364101681206
Thumbnail
470 KB
Little Thumbnail
470 KB
3 KB
Little Thumbnail
470 KB
3 KB
99.3%
smaller!!
Image Size
2.23 MB
4608 x 3456
Image Processing
2.3 MB
Image Processing
2.3 MB
16M pixels
Image Processing
2.3 MB
16M pixels 1M
pixels
Image Processing
2.3 MB
16M pixels 1M
pixels
Image Processing
2.3 MB
16M pixels 1M
pixels
Image Processing
1M
pixels
Download (s) Image Decode
(ms)
Desktop 14 78
Moto G4 14.2 218
Alcatel 1X 14.2 820
Optimising Your Images
• Size
• Quality
• Format
• Caching
• Lazy Loading
Optimising Your Images
• Size
• Quality
• Format
• Caching
• Lazy Loading
Image Size
220 KB
1400 x 1050
https://res.cloudinary.com/dougsillars/image/upload/w_1400/v1540978150/IMG_20181028_153301_o...
Image Size
78 KB
800 x 600
https://res.cloudinary.com/dougsillars/image/upload/w_800/v1540978150/IMG_20181028_1
53301_okeb...
What Sizes Are Optimal?
Check Your Analytics. See what screen sizes use your site the most,
and base images on these devic...
Responsive Images
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...
Optimising Your Images
• Size
• Quality
• Format
• Caching
• Lazy Loading
Image Quality
Lossy compression
Removes pixels from
image losing
resolution
Google
recommends 85%
for web
Image Quality
Lossy compression
Removes pixels from
image losing
resolution
Image Quality
SSIM
Quality adjusted to
limit of human
perception
Image Quality
SSIM
Quality adjusted to
limit of human
perception
Image Quality
180 KB
1400 x 1050
SSIM Quality
https://res.cloudinary.com/dougsillars/image/upload/w_1400,q_auto/v154097815...
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
Optimising Your Images
• Size
• Quality
• Format
• Caching
• Lazy Loading
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 j...
Top Image Format Size
HTTP Archive 11/2018
WebP Support
11/03/2018
Image Format
161 KB
1400 x 1050
SSIM Quality
WebP
https://res.cloudinary.com/dougsillars/image/upload/w_1400,q_auto,f_auto...
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
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
Top Image Format Size: SVG
HTTP Archive 11/2018
Scalable Vector Graphics (SVG)
Images drawn as shapes
infinitely scalable
XML - Can be added inline to HTML document
https...
Scalable Vector Graphics (SVG)
Images drawn as shapes
infinitely scalable
XML - Can be added inline to HTML document
https...
Optimising Your Images
• Size
• Quality
• Format
• Caching
• Lazy Loading
Scalable Vector Graphics (SVG)
Scalable Vector Graphics (SVG)
Scalable Vector Graphics (SVG)
KB
Original 946
Optimized 1
Scalable Vector Graphics (SVG)
KB
Original 946
Optimized 1
Scalable Vector Graphics (SVG)
KB
Original 946
Optimized 1
GZip 687 bytes
Scalable Vector Graphics (SVG)
KB
Original 946
Optimized 1
GZip 687 bytes
Brotli 525 bytes
Scalable Vector Graphics (SVG)
KB
Original 946
Optimized 1
GZip 687 bytes
Brotli 525 bytes
Scalable Vector Graphics (SVG)
<style >
.svgorange {
filter: invert(.5) sepia(1)
saturate(5) hue-rotate(5deg);
}
</style>
...
Scalable Vector Graphics (SVG)
Caching
Caching
Caching
768 x 558
61 KB
768 x 480
31 KB
Optimising Your Images
• Size
• Quality
• Format
• Caching
• Lazy Loading
Lazy Loading
Lazy Loading
Lazy Loading: Experiments
Lazy Loading: Experiments
Optimising Your Images
• Size
• Quality
• Format
• Caching
• Lazy Loading – SVG Previews
Preview Images
Lazy Loading: Experiments
Optimizing Content Delivery
Preview Images
https://github.com/technopagan/sqip
Animated GIFs
Original MP4
1.4 MB
Animated GIFs
Animated GIFs
Animated GIF
3.8 MB
270% larger
Animated GIFs
Animated GIFs
MP4: 256 colors
247KB
93% smaller
Animated GIFs
Video Tags:
<video loop autoplay muted playsinline controls = "false” src="goats.mp4”/>
Video is not pre-loa...
Animated GIFs
Security – Leaking info to 3rd parties
• https://medium.com/free-code-camp/local-sheriff-watching-them-watching-us-
5eacf3...
Security – Leaking info to 3rd parties
• https://medium.com/free-code-camp/local-sheriff-watching-them-watching-us-
5eacf3...
Addendum: What Are Your Customers Saying?
Addendum: Lite Mode: Save-Data
Save-Data: on
Addendum: Lite Mode: Save-Data
Addendum: Save-Data
Addendum: Save-Data
Addendum: Save-Data
Addendum: Save-Data
q_auto -> q_auto:eco
180KB -> 135 KB
https://res.cloudinary.com/dougsillars/image/upload/w_1400,q_auto...
Addendum 2: Network Info
Addendum 2: Network Info
// Network type that browser uses
navigator.connection.type;
// Effective bandwidth estimate
navi...
Addendum 2: Network Info
// Network type that browser uses
navigator.connection.type;
// Effective bandwidth estimate
navi...
Be Vigilant!
Continue Testing For Performance
Summary
Testing:
WebPageTest https://www.webpagetest.org
HttpArchive https://httparchive.org
Images:
ImageMagick https://w...
Conclusion
Images Can Be Beautiful AND Fast
Love Building with Video and Images?
Media Developer Expert
mde-comm@cloudinary.com
Become a
QA Fest 2019. Doug Sillars. It's just too Slow: Testing Mobile application performance
QA Fest 2019. Doug Sillars. It's just too Slow: Testing Mobile application performance
Prochain SlideShare
Chargement dans…5
×

QA Fest 2019. Doug Sillars. It's just too Slow: Testing Mobile application performance

135 vues

Publié le

Mobile apps and websites are now the predominant ways that users interact with brands. Research has shown that slow sites and apps lose customer engagement. Despite this, most mobile sites and apps have performance issues that can be easily resolved once diagnosed. In this talk, we will walk through steps to diagnose network performance bottlenecks in mobile services. We'll discuss real-world examples and how they were resolved. Attendees will leave this talk armed with the tools to test, diagnose and resolve the top network performance issues that affect mobile today.

Publié dans : Formation
  • Identifiez-vous pour voir les commentaires

  • Soyez le premier à aimer ceci

QA Fest 2019. Doug Sillars. It's just too Slow: Testing Mobile application performance

  1. 1. Fast and Beautiful Apps: Optimisations for When It’s Just Too Slow Doug Sillars @DougSillars QA Fest Kiev September 21, 2019
  2. 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. 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. 4. What Is Fast? https://commons.wikimedia.org/wiki/File:Lightning_Pritzerbe_01_(MK).jpg
  5. 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. 6. Fast is a Human Perception In 1993:
  7. 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. 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. 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. 10. Profile & Benchmark Where You Are Today Video Optimizer developer.att.com/Video-Optimizer WebPageTest www.webpagetest.org Charles Proxy www.charlesproxy.com
  11. 11. Charles Proxy
  12. 12. Video Optimizer
  13. 13. Video Optimizer
  14. 14. Video Optimizer
  15. 15. WebPageTest
  16. 16. WebPageTest
  17. 17. Profile & Benchmark Where You Are Today Video Optimizer developer.att.com/Video-Optimizer WebPageTest www.webpagetest.org Charles Proxy www.charlesproxy.com
  18. 18. https://pixabay.com/en/office-business-accountant-620822/
  19. 19. https://www.maxpixel.net/Mobile-Cellphone-Hand-View-Mountains-Touchscreen-2590471
  20. 20. https://opensignal.com/reports/2018/02/state-of-lte
  21. 21. Network Coverage Can be Variable
  22. 22. https://pixabay.com/en/office-business-accountant-620822/
  23. 23. Profile & Benchmark Where You Are Today Standardize your connection
  24. 24. Devices
  25. 25. Your Device is Not Your Customer’s Device https://deviceatlas.com/blog/targeting-android-devices-sdk-os-version-statistics#screensize
  26. 26. Older Phones are Drastically Slower Websites load 20-50% faster Year over year https://arxiv.org/pdf/1603.02293.pdf
  27. 27. https://www.androidpolice.com/2018/06/29/alcatel-1x-review-android-go-huge-compromise-every-sense-including-price/
  28. 28. Profile & Benchmark Where You Are Today Pick a mid-low range phone
  29. 29. Profile & Benchmark Where You Are Today Pick a mid-low range phone Test on Slower Networks
  30. 30. Is It Fast?
  31. 31. Is It Fast?
  32. 32. Is It Fast?
  33. 33. Set Goals
  34. 34. Rules for Speed • Deliver Content Quickly • Faster requests • More Efficient • Images and Video are Large Files
  35. 35. App Startup
  36. 36. JSON Headers: Request
  37. 37. App Startup
  38. 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. 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. 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. 41. App Startup
  42. 42. Content-Encoding JSON File: 267 KB
  43. 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. 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. 45. Cache- Control
  46. 46. App Startup
  47. 47. Thumbnail Images
  48. 48. Thumbnail Images
  49. 49. Thumbnail 470 KB http://home.bt.com/news/news-extra/big-thumbs-up-for-trafalgar-squares-new-fourth-plinth-11364101681206
  50. 50. Thumbnail 470 KB
  51. 51. Little Thumbnail 470 KB 3 KB
  52. 52. Little Thumbnail 470 KB 3 KB 99.3% smaller!!
  53. 53. Image Size 2.23 MB 4608 x 3456
  54. 54. Image Processing 2.3 MB
  55. 55. Image Processing 2.3 MB 16M pixels
  56. 56. Image Processing 2.3 MB 16M pixels 1M pixels
  57. 57. Image Processing 2.3 MB 16M pixels 1M pixels
  58. 58. Image Processing 2.3 MB 16M pixels 1M pixels
  59. 59. Image Processing 1M pixels Download (s) Image Decode (ms) Desktop 14 78 Moto G4 14.2 218 Alcatel 1X 14.2 820
  60. 60. Optimising Your Images • Size • Quality • Format • Caching • Lazy Loading
  61. 61. Optimising Your Images • Size • Quality • Format • Caching • Lazy Loading
  62. 62. Image Size 220 KB 1400 x 1050 https://res.cloudinary.com/dougsillars/image/upload/w_1400/v1540978150/IMG_20181028_153301_okeb2b.jpg
  63. 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. 64. What Sizes Are Optimal? Check Your Analytics. See what screen sizes use your site the most, and base images on these devices
  65. 65. Responsive Images
  66. 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. 67. Optimising Your Images • Size • Quality • Format • Caching • Lazy Loading
  68. 68. Image Quality Lossy compression Removes pixels from image losing resolution Google recommends 85% for web
  69. 69. Image Quality Lossy compression Removes pixels from image losing resolution
  70. 70. Image Quality SSIM Quality adjusted to limit of human perception
  71. 71. Image Quality SSIM Quality adjusted to limit of human perception
  72. 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. 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. 74. Optimising Your Images • Size • Quality • Format • Caching • Lazy Loading
  75. 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. 76. Top Image Format Size HTTP Archive 11/2018
  77. 77. WebP Support 11/03/2018
  78. 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. 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. 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. 81. Top Image Format Size: SVG HTTP Archive 11/2018
  82. 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. 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. 84. Optimising Your Images • Size • Quality • Format • Caching • Lazy Loading
  85. 85. Scalable Vector Graphics (SVG)
  86. 86. Scalable Vector Graphics (SVG)
  87. 87. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1
  88. 88. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1
  89. 89. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1 GZip 687 bytes
  90. 90. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1 GZip 687 bytes Brotli 525 bytes
  91. 91. Scalable Vector Graphics (SVG) KB Original 946 Optimized 1 GZip 687 bytes Brotli 525 bytes
  92. 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. 93. Scalable Vector Graphics (SVG)
  94. 94. Caching
  95. 95. Caching
  96. 96. Caching 768 x 558 61 KB 768 x 480 31 KB
  97. 97. Optimising Your Images • Size • Quality • Format • Caching • Lazy Loading
  98. 98. Lazy Loading
  99. 99. Lazy Loading
  100. 100. Lazy Loading: Experiments
  101. 101. Lazy Loading: Experiments
  102. 102. Optimising Your Images • Size • Quality • Format • Caching • Lazy Loading – SVG Previews
  103. 103. Preview Images
  104. 104. Lazy Loading: Experiments
  105. 105. Optimizing Content Delivery Preview Images https://github.com/technopagan/sqip
  106. 106. Animated GIFs Original MP4 1.4 MB
  107. 107. Animated GIFs
  108. 108. Animated GIFs Animated GIF 3.8 MB 270% larger
  109. 109. Animated GIFs
  110. 110. Animated GIFs MP4: 256 colors 247KB 93% smaller
  111. 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. 112. Animated GIFs
  113. 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. 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. 115. Addendum: What Are Your Customers Saying?
  116. 116. Addendum: Lite Mode: Save-Data Save-Data: on
  117. 117. Addendum: Lite Mode: Save-Data
  118. 118. Addendum: Save-Data
  119. 119. Addendum: Save-Data
  120. 120. Addendum: Save-Data
  121. 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. 122. Addendum 2: Network Info
  123. 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. 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. 125. Be Vigilant!
  126. 126. Continue Testing For Performance
  127. 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. 128. Conclusion Images Can Be Beautiful AND Fast
  129. 129. Love Building with Video and Images? Media Developer Expert mde-comm@cloudinary.com Become a

×