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

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>`

Answers:

Answer

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'));
Answer

First of all, I doubt it’s the DOM traversing that really slows things down (DOM traversing is usually quick in modern browsers) – usually it’s rather the HTTP requests to the iframe sources that make it seem “slow” to the user.

But if you wanna give it a try, here’s what you can do for Facebook (if the others offer something similar, you’d have to look in their docs):

  • initialize the JS SDK without xfbml=1, then it won’t look throught your document for XFBML tags to render automatically.

  • use FB.XFBML.parse afterwards. Unfortunately, this method accepts only a reference to a single DOM element as a parameter – so you can’t pass it something like a “selector” or something. But you could use jQuery or something to get the relevant elements in your page, and then call that method on each of them in a loop.

But, as I said in the beginning – i doubt it’ll speed things up noticeably.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.