Cologne webperf
Download as PPTX, PDF0 likes593 views
- Images and video make up 75% of web content and can significantly impact page load speeds if not optimized properly - Large file sizes, inefficient formats, and lack of responsive images are some of the key factors that slow down page loads - Techniques like compression, responsive images, lazy loading, efficient formats like WebP and SVG, and optimizing delivery can help make images and video both beautiful and fast to load
Cologne webperf
- 1. Delivering Beautiful and Fast Images and Video Doug Sillars @DougSillars Köln Webperf June 12, 2018
- 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. 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. Images & Video make up 75% of Web Content HTTPArchive mobile websites 15/02/18
- 6. Images & Video make up 75% of Web Content HTTPArchive mobile websites 15/02/18 JPGPNG GIF
- 7. Tools: • Monitoring & Testing • Image Manipulations • Demos https://www.webpagetest.org https://www.imagemagick.org https://www.cloudinary.com
- 8. Image Formats – Average Size HTTPArchive mobile websites 15/02/18
- 9. Image Formats – Average Size HTTPArchive mobile websites 15/02/18
- 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. 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. 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
- 13. Scalable Vector Graphics (SVG)
- 14. Scalable Vector Graphics (SVG)
- 15. Scalable Vector Graphics (SVG)
- 16. Scalable Vector Graphics (SVG) https://commons.wikimedia.org/wiki/User:Quibik/Cleaning_up_SVG_files_manually
- 17. Scalable Vector Graphics (SVG) https://github.com/google/brotli
- 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 https://developers.google.com/speed/docs/insights/OptimizeImages
- 19. 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
- 20. Image Compression Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
- 21. Image Compression Use “In The Wild” Median Savings (50th percentile): • 2.83 seconds faster page load • 419KB less data
- 28. 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
- 31. Results: • Test Load on Motorola G4:
- 32. Image Formats – Average Size HTTPArchive mobile websites 15/02/18
- 33. Image Formats – Average Size HTTPArchive mobile websites 15/02/18
- 35. 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
- 36. SSIM + WebP 433-505 KB http://res.cloudinary.com/dougsillars/image/upload/q_auto,f_auto/v1526279646/ireland_mwnkwo.jpg
- 37. 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>
- 38. Image Format Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
- 39. Image Format Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
- 41. Images & Screens
- 44. Images & Screens 624 832 12,979,000 pixels 519,000 pixels _________________ - 12,460,000 pixels
- 45. Images & Screens 624 832 12,979,000 pixels 519,000 pixels _________________ - 12,460,000 pixels
- 47. Responsive Images - Generate a set of images 25 KB difference in size
- 48. Responsive Images 624 832 625,000 pixels - 106,000 pixels 519,000 pixels _________________
- 52. Responsive Images + Client Hints
- 54. Responsive Images Use “In The Wild” 442,000 mobile sites Analyzed 3/15/18
- 55. Responsive Images Use “In The Wild” 442,000 mobile sites Analyzed 3/15/18
- 56. Sample Website
- 57. Sample Website
- 61. Lazy Loading Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
- 62. Lazy Loading Use “In The Wild” 500,000 mobile sites Analyzed 3/15/18
- 64. Preview Images
- 65. 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>);"
- 66. Preview Images
- 68. Animated GIFs
- 69. Animated GIFs Animated GIF 3.8 MB 270% larger
- 70. Animated GIFs
- 71. Animated GIFs MP4: 256 colors 247KB 93% smaller
- 72. 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/
- 73. Animated GIFs
- 74. Video
- 75. Video Quality Metrics 1.Does the Video Start? 2.Does the Video Stall? 3.Does it Look Good?
- 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. 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
- 80. Video Fails To Start
- 82. 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
- 83. 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?
- 84. 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
- 86. Video Download
- 89. Startup Delay: 3rd Party Interference
- 92. 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
- 93. Optimizing Video Delivery What Leads to Startup Delay? Example Manifest file:
- 94. 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
- 95. Video Startup
- 96. Optimizing Video Delivery What Leads to Startup Delay? Example Manifest file:
- 97. Optimizing Video Delivery What Leads to Startup Delay? Example Manifest file:
- 98. Video Startup
- 99. Video Startup
- 100. Video Startup
- 101. Video Startup 10s 11s 12s 13s 14s 15s 16s 17s 4k Low->High: 4K Middle: 4k:High->Low:
- 102. Video Startup “In the Wild” 75% 20% 5% https://dougsillars.com/2018/03/29/streaming-video-whats-on-the-web-today/
- 103. Optimizing Content Delivery Balancing the Network with Playback Player uses available streams to balance download with playback
- 104. 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
- 105. Conclusion Images and Video can be Beautiful AND Fast
- 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