Velocity EU 2012 - Third party scripts and you
Download as PPT, PDF9 likes2,594 views
The document discusses strategies for loading third-party scripts asynchronously to improve page load performance. It notes that the frontend accounts for 80-90% of end user response time and recommends loading scripts asynchronously using techniques like async, defer, and loading scripts at the bottom of the page. It also discusses tools for monitoring performance when third-party scripts are blocked.
![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/](https://image.slidesharecdn.com/third-partyscriptsandyou-121004100139-phpapp02/85/Velocity-EU-2012-Third-party-scripts-and-you-13-320.jpg)
![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 >](https://image.slidesharecdn.com/third-partyscriptsandyou-121004100139-phpapp02/85/Velocity-EU-2012-Third-party-scripts-and-you-26-320.jpg)
![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'
}]);](https://image.slidesharecdn.com/third-partyscriptsandyou-121004100139-phpapp02/85/Velocity-EU-2012-Third-party-scripts-and-you-30-320.jpg)
![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'
} ]);](https://image.slidesharecdn.com/third-partyscriptsandyou-121004100139-phpapp02/85/Velocity-EU-2012-Third-party-scripts-and-you-31-320.jpg)
Velocity EU 2012 - Third party scripts and you
- 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
- 11. When the widget is unavailable…
- 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
- 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
- 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!
- 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