Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Its timetostopstalling gdg_bruxelles

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Chargement dans…3
×

Consultez-les par la suite

1 sur 70 Publicité

Plus De Contenu Connexe

Diaporamas pour vous (20)

Publicité

Plus récents (20)

Publicité

Its timetostopstalling gdg_bruxelles

  1. 1. It’s Time to Stop Stalling: Doug Sillars GDG Bruxelles May 31, 2018 Mobile/Web Performance and You @DougSillars
  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. 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
  4. 4. Your Customers Demand Mobile experiences that are: Immersive Rich Fast This can be hard.
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. 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!
  9. 9. 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.
  10. 10. Best Practices– Test Results Connections Files and Images HTML Security Video
  11. 11. WebPageTest Tests Websites on Remote Browsers 1. Enter Website 2. Set Test Location 3. Choose Device & Browser 4. Options 5. GO!
  12. 12. WebPageTest Results
  13. 13. Optimizing Content Delivery 1.Delivery Speed
  14. 14. 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
  15. 15. Optimizing Content Delivery 1.Delivery Speed
  16. 16. Optimizing Content Delivery 1.Delivery Speed: Content Delivery Networks CDNs cache your content at various locations around the world – reducing the round trip time
  17. 17. Optimizing Content Delivery 1.Delivery Speed: Redirects
  18. 18. © 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
  19. 19. Optimizing Content Delivery 1.Delivery Speed 2.Content Delivery
  20. 20. Optimizing Content Delivery
  21. 21. Optimizing Content Delivery Text Compression Screen filled via: 130 KB JSON file
  22. 22. 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"
  23. 23. 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
  24. 24. Optimizing Content Delivery Images
  25. 25. Scalable Vector Graphics (SVG)
  26. 26. Scalable Vector Graphics (SVG)
  27. 27. Scalable Vector Graphics (SVG)
  28. 28. Scalable Vector Graphics (SVG) https://commons.wikimedia.org/wiki/User:Quibik/Cleaning_up_SVG_files_manually
  29. 29. Scalable Vector Graphics (SVG) https://github.com/google/brotli
  30. 30. Optimizing Content Delivery Images 2560 px 1440 px 1555x1200 pixels (1.8 Mpixels)
  31. 31. Optimizing Content Delivery Image Pixel Count 2560 px 1440 px 720x556 pixels (0.4 Mpixels)
  32. 32. Image Compression Use “In The Wild” 442,000 mobile sites Analyzed 3/15/18
  33. 33. Optimizing Content Delivery Image Quality 2560 px 1440 px 85% Quality
  34. 34. Optimizing Content Delivery Image Quality 2560 px 1440 px 85% Quality
  35. 35. Image Quality Use “In The Wild” Median Savings (50th percentile): • 2.83 seconds faster page load • 419KB less data
  36. 36. Optimizing Content Delivery Images: Putting it Together 2560 px 1440 px 85% Quality & 720x556 pixels
  37. 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. 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. 39. Optimizing Content Delivery Images and Devices https://twitter.com/paulcalvano/status/928751141843808256
  40. 40. Optimizing Content Delivery Responsive Images http://www.responsivebreakpoints.com/
  41. 41. Optimizing Content Delivery Preview Images
  42. 42. Optimizing Content Delivery Preview Images https://github.com/technopagan/sqip
  43. 43. Web Usage https://www.nngroup.com/articles/scrolling-and-attention/ https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/
  44. 44. Lazy Loading https://www.nngroup.com/articles/scrolling-and-attention/ https://calendar.perfplanet.com/2017/progressive-image-loading-using-intersection-observer-and-sqip/
  45. 45. Lazy Loading Use “In The Wild” 442,000 mobile sites Analyzed 3/15/18
  46. 46. Optimizing Content Delivery Animated GIFs Original MP4 1.4 MB
  47. 47. Optimizing Content Delivery Animated GIFs Animated GIF 3.8 MB 270% larger
  48. 48. Optimizing Content Delivery Animated GIFs
  49. 49. Optimizing Content Delivery Animated GIFs MP4: 256 colors 247KB 93% smaller
  50. 50. Optimizing Content Delivery 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/
  51. 51. Optimizing Content Delivery
  52. 52. 53 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
  53. 53. 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
  54. 54. 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
  55. 55. Video <video Preload = “auto” src="goats.mp4" /> Best to use ”metadata” or “none”
  56. 56. 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
  57. 57. 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:
  58. 58. 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
  59. 59. Optimizing Content Delivery Video Streaming: Test on Fast Wi-Fi
  60. 60. 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
  61. 61. Optimizing Content Delivery As long as Video download is faster than Playback…. What Leads to Stalls?
  62. 62. Optimizing Content Delivery What Leads to Stalls? Video Download slower than playback, so the video stalls Buffer is filling, but video has not resumed
  63. 63. Optimizing Content Delivery Balancing the Network with Playback Player uses available streams to balance download with playback
  64. 64. 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
  65. 65. Optimizing Content Delivery Video Streaming Large jumps in throughput can lead to streaming issues
  66. 66. Optimizing Content Delivery Video Streaming Large throughput gaps can lead to many stream changes – which can be visible to user
  67. 67. 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
  68. 68. 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
  69. 69. 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

Notes de l'éditeur

  • 1149 bytes, 700 Zipped
  • 1149 bytes, 700 Zipped
  • 1149 bytes, 700 Zipped
  • 1149 bytes, 700 Zipped
  • 1149 bytes, 700 Zipped
  • 1.8 MP
  • 0.4 MP
  • file:///Users/demo/Documents/reponsiveimages.html
  • file:///Users/demo/Documents/reponsiveimages.html
  • file:///Users/demo/Documents/reponsiveimages.html
  • file:///Users/demo/Documents/reponsiveimages.html

×