This document summarizes a presentation on debugging front-end performance issues. It discusses identifying single points of failure from third-party scripts and social widgets that can block loading. It recommends monitoring for failures, loading scripts asynchronously, and using a "black hole" to simulate outages for testing. Detection and mitigation of blocking third-party code is important to ensure fast page loads.

1. DEBUGGING
FRONT-END PERFORMANCE
Tim Kadlec (@tkadlec) & Pat Meenan (@patmeenan)
June 20-21, 2016 at Velocity Conference (#velocityconf)

2. SINGLE POINT OF
FAILURE (SPOF)

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. <script src=“……”></script>

6. http://youtu.be/HSbHNIvhOFU

7. WHEN IT IS UNAVAILABLE…

8. http://youtu.be/3-zaos02CxI

9. <script src=‘https://apis.google.com/js/plusone.js’></script>
BECAUSE OF

10. • 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…

11. <link rel=“stylesheet” type=“text/css”
href=‘http://fonts.googleapis.com/css?family=…’>
…AND FONTS

12. …AND TAG MANAGERS
http://memegenerator.net/instance/27291297

13. …AND A/B TESTING
… ads
… code libraries

14. OVER THE LAST 3 YEARS
http://httparchive.org/trends.php

15. • 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…

16. twitter.com/decadecity/status/635800414651314176

17. <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

18. <script src=‘https://apis.google.com/js/plusone.js’
async></script>
MODERN ASYNC

19. http://caniuse.com/#feat=script-async

20. http://youtu.be/krin-F65Fd8

21. 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

22. http://memegenerator.net/instance/27291866

23. • Fails FAST! (connections rejected)
• Not good for real failure scenarios
ROUTING TO LOCALHOST

24. 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.

25. ON WEBPAGETEST.ORG
ajax.googleapis.com
apis.google.com
www.google-analytics.com
connect.facebook.net
platform.twitter.com

26. SPOF-O-MATIC
https://github.com/pmeenan/spof-o-matic
https://chrome.google.com/webstore/detail/plikhggfbplemddobondkeogomgoodeg

27. NORMAL OPERATION
Gray circle = Boring/Good

28. SPOF DETECTION
Not so much

29. THE VERGE

30. Filmstrip Video

31. NBCNEWS.COM

32. NBCNEWS.COM
https://imgflip.com/i/15kpqn

33. ABCNEWS.COM

34. whitehouse.gov
democrats.org
gop.com

35. healthcare.gov

36. • 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

37. • 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

39. THANK YOU!
Tim Kadlec (@tkadlec) & Pat Meenan (@patmeenan)
June 20-21, 2016 at Velocity Conference (#velocityconf)
Icons courtesy of The Noun Project