Speed Up Facebook / Twitter / G+ Buttons By Defining Classes to Look In

Question

It's taking forever for my social sharing links to load on my page (it's in my sandbox still, so I can't provide access). Looking through all three of the main players, they're all using getElementsByTagName and are searching through all the elements of the page.

Since I'm already assigning classes to all social instances, couldn't I just tweak the function to only look through elements with the right classes?

Maybe this isn't going to see massive speed improvements, but I'd like to squeeze out every millisecond of performance I can.

Facebook async JavaScript:

<script>
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=356176301083466";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
</script>

Twitter async JavaScript:

<script>
    !function(d,s,id){
        var js,fjs=d.getElementsByTagName(s)[0];
        if(!d.getElementById(id)){
            js=d.createElement(s);
            js.id=id;js.src="//platform.twitter.com/widgets.js";
            fjs.parentNode.insertBefore(js,fjs);
        }
    }(document,"script","twitter-wjs");
</script>

Google+ async JavaScript:

<script type="text/javascript">
    (function() {
        var po = document.createElement('script'); 
        po.type = 'text/javascript'; 
        po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; 
        s.parentNode.insertBefore(po, s);
    })();
</script>`

Answer 1

Just ran across pretty much the same thing. CSS-Tricks has a snippet for it:

(function(doc, script) {
var js, 
  fjs = doc.getElementsByTagName(script)[0],
  frag = doc.createDocumentFragment(),
  add = function(url, id) {
      if (doc.getElementById(id)) {return;}
      js = doc.createElement(script);
      js.src = url;
      id && (js.id = id);
      frag.appendChild( js );
  };
// Google+ button
add('http://apis.google.com/js/plusone.js');
// Facebook SDK
add('//connect.facebook.net/en_US/all.js#xfbml=1&appId=200103733347528', 'facebook-jssdk');
// Twitter SDK
add('//platform.twitter.com/widgets.js');
fjs.parentNode.insertBefore(frag, fjs);
}(document, 'script'));