O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Front-End Single Point of Failure - Velocity 2016 Training

Presentation from the 2016 Velocity training on debugging front-end performance

  • Entre para ver os comentários

  • Seja a primeira pessoa a gostar disto

Front-End Single Point of Failure - Velocity 2016 Training

  1. 1. DEBUGGING FRONT-END PERFORMANCE Tim Kadlec (@tkadlec) & Pat Meenan (@patmeenan) June 20-21, 2016 at Velocity Conference (#velocityconf)
  2. 2. SINGLE POINT OF FAILURE (SPOF)
  3. 3. Call directly from your back-end Returns HTML to be injected directly into your page echo file_get_contents(“http://social.patrickmeenan.com/gplus/?cookies=...”); Implementation details: • Synchronous and blocking • Do not cache the results • If you need to set a timeout, make sure it is at least 20 seconds, 45 preferred • Include all cookies sent from the client • May return javascript and set cookies SOCIAL WIDGETS BACK-END API
  4. 4. <script src=“……”></script>
  5. 5. http://youtu.be/HSbHNIvhOFU
  6. 6. WHEN IT IS UNAVAILABLE…
  7. 7. http://youtu.be/3-zaos02CxI
  8. 8. <script src=‘https://apis.google.com/js/plusone.js’></script> BECAUSE OF
  9. 9. • Server Monitoring  Base page responded in 0.160 seconds • Full-Browser Monitoring  Page loaded in 25 seconds • Analytics Page Views  Loaded and executed asynchronously • Real User Monitoring Performance Reporting  No data if user bailed before onLoad AND MONITORING SHOWS…
  10. 10. <link rel=“stylesheet” type=“text/css” href=‘http://fonts.googleapis.com/css?family=…’> …AND FONTS
  11. 11. …AND TAG MANAGERS http://memegenerator.net/instance/27291297
  12. 12. …AND A/B TESTING … ads … code libraries
  13. 13. OVER THE LAST 3 YEARS http://httparchive.org/trends.php
  14. 14. • Globally? • Social sites tend to be targets for blocking • platform.twitter.com • connect.facebook.net • apis.google.com • HTTPS as well • In an Enterprise? • Corporate policies BUT I’D NOTICE…
  15. 15. twitter.com/decadecity/status/635800414651314176
  16. 16. <script> (function() { var po = document.createElement(‘script’); po.src = ‘https://apis.google.com/js/plusone.js’; var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s); })(); </script> GOING ASYNC
  17. 17. <script src=‘https://apis.google.com/js/plusone.js’ async></script> MODERN ASYNC
  18. 18. http://caniuse.com/#feat=script-async
  19. 19. http://youtu.be/krin-F65Fd8
  20. 20. MOSTLY… Desktop Browser OnLoad Blocked Chrome Yes Firefox Yes Internet Explorer 9- No Internet Explorer 10 Yes Safari 5+ Yes Opera Yes Mobile Browser OnLoad Blocked Android 2.x No Android 4.x+ Yes Chrome Mobile Yes iOS 4 No iOS 5+ Yes IE Mobile 9 No
  21. 21. http://memegenerator.net/instance/27291866
  22. 22. • Fails FAST! (connections rejected) • Not good for real failure scenarios ROUTING TO LOCALHOST
  23. 23. YOU NEED A BLACK HOLE blackhole.webpagetest.org 72.66.115.13 hosts file 72.66.115.13 ajax.googleapis.com 72.66.115.13 apis.google.com 72.66.115.13 www.google-analytics.com 72.66.115.13 connect.facebook.net 72.66.115.13 platform.twitter.com ... Courtesy NASA/JPL-Caltech.
  24. 24. ON WEBPAGETEST.ORG ajax.googleapis.com apis.google.com www.google-analytics.com connect.facebook.net platform.twitter.com
  25. 25. SPOF-O-MATIC https://github.com/pmeenan/spof-o-matic https://chrome.google.com/webstore/detail/plikhggfbplemddobondkeogomgoodeg
  26. 26. NORMAL OPERATION Gray circle = Boring/Good
  27. 27. SPOF DETECTION Not so much
  28. 28. THE VERGE
  29. 29. Filmstrip Video
  30. 30. NBCNEWS.COM
  31. 31. NBCNEWS.COM https://imgflip.com/i/15kpqn
  32. 32. ABCNEWS.COM
  33. 33. whitehouse.gov democrats.org gop.com
  34. 34. healthcare.gov
  35. 35. • Make sure your monitoring has aggressive time limits (under 20 seconds) • Make sure your real user monitoring has an aggressive timeout • Track real user failures by region DETECTION
  36. 36. • Never load 3rd party resources synchronously • refuse 3rd party code that doesn't have an async option • Do not rely on onload for important functionality • Service Workers (upcoming segment) MITIGATION
  37. 37. THANK YOU! Tim Kadlec (@tkadlec) & Pat Meenan (@patmeenan) June 20-21, 2016 at Velocity Conference (#velocityconf) Icons courtesy of The Noun Project

×