Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Its time to stop stalling novi sad

•Download as POTX, PDF•
•
Doug Sillars
Doug Sillars

The document discusses optimizing content delivery for mobile performance. It begins with testing tools like Video Optimizer and WebPageTest to analyze mobile site performance. Common issues identified are long connection times, large files like images and videos, and lack of responsive delivery for different devices and network conditions. Best practices recommended to improve performance include using content delivery networks to cache content globally, compressing text and images, optimizing video formats and bitrates, and delivering the appropriate format and quality based on device and network. The goal is to minimize load times and avoid stalls during playback.

1 of 65
It’s Time to Stop Stalling: Doug Sillars Google Developer Group – Novi Sad March 7, 2018 Mobile/Web Performance and You @DougSillars
Its time to stop stalling novi sad
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
How Much Do Customers Hate Delays? 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
Its time to stop stalling novi sad
Your Customers Demand Mobile experiences that are: Immersive Rich Fast This can be hard.
Cellular Networks Are High Latency Environments • Connection Establishment 500-2500ms 50-250ms 1-10ms • Round Trip Time (RTT) 200ms 100ms 8-50ms 3G 4G Wi-Fi
Today’s Goals Test where your app/site is today Common Tools Learn best practices for speed Learn from existing tests See the results of performance fixes
Testing Your Mobile Performance Native Web Free & Open Source Tools Video Optimizer https://developer.att.com/ Video-Optimizer WebPageTest https://www.webpagetest.org https://webspeed.cloudinary.com
Testing With Video Optimizer Run network traces on your phone 1. Pick device 2. Collector type 3. Set network conditions 4. Decrypt HTTPS 5. Record screen? 6. Name 7. GO!
Video Optimizer Video Optimizer establishes a VPN connection on Device Collects all Traffic in/out Device screen displayed on your computer Click Stop to end trace. Files copied over to computer for analysis.
Best Practices– Test Results Connections Files and Images HTML Security Video
WebPageTest Tests Websites on Remote Browsers 1. Enter Website 2. Set Test Location 3. Choose Device & Browser 4. Options 5. GO!
WebPageTest Results
Optimizing Content Delivery 1.Delivery Speed
Optimizing Content Delivery 1.Delivery Speed Coin-hive.com is a cryptocurrency mining script that is used in coin-jacking websites They have one server in Germany. Munich, DE ping: 10ms San Jose, US ping: 150ms Singapore ping: 200ms Data Collected with Circonius
Optimizing Content Delivery 1.Delivery Speed
Optimizing Content Delivery 1.Delivery Speed: Content Delivery Networks CDNs cache your content at various locations around the world – reducing the round trip time
Optimizing Content Delivery 1.Delivery Speed
Optimizing Content Delivery 1.Delivery Speed
Optimizing Content Delivery 1.Delivery Speed: Redirects
Optimizing Content Delivery 1.Delivery Speed: Redirects
Optimizing Content Delivery 1.Delivery Speed: Redirects
© 2017 AT&T Intellectual Property. All rights reserved. AT&T, Globe logo, Mobilizing Your World and DIRECTV are registered trademarks and service marks of AT&T Intellectual Property and/or AT&T affiliated. companies All other marks are the property of their respective owners. AT&T Proprietary (Internal Use Only). Not for use or disclosure outside the AT&T companies except under written agreement. Optimizing Content Delivery
Optimizing Content Delivery 1.Delivery Speed 2.Content Delivery
Optimizing Content Delivery
Optimizing Content Delivery Text Compression Screen filled via: 130 KB JSON file
Optimizing Content Delivery Text Compression 130 KB JSON file populates screen "primaryImageUrl":"/db_photos/showcards/v5/AllPhotos/1394 9024/p13949024_b_v5_aa.jpg" "title":"America's Got Talent"
Optimizing Content Delivery Text Compression 131 KB Uncompressed: • Gzip: 16 KB (88% smaller!) • Brotli: 12 KB (91% smaller!) Screen is populated with data and images faster
Optimizing Content Delivery Text Compression: Trends https://dougsillars.com/2017/10/18/text-compression-really-works-to-speed-your-app/
Optimizing Content Delivery Images
Optimizing Content Delivery Images 2560 px 1440 px 1555x1200 pixels
Optimizing Content Delivery Image Pixel Count 2560 px 1440 px 720x556 pixels
Optimizing Content Delivery Image Quality 2560 px 1440 px 85% Quality
Optimizing Content Delivery Image Quality 2560 px 1440 px 85% Quality
Optimizing Content Delivery Images: Putting it Together 2560 px 1440 px 85% Quality & 720x556 pixels
Optimizing Content Delivery Image Quality Tooling http://res.cloudinary.com/dougsillars/image/upload/c_scale,q_85,w_720/ v1517843228/bigFrankSinatraImage_c1mnff.jpg http://res.cloudinary.com/dougsillars/image/upload/c_scale,q_auto,w_720/ v1517843228/bigFrankSinatraImage_c1mnff.jpg Auto Quality: 128 KB 91.7% savings! http://res.cloudinary.com/dougsillars/image/upload/c_scale,q_auto,r_0,w_720/ v1517843228/bigFrankSinatraImage_c1mnff.webp WebP: 84 KB 94.6% savings!
Optimizing Content Delivery Images A random sample of 1,000 Twitter images: 67% had room for optimization (q_auto, f_auto) Of 63,000 Twitter images, 1: 1000 > 50 KB (as high as 550KB) https://dougsillars.com/2018/02/27/twitter-and-facebook-profile-images-already-optimized-or-is- there-room-for-improvement/
Optimizing Content Delivery Images and Devices https://twitter.com/paulcalvano/status/928751141843808256
Optimizing Content Delivery Responsive Images <picture> <source media="(max-width: 480px)" srcset="http://res.cloudinary.com/dougsillars/image/upload/c_scale,e_sepia:80,q_auto,w_320/v1517928 350/AlbaIulia.jpg"> <source media="(max-width: 768px)" srcset="http://res.cloudinary.com/dougsillars/image/upload/c_scale,q_auto,w_488/v1517928350/AlbaIul ia.jpg"> <source media="(max-width: 1024px)" srcset="http://res.cloudinary.com/dougsillars/image/upload/c_scale,e_sepia:80,q_auto,w_768/v1517928 350/AlbaIulia.jpg"> <img src="http://res.cloudinary.com/dougsillars/image/upload/c_scale,q_auto,w_1024/v1517928350/AlbaIulia.jpg" alt="Alba Iulia."> </picture> http://www.responsivebreakpoints.com/
Optimizing Content Delivery Animated GIFs Original MP4 1.4 MB
Optimizing Content Delivery Animated GIFs Animated GIF 3.8 MB 270% larger
Optimizing Content Delivery Animated GIFs
Optimizing Content Delivery Animated GIFs MP4: 256 colors 247KB 93% smaller
Optimizing Content Delivery Animated GIFs Video Tags are slow: Video is not pre-loaded, will be last to download <video autoplay loop muted controls = "false” src="goats.mp4" /> Img tags are fast! <picture> <source type="video/mp4" srcset="cats.mp4"> <source type="image/webp" srcset="cats.webp"> <img src="cats.gif"> </picture> https://calendar.perfplanet.com/2017/animated-gif-without-the-gif/
Optimizing Content Delivery
47 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
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
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
Optimizing Content 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
Optimizing Content Delivery What Leads to Startup Delay? #EXTM3U# EXT-X-STREAM-INF:BANDWIDTH=8500000,RESOLUTION=1920x1080,sunflower1080/index1080.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=200000,RESOLUTION=416x234,sunflower234/index234.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=400000,RESOLUTION=480x270,sunflower270/index270.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=600000,RESOLUTION=640x360,sunflower360_600k/index360_600k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=1200000,RESOLUTION=640x360,sunflower360_1200k/index360_1200k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=3500000,RESOLUTION=960x540,sunflower540/index540.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1280x720,sunflower720_5000k/index720_5000k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=6500000,RESOLUTION=1280x720,sunflower720_6500k/index720_6500k.m3u8 Example Manifest file:
Optimizing Content 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 600KBPS
Optimizing Content Delivery Video Streaming: Test on Fast Wi-Fi
Optimizing Content Delivery What Leads to Startup Delay? #EXTM3U# EXT-X-STREAM-INF:BANDWIDTH=8500000,RESOLUTION=1920x1080,sunflower1080/index1080.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=200000,RESOLUTION=416x234,sunflower234/index234.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=400000,RESOLUTION=480x270,sunflower270/index270.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=600000,RESOLUTION=640x360,sunflower360_600k/index360_600k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=1200000,RESOLUTION=640x360,sunflower360_1200k/index360_1200k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=3500000,RESOLUTION=960x540,sunflower540/index540.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1280x720,sunflower720_5000k/index720_5000k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=6500000,RESOLUTION=1280x720,sunflower720_6500k/index720_6500k.m3u8 Example Manifest file: 8.5 MBPS is HIGH throughput for initial streaming Best Practice: Pick middle throughput to balance startup time and quality
Optimizing Content Delivery As long as Video download is faster than Playback…. What Leads to Stalls?
Optimizing Content Delivery What Leads to Stalls? Video Download slower than playback, so the video stalls Buffer is filling, but video has not resumed
Optimizing Content Delivery Balancing the Network with Playback Player uses available streams to balance download with playback
Optimizing Content Delivery Video Streaming #EXTM3U# EXT-X-STREAM-INF:BANDWIDTH=8500000,RESOLUTION=1920x1080,sunflower1080/index1080.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=200000,RESOLUTION=416x234,sunflower234/index234.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=400000,RESOLUTION=480x270,sunflower270/index270.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=600000,RESOLUTION=640x360,sunflower360_600k/index360_600k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=1200000,RESOLUTION=640x360,sunflower360_1200k/index360_1200k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=3500000,RESOLUTION=960x540,sunflower540/index540.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1280x720,sunflower720_5000k/index720_5000k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=6500000,RESOLUTION=1280x720,sunflower720_6500k/index720_6500k.m3u8
Optimizing Content Delivery Video Streaming Large jumps in throughput can lead to streaming issues
Optimizing Content Delivery Video Streaming Large throughput gaps can lead to many stream changes – which can be visible to user
Optimizing Content Delivery Video Streaming #EXTM3U# EXT-X-STREAM-INF:BANDWIDTH=8500000,RESOLUTION=1920x1080,sunflower1080/index1080.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=200000,RESOLUTION=416x234,sunflower234/index234.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=400000,RESOLUTION=480x270,sunflower270/index270.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=600000,RESOLUTION=640x360,sunflower360_600k/index360_600k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=1200000,RESOLUTION=640x360,sunflower360_1200k/index360_1200k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=3500000,RESOLUTION=960x540,sunflower540/index540.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1280x720,sunflower720_5000k/index720_5000k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=6500000,RESOLUTION=1280x720,sunflower720_6500k/index720_6500k.m3u8
Performance Summary 1.Delivery Speed 1.CDNs 2.Reduce redirects 2.Content Delivery 1) Text Compression 2) Image Sizing, Quality and Format 3) Video Bitrate
Summary Web: WebPageTest https://www.webpagetest.org WebsiteSpeedTest https://Webspeedtest.cloudinary.com Native: Video Optimizer https://developer.att.com/Video-Optimizer High Performance Android Apps http://bit.ly/HighPerformanceAndroidApps Images: Cloudinary https://www.cloudinary.com http://www.responsivebreakpoints.com/ Tooling
Contest 1.Examine top websites from Alexa 500 with https://Webspeedtest.cloudinary.com 1.https://www.alexa.com/topsites 2.Find the site with the most potential savings for images. 3.Post the result in the Meetup Comments 4.Whoever finds the biggest savings will win a prize courtesy of Cloudinary Questions or issues? @dougsillars on twitter or e-mail highperformanceandroid@gmail.com
Optimizing Content Delivery Image EXIF 30 KB 5 KB of text data 16% potential savings

More Related Content

Its time to stop stalling novi sad

  • 1. It’s Time to Stop Stalling: Doug Sillars Google Developer Group – Novi Sad March 7, 2018 Mobile/Web Performance and You @DougSillars
  • 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. How Much Do Customers Hate Delays? 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
  • 6. Your Customers Demand Mobile experiences that are: Immersive Rich Fast This can be hard.
  • 7. Cellular Networks Are High Latency Environments • Connection Establishment 500-2500ms 50-250ms 1-10ms • Round Trip Time (RTT) 200ms 100ms 8-50ms 3G 4G Wi-Fi
  • 8. Today’s Goals Test where your app/site is today Common Tools Learn best practices for speed Learn from existing tests See the results of performance fixes
  • 9. Testing Your Mobile Performance Native Web Free & Open Source Tools Video Optimizer https://developer.att.com/ Video-Optimizer WebPageTest https://www.webpagetest.org https://webspeed.cloudinary.com
  • 10. Testing With Video Optimizer Run network traces on your phone 1. Pick device 2. Collector type 3. Set network conditions 4. Decrypt HTTPS 5. Record screen? 6. Name 7. GO!
  • 11. Video Optimizer Video Optimizer establishes a VPN connection on Device Collects all Traffic in/out Device screen displayed on your computer Click Stop to end trace. Files copied over to computer for analysis.
  • 12. Best Practices– Test Results Connections Files and Images HTML Security Video
  • 13. WebPageTest Tests Websites on Remote Browsers 1. Enter Website 2. Set Test Location 3. Choose Device & Browser 4. Options 5. GO!
  • 16. Optimizing Content Delivery 1.Delivery Speed Coin-hive.com is a cryptocurrency mining script that is used in coin-jacking websites They have one server in Germany. Munich, DE ping: 10ms San Jose, US ping: 150ms Singapore ping: 200ms Data Collected with Circonius
  • 18. Optimizing Content Delivery 1.Delivery Speed: Content Delivery Networks CDNs cache your content at various locations around the world – reducing the round trip time
  • 24. © 2017 AT&T Intellectual Property. All rights reserved. AT&T, Globe logo, Mobilizing Your World and DIRECTV are registered trademarks and service marks of AT&T Intellectual Property and/or AT&T affiliated. companies All other marks are the property of their respective owners. AT&T Proprietary (Internal Use Only). Not for use or disclosure outside the AT&T companies except under written agreement. Optimizing Content Delivery
  • 25. Optimizing Content Delivery 1.Delivery Speed 2.Content Delivery
  • 27. Optimizing Content Delivery Text Compression Screen filled via: 130 KB JSON file
  • 28. Optimizing Content Delivery Text Compression 130 KB JSON file populates screen "primaryImageUrl":"/db_photos/showcards/v5/AllPhotos/1394 9024/p13949024_b_v5_aa.jpg" "title":"America's Got Talent"
  • 29. Optimizing Content Delivery Text Compression 131 KB Uncompressed: • Gzip: 16 KB (88% smaller!) • Brotli: 12 KB (91% smaller!) Screen is populated with data and images faster
  • 30. Optimizing Content Delivery Text Compression: Trends https://dougsillars.com/2017/10/18/text-compression-really-works-to-speed-your-app/
  • 32. Optimizing Content Delivery Images 2560 px 1440 px 1555x1200 pixels
  • 33. Optimizing Content Delivery Image Pixel Count 2560 px 1440 px 720x556 pixels
  • 34. Optimizing Content Delivery Image Quality 2560 px 1440 px 85% Quality
  • 35. Optimizing Content Delivery Image Quality 2560 px 1440 px 85% Quality
  • 36. Optimizing Content Delivery Images: Putting it Together 2560 px 1440 px 85% Quality & 720x556 pixels
  • 37. Optimizing Content Delivery Image Quality Tooling http://res.cloudinary.com/dougsillars/image/upload/c_scale,q_85,w_720/ v1517843228/bigFrankSinatraImage_c1mnff.jpg http://res.cloudinary.com/dougsillars/image/upload/c_scale,q_auto,w_720/ v1517843228/bigFrankSinatraImage_c1mnff.jpg Auto Quality: 128 KB 91.7% savings! http://res.cloudinary.com/dougsillars/image/upload/c_scale,q_auto,r_0,w_720/ v1517843228/bigFrankSinatraImage_c1mnff.webp WebP: 84 KB 94.6% savings!
  • 38. Optimizing Content Delivery Images A random sample of 1,000 Twitter images: 67% had room for optimization (q_auto, f_auto) Of 63,000 Twitter images, 1: 1000 > 50 KB (as high as 550KB) https://dougsillars.com/2018/02/27/twitter-and-facebook-profile-images-already-optimized-or-is- there-room-for-improvement/
  • 39. Optimizing Content Delivery Images and Devices https://twitter.com/paulcalvano/status/928751141843808256
  • 40. Optimizing Content Delivery Responsive Images <picture> <source media="(max-width: 480px)" srcset="http://res.cloudinary.com/dougsillars/image/upload/c_scale,e_sepia:80,q_auto,w_320/v1517928 350/AlbaIulia.jpg"> <source media="(max-width: 768px)" srcset="http://res.cloudinary.com/dougsillars/image/upload/c_scale,q_auto,w_488/v1517928350/AlbaIul ia.jpg"> <source media="(max-width: 1024px)" srcset="http://res.cloudinary.com/dougsillars/image/upload/c_scale,e_sepia:80,q_auto,w_768/v1517928 350/AlbaIulia.jpg"> <img src="http://res.cloudinary.com/dougsillars/image/upload/c_scale,q_auto,w_1024/v1517928350/AlbaIulia.jpg" alt="Alba Iulia."> </picture> http://www.responsivebreakpoints.com/
  • 41. Optimizing Content Delivery Animated GIFs Original MP4 1.4 MB
  • 42. Optimizing Content Delivery Animated GIFs Animated GIF 3.8 MB 270% larger
  • 44. Optimizing Content Delivery Animated GIFs MP4: 256 colors 247KB 93% smaller
  • 45. Optimizing Content Delivery Animated GIFs Video Tags are slow: Video is not pre-loaded, will be last to download <video autoplay loop muted controls = "false” src="goats.mp4" /> Img tags are fast! <picture> <source type="video/mp4" srcset="cats.mp4"> <source type="image/webp" srcset="cats.webp"> <img src="cats.gif"> </picture> https://calendar.perfplanet.com/2017/animated-gif-without-the-gif/
  • 47. 47 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
  • 48. 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
  • 50. Optimizing Content 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
  • 51. Optimizing Content Delivery What Leads to Startup Delay? #EXTM3U# EXT-X-STREAM-INF:BANDWIDTH=8500000,RESOLUTION=1920x1080,sunflower1080/index1080.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=200000,RESOLUTION=416x234,sunflower234/index234.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=400000,RESOLUTION=480x270,sunflower270/index270.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=600000,RESOLUTION=640x360,sunflower360_600k/index360_600k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=1200000,RESOLUTION=640x360,sunflower360_1200k/index360_1200k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=3500000,RESOLUTION=960x540,sunflower540/index540.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1280x720,sunflower720_5000k/index720_5000k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=6500000,RESOLUTION=1280x720,sunflower720_6500k/index720_6500k.m3u8 Example Manifest file:
  • 52. Optimizing Content 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 600KBPS
  • 53. Optimizing Content Delivery Video Streaming: Test on Fast Wi-Fi
  • 54. Optimizing Content Delivery What Leads to Startup Delay? #EXTM3U# EXT-X-STREAM-INF:BANDWIDTH=8500000,RESOLUTION=1920x1080,sunflower1080/index1080.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=200000,RESOLUTION=416x234,sunflower234/index234.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=400000,RESOLUTION=480x270,sunflower270/index270.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=600000,RESOLUTION=640x360,sunflower360_600k/index360_600k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=1200000,RESOLUTION=640x360,sunflower360_1200k/index360_1200k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=3500000,RESOLUTION=960x540,sunflower540/index540.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1280x720,sunflower720_5000k/index720_5000k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=6500000,RESOLUTION=1280x720,sunflower720_6500k/index720_6500k.m3u8 Example Manifest file: 8.5 MBPS is HIGH throughput for initial streaming Best Practice: Pick middle throughput to balance startup time and quality
  • 55. Optimizing Content Delivery As long as Video download is faster than Playback…. What Leads to Stalls?
  • 56. Optimizing Content Delivery What Leads to Stalls? Video Download slower than playback, so the video stalls Buffer is filling, but video has not resumed
  • 57. Optimizing Content Delivery Balancing the Network with Playback Player uses available streams to balance download with playback
  • 58. Optimizing Content Delivery Video Streaming #EXTM3U# EXT-X-STREAM-INF:BANDWIDTH=8500000,RESOLUTION=1920x1080,sunflower1080/index1080.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=200000,RESOLUTION=416x234,sunflower234/index234.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=400000,RESOLUTION=480x270,sunflower270/index270.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=600000,RESOLUTION=640x360,sunflower360_600k/index360_600k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=1200000,RESOLUTION=640x360,sunflower360_1200k/index360_1200k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=3500000,RESOLUTION=960x540,sunflower540/index540.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1280x720,sunflower720_5000k/index720_5000k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=6500000,RESOLUTION=1280x720,sunflower720_6500k/index720_6500k.m3u8
  • 59. Optimizing Content Delivery Video Streaming Large jumps in throughput can lead to streaming issues
  • 60. Optimizing Content Delivery Video Streaming Large throughput gaps can lead to many stream changes – which can be visible to user
  • 61. Optimizing Content Delivery Video Streaming #EXTM3U# EXT-X-STREAM-INF:BANDWIDTH=8500000,RESOLUTION=1920x1080,sunflower1080/index1080.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=200000,RESOLUTION=416x234,sunflower234/index234.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=400000,RESOLUTION=480x270,sunflower270/index270.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=600000,RESOLUTION=640x360,sunflower360_600k/index360_600k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=1200000,RESOLUTION=640x360,sunflower360_1200k/index360_1200k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=3500000,RESOLUTION=960x540,sunflower540/index540.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1280x720,sunflower720_5000k/index720_5000k.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=6500000,RESOLUTION=1280x720,sunflower720_6500k/index720_6500k.m3u8
  • 62. Performance Summary 1.Delivery Speed 1.CDNs 2.Reduce redirects 2.Content Delivery 1) Text Compression 2) Image Sizing, Quality and Format 3) Video Bitrate
  • 63. Summary Web: WebPageTest https://www.webpagetest.org WebsiteSpeedTest https://Webspeedtest.cloudinary.com Native: Video Optimizer https://developer.att.com/Video-Optimizer High Performance Android Apps http://bit.ly/HighPerformanceAndroidApps Images: Cloudinary https://www.cloudinary.com http://www.responsivebreakpoints.com/ Tooling
  • 64. Contest 1.Examine top websites from Alexa 500 with https://Webspeedtest.cloudinary.com 1.https://www.alexa.com/topsites 2.Find the site with the most potential savings for images. 3.Post the result in the Meetup Comments 4.Whoever finds the biggest savings will win a prize courtesy of Cloudinary Questions or issues? @dougsillars on twitter or e-mail highperformanceandroid@gmail.com
  • 65. Optimizing Content Delivery Image EXIF 30 KB 5 KB of text data 16% potential savings

Editor's Notes

  1. 1.8 MP
  2. 0.4 MP
  3. file:///Users/demo/Documents/reponsiveimages.html
  4. file:///Users/demo/Documents/reponsiveimages.html