Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Parisjs fastvideoandimages

400 views

Published on

Presented Aug 29, 2018

Published in: Technology
  • Be the first to comment

Parisjs fastvideoandimages

  1. 1. Delivering Beautiful and Fast Images and Video Doug Sillars @DougSillars Paris JS August 29, 2018
  2. 2. Contact Me: @DougSillars Doug.Sillars@gmail.com www.dougsillars.com Doug Sillars https://www.slideshare.net/dougsillars/ Freelance Developer Relations Performance Audits: Web/Native Workshops: Performance/Images/Video
  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. 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
  5. 5. Images & Video make up 75% of Web Content HTTPArchive mobile websites 15/02/18
  6. 6. 4 Simple Image Optimizations
  7. 7. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
  8. 8. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
  9. 9. 4 Simple Image Optimizations Httparchive.org Webpagetest.org
  10. 10. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
  11. 11. Image Quality Lossy Image size is reduced by removing pixel information https://developers.google.com/speed/docs/insights/OptimizeImages
  12. 12. Image Quality magick -quality 85 riga.jpg riga85.jpg http://res.cloudinary.com/dougsillars/image/upload/q_85/v1520504964/IMG_20180301_114117_tzasan.jpg Lighthouse: Recommends 85% quality on all images https://developers.google.com/speed/docs/insights/OptimizeImages
  13. 13. Image Quality Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
  14. 14. Image Quality Use “In The Wild” Median Savings (50th percentile): • 2.83 seconds faster page load • 419KB less data
  15. 15. 100% 3.6 MB http://res.cloudinary.com/dougsillars/image/upload/v1529005982/IMG_20180614_184507_ssuk1i.jpg
  16. 16. 85% 1.87 MB q_85 http://res.cloudinary.com/dougsillars/image/upload/q_85/v1529005982/IMG_20180614_184507_ssuk1i.jpg
  17. 17. 50% 914 KB q_50 http://res.cloudinary.com/dougsillars/image/upload/q_50/v1529005982/IMG_20180614_184507_ssuk1i.jpg
  18. 18. 20% 513 KB q_20 http://res.cloudinary.com/dougsillars/image/upload/q_20/v1529005982/IMG_20180614_184507_ssuk1i.jpg
  19. 19. Graphing the Results https://developers.google.com/speed/docs/insights/OptimizeImages
  20. 20. Graphing the Results https://developers.google.com/speed/docs/insights/OptimizeImages
  21. 21. Automate Quality vs. File Size • Butteraugli • SSIM: Structural SIMilarity https://github.com/technopagan/cjpeg-dssim cjpeg-dssim jpegoptim riga.jpg http://res.cloudinary.com/dougsillars/image/upload/q_auto/v1529005982/IMG_20180614_184507_ssuk1i.jpg
  22. 22. SSIM 1.46 MB http://res.cloudinary.com/dougsillars/image/upload/q_auto/v1529005982/IMG_20180614_184507_ssuk1i.jpg
  23. 23. Graphing the Results https://developers.google.com/speed/docs/insights/OptimizeImages
  24. 24. Results: • Test Load on Motorola G4:
  25. 25. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
  26. 26. Image Formats – Average Size HTTPArchive mobile websites 15/02/18
  27. 27. Image Formats – Average Size HTTPArchive mobile websites 15/02/18
  28. 28. Scalable Vector Graphics (SVG)
  29. 29. Scalable Vector Graphics (SVG)
  30. 30. Scalable Vector Graphics (SVG) https://github.com/google/brotli
  31. 31. Image Formats – Average Size HTTPArchive mobile websites 15/02/18
  32. 32. File Format: WebP https://caniuse.com/#feat=webp
  33. 33. SSIM + WebP 986 KB http://res.cloudinary.com/dougsillars/image/upload/q_auto,f_auto/v1529005982/IMG_20180614_184507_
  34. 34. File Format: Web <picture> <source width = "100%" type="image/webp" srcset=”riga.webp"> <img width = "100%" src=”riga_cjpeg_dssim.jpg" alt=”Riga, Latvia"> </picture>
  35. 35. Image Format Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
  36. 36. Image Format Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
  37. 37. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
  38. 38. Image Sizing -
  39. 39. Image Sizing
  40. 40. Image Sizing -
  41. 41. Image Sizing 624 832 -
  42. 42. Image Sizing 624 832 12,979,000 pixels 519,000 pixels _________________ - 12,460,000 pixels
  43. 43. Image Sizing 624 832 12,979,000 pixels 519,000 pixels _________________ - 12,460,000 pixels
  44. 44. Image Sizing https://twitter.com/paulcalvano/status/928751141843808256
  45. 45. Image Sizing - Responsive Images: Generate a set of images 25 KB difference in size
  46. 46. Responsive Images 624 832 625,000 pixels - 106,000 pixels 519,000 pixels _________________
  47. 47. Responsive Breakpoint Generation https://github.com/cloudinary/responsive_breakpoints_generator http://www.responsivebreakpoints.com/
  48. 48. Responsive Images
  49. 49. Responsive Images
  50. 50. Responsive Images
  51. 51. Responsive Images Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
  52. 52. Responsive Images Use “In The Wild” 442,000 mobile sites Analyzed 3/15/18
  53. 53. 4 Simple Image Optimizations 1. Quality 2. Format 3. Sizing 4. Lazy Loading
  54. 54. Web Usage https://www.nngroup.com/articles/scrolling-and-attention/ https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/
  55. 55. Web Usage https://www.nngroup.com/articles/scrolling-and-attention/ https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/
  56. 56. Lazy Loading https://www.nngroup.com/articles/scrolling-and-attention/ https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/
  57. 57. Lazy Loading Use “In The Wild” 442,000 mobile sites Analyzed 3/15/18
  58. 58. Lazy Loading Use “In The Wild” 442,000 mobile sites Analyzed 3/15/18
  59. 59. Lazy Loading https://www.nngroup.com/articles/scrolling-and-attention/ https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/
  60. 60. Preview Images
  61. 61. Optimizing Content Delivery Preview Images https://github.com/technopagan/sqip
  62. 62. Preview Images
  63. 63. Animated GIFs Original MP4 1.4 MB
  64. 64. Animated GIFs
  65. 65. Animated GIFs Animated GIF 3.8 MB 270% larger
  66. 66. Animated GIFs
  67. 67. Animated GIFs MP4: 256 colors 247KB 93% smaller
  68. 68. Animated GIFs Video Tags: Video is not pre-loaded, will be last to download <video loop autoplay muted playsinline controls = "false” src="goats.mp4”/> 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/
  69. 69. Animated GIFs
  70. 70. Video
  71. 71. 72 Video Buffer Rage: a state of uncontrollable fury or violent anger induced by delayed or interrupted streaming video content http://www.ineoquest.com/press-releases/new-research-reveals-buffer-rage-as-techs-newest-epidemic
  72. 72. Video Quality Metrics 1.Does the Video Start? 2.Does the Video Stall? 3.Does it Look Good?
  73. 73. Video Startup Conviva creen_Streaming_TV_Census_Report_FINAL.pdf Q1 2018:
  74. 74. Video Startup Conviva creen_Streaming_TV_Census_Report_FINAL.pdf Q1 2018: Video Startup 16.9B total Video plays 400M Fail to Start 2B Abandoned before Start ~800M hours of video playback lost
  75. 75. Video Startup Conviva creen_Streaming_TV_Census_Report_FINAL.pdf Q1 2018: Video Startup 16.9B total Video plays 400M Fail to Start 2B Abandoned before Start ~800M hours of video playback lost
  76. 76. Video Fails To Start
  77. 77. Video Startup Failure
  78. 78. Video Startup Conviva creen_Streaming_TV_Census_Report_FINAL.pdf Q1 2018: Video Startup 16.9B total Video plays 400M Fail to Start 2B Abandoned before Start
  79. 79. Video Startup Conviva creen_Streaming_TV_Census_Report_FINAL.pdf Q1 2018: Video Startup Average Video Start Time: N. America: 4.91s Asia: 3.00s Europe: 4.30s
  80. 80. Video Startup Delay After 2 seconds, every additional second corresponds to 5.8% increase in abandonment https://www.akamai.com/kr/ko/multimedia/documents/technical-publication/video-stream-quality-impacts-viewer-behavior-inferring-causality-using-quasi-experimental-designs-technical-publication.pdf
  81. 81. Video Startup Delay https://www.akamai.com/kr/ko/multimedia/documents/technical-publication/video-stream-quality-impacts-viewer-behavior-inferring-causality-using-quasi-experimental-designs-technical-publication.pdf
  82. 82. 3rd Party Interference
  83. 83. 3rd Party Interference
  84. 84. 3rd Party Interference
  85. 85. Preload When It Makes Sense Ad Playback Video Download
  86. 86. Preload When It Makes Sense Ad Playback Video Download
  87. 87. Preload When It Makes Sense Ad Playback Video Download
  88. 88. ...be Careful with Preload Preload = “auto”
  89. 89. …be Careful with Preload
  90. 90. Optimizing Video Delivery What Leads to Startup Delay? Manifest File: List of Available Streams Player Chooses a Stream Stream Manifest: List of Video Segments Player Downloads Segments into buffer Video Plays
  91. 91. Optimizing Video Delivery What Leads to Startup Delay? Example Manifest file:
  92. 92. Optimizing Video Delivery Video Streaming Manifest File: List of Available Streams Player selects 8.5 MBPS stream Stream Manifest: List of Video Segments Buffer takes a long time to fill Video Does Not Play Player immediately changes the stream choice to 192 KBPS
  93. 93. Video Startup
  94. 94. Optimizing Video Delivery What Leads to Startup Delay? Example Manifest file:
  95. 95. Optimizing Video Delivery What Leads to Startup Delay? Example Manifest file:
  96. 96. Video Startup
  97. 97. Video Startup
  98. 98. Video Startup
  99. 99. Video Startup 10s 11s 12s 13s 14s 15s 16s 17s 4k Low->High: 4K Middle: 4k:High->Low:
  100. 100. Video Startup “In the Wild” 75% 20% 5% https://dougsillars.com/2018/03/29/streaming-video-whats-on-the-web-today/
  101. 101. Optimizing Content Delivery Balancing the Network with Playback Player uses available streams to balance download with playback
  102. 102. Optimizing Content Delivery Video Streaming
  103. 103. Optimizing Content Delivery Video Streaming Large throughput gaps can lead to many stream changes – which can be visible to user
  104. 104. 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
  105. 105. Conclusion Images and Video can be Beautiful AND Fast
  106. 106. Contest – Win a €100 Amazon Gift Card Optimize Images for Fast Page Load Submit your entry by June 21 for a chance to win! Code and tips: https://github.com/dougsillars/dougsillars.github.io Entry form: http://bit.ly/FastImages https://dougsillars.github.io

×