Presentation on 3rd-party scripts as Single Points of Failure from Velocity Europe 2012

1. Third-Party Scripts
and You
Patrick Meenan
pmeenan@webpagetest.org
@patmeenan

2. The Performance Golden Rule
80-90% of the
end-user response
time is spent on
the frontend*
www.flickr.com/photos/oreillyconf/6326167731/
* http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/

3. Torbit Insight Real-User Data
…1,000 sites representing
6.7 billion pageviews…
…average 7% of load time
is spent on the backend
compared to a whopping
93% on the frontend.
http://torbit.com/blog/2012/09/19/some-interesting-performance-statistics/

4. Base Page
Time to First Byte
4
Actual back-end Time!

5. We can fix that!
http://www.flickr.com/photos/elsie/4742380987/

6. Social Widgets back-end API
 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

7. This Google guy is a
complete nutter
#velocityconf
Wow, to think I used to
respect @patmeenan
#velocityconf

8. But, that’s EXACTLY what this does…
<scr i pt sr c=‘ … ’ ></ scr i pt >
…

9. The Victim

10. http://youtu.be/HSbHNIvhOFU

11. When the widget is unavailable…

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

13. Because of
This: <scr i pt
sr c=‘ ht t ps: / / api s. googl e. com j s/ pl usone. j s’
/ ></ scr i p
t>
Instead of: <scr i pt >
( f unct i on( ) {
var po = docum ent . cr eat eEl ement ( ‘ scr i pt ’ );
po. sr c = ‘ ht t ps: / / api s. googl e. com j s/ pl
/ usone. j s’ ;
var s = docum ent . get El em ent sByTagNam ‘ e( scr i pt ’ ) [ 0] ;
s. par ent Node. i nser t Bef or e( po, s) ;
})();
</ scr i pt >
Or Even: <scr i pt sr c=‘ ht t ps: / / api s. googl e. com j s/ pl usone. j s’ async
/
def er ></ scr i pt >
http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/

14. And Monitoring Says…
• 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

15. Loaded Asynchronously
http://youtu.be/krin-F65Fd8

16. Loaded Asynchronously
http://youtu.be/krin-F65Fd8

17. There’s More!
On that one page, all before the main content:
<scr i pt sr c=‘ ht t p: / / code. j quer y. com j quer y-
/
1. 7. 1. mi n. j s’ ></ scr i pt >
<scr i pt
sr c=‘ ht t p: / / scr i pt s. ver t i cal acui t y. com vat / m
/ on/ vt . j s’ ></ scr i pt
>
<scr i pt sr c=‘ ht t p: / / ak. sai l - hor i zon. com scout / v1. j s’ ></ scr i pt >
/
<scr i pt sr c=‘ / / cdn. opt i m zel y. com j s/ xxxxx. j s’ ></ scr i pt >
i /
<scr i pt
sr c=‘ ht t ps: / / pl at f or m t wi t t er . com anywher e. j s’ ></ scr i pt >
. /
<scr i pt
sr c=‘ ht t p: / / www. r eddi t . com st at i c/ but t on/ but t on1. j s’ ></ scr i pt >
/
<scr i pt sr c=‘ ht t p: / / wi dget s. di gg. com but t ons. j s’ ></ scr i pt >
/

18. Watch out for Fonts!
<l i nk r el =“ st yl esheet ” t ype=“ t ext / css”
hr ef =‘ ht t p: / / f ont s. googl eapi s. com css?
/
f am l y=… >
i ’

19. And Tag Management
http://memegenerator.net/instance/27291297

20. HTTP Archive
http://httparchive.org/trends.php

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

22. High Availability Server Architectures
DNS
Read-Only Database
Load Balancers App Servers
Site 1
Database Master
Site 2

23. All for…
Base Page
(Back-end)

24. There are a LOT of requests!
http://httparchive.org/trends.php

25. http://memegenerator.net/instance/27291692
To the Front End!

26. Async Snippet
Good for code with no dependencies (widgets)
<scr i pt >
( f unct i on( ) {
var po = docum ent . cr eat eEl ement ( ‘ scr i pt ’ ) ;
po. sr c =
‘ ht t ps: / / api s. googl e. com j s/ pl usone. j s’ ;
/
var s = docum ent . get El ement sByTagNam ‘ scr i pt ’ )
e(
[ 0] ;
s. par ent Node. i nser t Bef or e( po, s) ;
})();
</ scr i pt >

27. Simple Async Snippet
 Easy to implement and describe
 Slightly slower on IE than insertBefore()
<scr i pt sr c=‘ ht t ps: / / api s. googl e. com j s/ pl usone. j s’
/ as ync
def er></ scr i pt >

28. Put Scripts at the Bottom
• Easy to implement and describe
• Delays script loading and execution later than Async at the top
…
<scr i pt
sr c=‘ / / asset s. pi nt er est . com j s/ pi ni t . j s’ ></ scr i pt >
/
</ body>

29. Protocol-relative URLs
• Look strange
• Safe across all browsers (for Javascript)
/ / aj ax. googl eapi s. com aj ax/ l i bs/ j quer y/ 1. 6. 2/ j quer y. m n
/ i
.js
I nst ead of :
ht t ps : / / aj ax. googl eapi s. com aj ax/ l i bs/ j quer y/ 1. 6. 2/ j que
/
r y. m n. j s
i

30. Async Loaders
Help for dependency chaining
• Modernizr
• LABjs
• RequireJS
• ControlJS
Modernizr.load([{
load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
}, {
load: 'needs-jQuery.js'
}]);

31. Modernizr.load([ {
load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
complete: function () {
if ( !window.jQuery ) {
Modernizr.load('js/libs/jquery-1.7.1.min.js');
}
}
}, {
load: 'needs-jQuery.js'
} ]);

32. WebFont Loader
 https://developers.google.com/webfonts/docs/webfont_loader
 Graceful fallback on failure
 Potential for unstyled content while loading

33. Well, Almost…
Desktop Browser OnLoad Blocked Mobile Browser OnLoad Blocked
Chrome Yes Android 2.x No
Firefox Yes Android 4.x+ Yes
Internet Explorer 9- No Chrome Mobile Yes
Internet Explorer 10 Yes iOS 4 No
Safari 5+ Yes iOS 5+ Yes
Opera Yes IE Mobile 9 No
http://www.browserscope.org/user/tests/table/agt1YS1wcm9maWxlcnINCxIEVGVzdBjrq90MDA

34. http://www.flickr.com/photos/phobia/2308371224/
How are we doing?

35. Widgets
Async Blocking
Google Analytics Google +1 Badge
Google +1 Button Twitter Anywhere
Twitter Tweet Button Facebook Channel File Example
Facebook Like Button Pinterest (end of body)
Digg Reditt
AddThis
ShareThis

36. Code Libraries (examples)
• Closure Library: Blocking in the head
• Dojo: Blocking in the head
• Google jsapi: Blocking (default, Async available)
• Jquery: Blocking in the head
• Moo Tools: Blocking in the head
• YUI: Blocking

37. Ad Providers
• Doubleclick: Fully Async available (October 2011)
• Adsense: Blocking script, ad itself is async
• Others: Ask – iFrame solutions are async

38. Fonts
• Fontdeck: Blocking in the head
• Fonts.com: Blocking in the head
• Google: Blocking in the head
• Typekit: Blocking in the head
• Webtype: Blocking in the head
• Loader works across all providers

39. Bonus Points
<script src=‘http://html5shim.googlecode.com/svn/trunk/html5.js’>
Minimal/No Caching
No gzip
No CDN
And wow, the trust!

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

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

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

43. On WebPagetest.org
ajax.googleapis.com
apis.google.com
www.google-analytics.com
connect.facebook.net
platform.twitter.com
http://www.webpagetest.org/

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

45. http://memegenerator.net/instance/27293101