1. Debugging Front-end Performance
Tim Kadlec & Pat Meenan
June 20-21, 2016 at Velocity Conference (#velocityconf)

2. Single Point of Failure (SPOF)

3. Social Widgets back-end API
Call directly from your back-end
Returns HTML to be injected directly into your page
echo file_get_contents(“
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

4. <script src=“……”></script>

7. When it is unavailable…

9. Because of
<script src=‘

10. And Monitoring shows… Server Monitoring Full-Browser Monitoring
Base page responded in 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

11. …And fonts
<link rel=“stylesheet” type=“text/css” href=‘

12. …And TAG MANAGERS

13. …And A/B testing
… ads
… code libraries

14. Over the last 3 years

15. But I’d notice… 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

16. twitter.com/decadecity/status/635800414651314176

17. GOING ASYNC
<script> (function() { var po = document.createElement(‘script’); po.src = ‘ var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s); })(); </script>

18. MODERN ASYNC
<script src=‘ async></script>

21. mostly… Desktop Browser OnLoad Blocked Chrome Yes Firefox
Internet Explorer 9- No
Internet Explorer 10
Safari 5+
Opera
Mobile Browser
OnLoad Blocked
Android 2.x No
Android 4.x+
Yes
Chrome Mobile
iOS 4
iOS 5+
IE Mobile 9

23. Routing to localhost Fails FAST! (connections rejected)
Not good for real failure scenarios

24. You Need a Black Hole blackhole.webpagetest.org 72.66.115.13
hosts file
ajax.googleapis.com
apis.google.com
connect.facebook.net
platform.twitter.com
...
Courtesy NASA/JPL-Caltech.

25. On WebPagetest.org ajax.googleapis.com apis.google.com
connect.facebook.net
platform.twitter.com

26. https://github.com/pmeenan/spof-o-matic
SPOF-O-Matic

27. Gray circle = Boring/Good
Normal operation
Gray circle = Boring/Good

28. SPOF detection
Not so much

29. The Verge

30. Filmstrip
Video

31. Nbcnews.com

32. https://imgflip.com/i/15kpqn
Nbcnews.com

33. abcnews.com

34. whitehouse.gov
democrats.org
gop.com

35. healthcare.gov

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

37. mitigation 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)

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