Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Cologne webperf

305 visualizaciones

Publicado el

Presented to Cologne webperf meetup June 12, 2018

Publicado en: Tecnología
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Cologne webperf

  1. 1. Delivering Beautiful and Fast Images and Video Doug Sillars @DougSillars Köln Webperf June 12, 2018
  2. 2. 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
  3. 3. 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
  4. 4. Images & Video make up 75% of Web Content HTTPArchive mobile websites 15/02/18
  5. 5. Images & Video make up 75% of Web Content HTTPArchive mobile websites 15/02/18 JPGPNG GIF
  6. 6. Tools: • Monitoring & Testing • Image Manipulations • Demos https://www.webpagetest.org https://www.imagemagick.org https://www.cloudinary.com
  7. 7. Image Formats – Average Size HTTPArchive mobile websites 15/02/18
  8. 8. Image Formats – Average Size HTTPArchive mobile websites 15/02/18
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. Scalable Vector Graphics (SVG)
  13. 13. Scalable Vector Graphics (SVG)
  14. 14. Scalable Vector Graphics (SVG)
  15. 15. Scalable Vector Graphics (SVG) https://commons.wikimedia.org/wiki/User:Quibik/Cleaning_up_SVG_files_manually
  16. 16. Scalable Vector Graphics (SVG) https://github.com/google/brotli
  17. 17. Image Compression Lossy Image size is reduced by removing pixel information magick -quality 85 ireland.jpg ireland85.jpg http://res.cloudinary.com/dougsillars/image/upload/q_85/v1520504964/IMG_20180301_114117_tzasan.jpg https://developers.google.com/speed/docs/insights/OptimizeImages
  18. 18. Image Compression Lossy Image size is reduced by removing pixel information magick -quality 85 ireland.jpg ireland85.jpg http://res.cloudinary.com/dougsillars/image/upload/q_85/v1520504964/IMG_20180301_114117_tzasan.jpg Google: Recommends 85% compression on all images https://developers.google.com/speed/docs/insights/OptimizeImages
  19. 19. Image Compression Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
  20. 20. Image Compression Use “In The Wild” Median Savings (50th percentile): • 2.83 seconds faster page load • 419KB less data
  21. 21. 100% 2.8 MB http://res.cloudinary.com/dougsillars/image/upload/v1526279646/ireland_mwnkwo.jpg
  22. 22. 85% 1.3 MB q_85 http://res.cloudinary.com/dougsillars/image/q_85/upload/v1526279646/ireland_mwnkwo.jpg
  23. 23. 50% 551KB q_50 http://res.cloudinary.com/dougsillars/image/q_50/upload/v1526279646/ireland_mwnkwo.jpg
  24. 24. 20% 274 KB q_20 http://res.cloudinary.com/dougsillars/image/q_20/upload/v1526279646/ireland_mwnkwo.jpg
  25. 25. Graphing the Results https://developers.google.com/speed/docs/insights/OptimizeImages
  26. 26. Graphing the Results https://developers.google.com/speed/docs/insights/OptimizeImages
  27. 27. Automate Quality vs. File Size • Butteraugli • SSIM: Structural SIMilarity https://github.com/technopagan/cjpeg-dssim cjpeg-dssim jpegoptim ireland.jpg http://res.cloudinary.com/dougsillars/image/upload/q_auto/v1526279646/ireland_mwnkwo.jpg
  28. 28. SSIM 628-934 KB http://res.cloudinary.com/dougsillars/image/upload/q_auto/v1526279646/ireland_mwnkwo.jpg
  29. 29. Graphing the Results https://developers.google.com/speed/docs/insights/OptimizeImages
  30. 30. Results: • Test Load on Motorola G4:
  31. 31. Image Formats – Average Size HTTPArchive mobile websites 15/02/18
  32. 32. Image Formats – Average Size HTTPArchive mobile websites 15/02/18
  33. 33. File Format: WebP https://caniuse.com/#feat=webp
  34. 34. Convert File Format http://res.cloudinary.com/dougsillars/image/upload/q_auto,f_auto/v1526279646/ireland_mwnkwo.jpg convert ireland_cjpeg_dssim.jpg ireland.webp
  35. 35. SSIM + WebP 433-505 KB http://res.cloudinary.com/dougsillars/image/upload/q_auto,f_auto/v1526279646/ireland_mwnkwo.jpg
  36. 36. Image Format: WebP <picture> <source width = "100%" type="image/webp" srcset="ireland.webp"> <img width = "100%" src="ireland_cjpeg_dssim.jpg" alt="Mizen Head, Ireland"> </picture>
  37. 37. Image Format Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
  38. 38. Image Format Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
  39. 39. Images & Screens -
  40. 40. Images & Screens
  41. 41. Images & Screens -
  42. 42. Images & Screens 624 832 -
  43. 43. Images & Screens 624 832 12,979,000 pixels 519,000 pixels _________________ - 12,460,000 pixels
  44. 44. Images & Screens 624 832 12,979,000 pixels 519,000 pixels _________________ - 12,460,000 pixels
  45. 45. Responsive Images https://twitter.com/paulcalvano/status/928751141843808256
  46. 46. Responsive Images - Generate a set of images 25 KB difference in size
  47. 47. Responsive Images 624 832 625,000 pixels - 106,000 pixels 519,000 pixels _________________
  48. 48. Responsive Breakpoint Generation https://github.com/cloudinary/responsive_breakpoints_generator http://www.responsivebreakpoints.com/
  49. 49. Responsive Images
  50. 50. Responsive Images + Image Format
  51. 51. Responsive Images + Client Hints
  52. 52. Responsive Images
  53. 53. Responsive Images Use “In The Wild” 442,000 mobile sites Analyzed 3/15/18
  54. 54. Responsive Images Use “In The Wild” 442,000 mobile sites Analyzed 3/15/18
  55. 55. Sample Website
  56. 56. Sample Website
  57. 57. Web Usage https://www.nngroup.com/articles/scrolling-and-attention/ https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/
  58. 58. Web Usage https://www.nngroup.com/articles/scrolling-and-attention/ https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/
  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. Lazy Loading Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
  61. 61. Lazy Loading Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
  62. 62. Lazy Loading https://www.nngroup.com/articles/scrolling-and-attention/ https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/
  63. 63. Preview Images
  64. 64. Preview Images SVG 979 bytes! Jpg/Webp ~50KB https://github.com/technopagan/sqip <img src=“IMG_20160619_173136306.jpg” style="background-size: cover; background-image: url(data:image/svg+xml;base64,<svg text>);"
  65. 65. Preview Images
  66. 66. Animated GIFs Original MP4 1.4 MB
  67. 67. Animated GIFs
  68. 68. Animated GIFs Animated GIF 3.8 MB 270% larger
  69. 69. Animated GIFs
  70. 70. Animated GIFs MP4: 256 colors 247KB 93% smaller
  71. 71. Animated GIFs Video Tags are slow: Video is not pre-loaded, will be last to download <video autoplay loop 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/
  72. 72. Animated GIFs
  73. 73. Video
  74. 74. Video Quality Metrics 1.Does the Video Start? 2.Does the Video Stall? 3.Does it Look Good?
  75. 75. Video Startup Conviva creen_Streaming_TV_Census_Report_FINAL.pdf Q1 2018:
  76. 76. 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
  77. 77. 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
  78. 78. Video Startup Failure
  79. 79. Video Fails To Start
  80. 80. Video Startup Failure
  81. 81. 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
  82. 82. Video Startup Conviva creen_Streaming_TV_Census_Report_FINAL.pdf Q1 2018: Video Startup Video Start Time: N. America: 4.91s Asia: 3.00s Europe: 4.30s Average? Median? 95th percentile? Desktop/Mobile/both?
  83. 83. 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
  84. 84. 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
  85. 85. Video Download
  86. 86. Optimizing Content Delivery
  87. 87. Optimizing Content Delivery
  88. 88. Startup Delay: 3rd Party Interference
  89. 89. 3rd Party Interference
  90. 90. 3rd Party Interference
  91. 91. 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
  92. 92. Optimizing Video Delivery What Leads to Startup Delay? Example Manifest file:
  93. 93. 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
  94. 94. Video Startup
  95. 95. Optimizing Video Delivery What Leads to Startup Delay? Example Manifest file:
  96. 96. Optimizing Video Delivery What Leads to Startup Delay? Example Manifest file:
  97. 97. Video Startup
  98. 98. Video Startup
  99. 99. Video Startup
  100. 100. Video Startup 10s 11s 12s 13s 14s 15s 16s 17s 4k Low->High: 4K Middle: 4k:High->Low:
  101. 101. Video Startup “In the Wild” 75% 20% 5% https://dougsillars.com/2018/03/29/streaming-video-whats-on-the-web-today/
  102. 102. Optimizing Content Delivery Balancing the Network with Playback Player uses available streams to balance download with playback
  103. 103. Summary Testing: WebPageTest https://www.webpagetest.org WebsiteSpeedTest https://Webspeedtest.cloudinary.com 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/ Samples: https://github.com/dougsillars/OSCAL Cloudinary https://www.cloudinary.com Tooling
  104. 104. Conclusion Images and Video can be Beautiful AND Fast
  105. 105. 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

×