High PerformanceSnippets        stevesouders.com/docs/fluent-snippets-20120530.pptx      Disclaimer: This content does not...
synchronous scripts blockall following elementsfrom renderingin all browsers
async#failasync           sync   async
Frontend SPOF
http://www.webpagetest.org/result/120529_41_HWV/
http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html
/etc/hosts:72.66.115.13 apis.google.com72.66.115.13 www.google-analytics.com72.66.115.13 static.ak.fbcdn.net72.66.115.13 c...
original snippet<script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({  version: 2,  type...
<script>                           asyncified snippetfunction doTwitter() {  if ( this.readyState && this.readyState != "c...
But... you can’t make a script async if it does document.writewidget.js does document.write:init: function(x) {  ...  this...
asyncified snippet plus DIV<div class=‘twtr-widget’ id=‘souderstwitter’></div><script>function doTwitter() {  if ( this.re...
before
after
While placing JavaScript files at the bottom of thepage is a best practice for website performance,when including the anyw...
three facts: 1. failures happen 2. 304 & 200 both produce    frontend SPOF 3. anywhere.js expires after    15 minutes
snippet cache timeshttp://platform.twitter.com/widgets.js - 30 minshttp://connect.facebook.net/en_US/all.js - 15 minshttp:...
“bootstrap scripts” often have short cache timesmore frequent Conditional GET requests means frontend SPOF is more likelyb...
self-updating bootstrap scriptsstevesouders.com/blog/2012/05/22/self-updating-scripts/
part 1: update notificationpiggyback on dynamic requestpass cached version # to server: ?v=127server returns: 204 – no upd...
part 2: overwrite cachere-request dynamicallyrev the URL (querystring)XHR w/ setRequestHeaderreload iframe containing boot...
example load bootstrap script: var s1=document.createElement(script); s1.async=true; s1.src=http://souders.org/tests/selfu...
send beacon: http://souders.org/tests/selfupdating/beacon.js?v   =02:29:53 beacon response triggers  update: var iframe1 =...
iframe reloads itself: <script   src="http://souders.org/tests/selfupdating/boot   strap.js"> </script> <script> if (locat...
voilàbootstrap scripts can have long cache timesANDget updated when necessary
caveatsthe update is used on the next page view (like app cache)1 reported IE8 issue
takeawaysload 3rd party scripts asynctest your site with blackhole.webpagetest.orghave RUM timeoutmake bootstrap scripts s...
Steve Souders                                        @soudersstevesouders.com/docs/fluent-snippets-20120530.pptx
High Performance Snippets
High Performance Snippets
High Performance Snippets
High Performance Snippets
High Performance Snippets
High Performance Snippets
Upcoming SlideShare
Loading in...5
×

High Performance Snippets

9,648

Published on

What to look for and avoid when it comes to 3rd party snippets. How to test your site for frontend SPOF. Use the self-updating script pattern to increase the cacheability of bootstrap scripts.

Published in: Technology, News & Politics
14 Comments
9 Likes
Statistics
Notes
No Downloads
Views
Total Views
9,648
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
14
Likes
9
Embeds 0
No embeds

No notes for slide
  • flickr.com/photos/bestrated1/2141687384/
  • WidgetsAdsAnalytics
  • http://www.webpagetest.org/result/120530_HS_4BA/
  • http://www.webpagetest.org/result/120530_7R_4BJ/
  • http://www.webpagetest.org/result/120530_7R_4BJ/
  • http://www.webpagetest.org/result/120530_8D_4BQ/
  • flickr.com/photos/wwarby/3296379139/
  • flickr.com/photos/juditk/5024772809/whether it’s 1 or 5 requests, frontend SPOF will still happen
  • flickr.com/photos/myklroventine/4062102754/
  • High Performance Snippets

    1. 1. High PerformanceSnippets stevesouders.com/docs/fluent-snippets-20120530.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
    2. 2. synchronous scripts blockall following elementsfrom renderingin all browsers
    3. 3. async#failasync sync async
    4. 4. Frontend SPOF
    5. 5. http://www.webpagetest.org/result/120529_41_HWV/
    6. 6. http://blog.patrickmeenan.com/2011/10/testing-for-frontend-spof.html
    7. 7. /etc/hosts:72.66.115.13 apis.google.com72.66.115.13 www.google-analytics.com72.66.115.13 static.ak.fbcdn.net72.66.115.13 connect.facebook.net72.66.115.13 platform.twitter.com72.66.115.13 widgets.twimg.comWebPagetest:setDnsName apis.google.com blackhole.webpagetest.orgsetDnsName www.google-analytics.com blackhole.webpagetest.orgsetDnsName static.ak.fbcdn.net blackhole.webpagetest.orgsetDnsName connect.facebook.net blackhole.webpagetest.orgsetDnsName platform.twitter.com blackhole.webpagetest.orgsetDnsName widgets.twimg.com blackhole.webpagetest.orgnavigate http://www.businessinsider.com/
    8. 8. original snippet<script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({ version: 2, type: profile, ...}).render().setUser(souders).start();</script>
    9. 9. <script> asyncified snippetfunction doTwitter() { if ( this.readyState && this.readyState != "complete" && this.readyState != "loaded" ) { return; } this.onload = this.onreadystatechange = null; new TWTR.Widget({ version: 2, type: profile, ... }).render().setUser(souders).start();}var ts = document.createElement("script");ts.async = true;ts.onload = ts.onreadystatechange = doTwitter;ts.src = "http://widgets.twimg.com/j/2/widget.js";var s0 = document.getElementsByTagName(script)[0];s0.parentNode.insertBefore(ts, s0);</script>
    10. 10. But... you can’t make a script async if it does document.writewidget.js does document.write:init: function(x) { ... this.id = x.id || "twtr-widget-" + this._widgetNumber; if (!x.id) { document.write(<div class="twtr-widget" id=" + this.id + "></div>) }}What if we create the DIV and specify the id?
    11. 11. asyncified snippet plus DIV<div class=‘twtr-widget’ id=‘souderstwitter’></div><script>function doTwitter() { if ( this.readyState && this.readyState != "complete" && this.readyState != "loaded" ) { return; } this.onload = this.onreadystatechange = null; new TWTR.Widget({ id: ‘souderstwitter’, version: 2, type: profile, ... }).render().setUser(souders).start();}var ts = document.createElement("script");ts.async = true;...
    12. 12. before
    13. 13. after
    14. 14. While placing JavaScript files at the bottom of thepage is a best practice for website performance,when including the anywhere.js file, always placethe file as close to the top of the page as possible.The anywhere.js file is small (<3KB) and is deliveredto the page GZIPd.Further, all dependancies for @Anywhere featuresare loaded asynchronously, on-demand so as to notimpact performance of the host page.
    15. 15. three facts: 1. failures happen 2. 304 & 200 both produce frontend SPOF 3. anywhere.js expires after 15 minutes
    16. 16. snippet cache timeshttp://platform.twitter.com/widgets.js - 30 minshttp://connect.facebook.net/en_US/all.js - 15 minshttp://www.google-analytics.com/ga.js - 120 mins
    17. 17. “bootstrap scripts” often have short cache timesmore frequent Conditional GET requests means frontend SPOF is more likelybut short cache times is the only way snippet owners can push updatesor is it?
    18. 18. self-updating bootstrap scriptsstevesouders.com/blog/2012/05/22/self-updating-scripts/
    19. 19. part 1: update notificationpiggyback on dynamic requestpass cached version # to server: ?v=127server returns: 204 – no update JS – new version available
    20. 20. part 2: overwrite cachere-request dynamicallyrev the URL (querystring)XHR w/ setRequestHeaderreload iframe containing bootstrap script
    21. 21. example load bootstrap script: var s1=document.createElement(script); s1.async=true; s1.src=http://souders.org/tests/selfupdating/boo tstrap.js’; var s0=document.getElementsByTagName(script’)[0]; s0.parentNode.insertBefore(s1, s0);stevesouders.com/tests/selfupdating/
    22. 22. send beacon: http://souders.org/tests/selfupdating/beacon.js?v =02:29:53 beacon response triggers update: var iframe1 = document.createElement("iframe"); iframe1.style.display = "none”; iframe1.src = "http://souders.org/tests/selfupdating/update.p hp?v=02:29:53"; document.body.appendChild(iframe1);stevesouders.com/tests/selfupdating/
    23. 23. iframe reloads itself: <script src="http://souders.org/tests/selfupdating/boot strap.js"> </script> <script> if (location.hash === ) { location.hash = "check”; location.reload(true); } </script> reload triggers Conditional GET cached script is updatedstevesouders.com/tests/selfupdating/
    24. 24. voilàbootstrap scripts can have long cache timesANDget updated when necessary
    25. 25. caveatsthe update is used on the next page view (like app cache)1 reported IE8 issue
    26. 26. takeawaysload 3rd party scripts asynctest your site with blackhole.webpagetest.orghave RUM timeoutmake bootstrap scripts self- updating & increase cache times
    27. 27. Steve Souders @soudersstevesouders.com/docs/fluent-snippets-20120530.pptx

    ×