JavaScript Render Block

Question

Trying to understand how to eliminate or minimize render delay of different JavaScript libraries on a site.

For example, if I want to load the "instant" follow buttons from many Social Networks, they seem to block each other out of rendering and you get unpleasant pop-ins.

<div id="fb-root"></div>
<script>
(function(d, s) {
    var j, h = d.getElementsByTagName(s)[0],
        f = d.createDocumentFragment(),
        add = function(u, i) {
            if (d.getElementById(i)) {
                return;
            }
            j = d.createElement(s);
            j.src = u;
            i && (j.id = i);
            f.appendChild(j);
        };

    add('http://apis.google.com/js/plusone.js');
    add('http://connect.facebook.net/en_US/all.js#xfbml=1', 'facebook-jssdk');
    add('http://platform.twitter.com/widgets.js', 'twitter-wjs');
    add('http://platform.linkedin.com/in.js');
    add('http://assets.pinterest.com/js/pinit.js');


    h.parentNode.insertBefore(f, h);
}(document, 'script'));
</script>


<div id="wrapper" style="width:100%; max-width:800px; margin-left:auto; margin-right:auto; text-align:center;">
    <div id="widgetWrapper" style="width:100%; max-width:800px; background-color: #eee; padding: 10px; margin-left:auto; margin-right:auto;">
        <div class="followBox">
                <div class="fb-like" data-href=" " data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
        </div>
        <div class="followBox">
                <div class="g-follow" data-annotation="bubble" data-height="20" data-href=" " data-rel="author"></div>
        </div>
        <div class="followBox">
                <a href=" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow </a>
        </div>
        <div class="followBox">
                <div class="g-ytsubscribe" data-channel=" " data-layout="default" data-count="default"></div>
        </div>
        <div class="followBox">
                <iframe class="btn" frameborder="0" border="0" scrolling="no" allowtransparency="true" height="25" width="113" src="http://platform.tumblr.com/v1/follow_button.html?button_type=2&tumblelog= &color_scheme=dark"></iframe>
        </div>
        <div class="followBox">         
                <script type="IN/FollowCompany" data-id=" " data-counter="right"></script>
        </div>
        <div class="followBox">
                <a data-pin-do="buttonFollow" href="http://www.pinterest.com/ /">Fun Paw Care</a>
        </div>      
    </div>
</div>

What can be done about this type of render blocking from JS in general? Not specifically just social network buttons, they just provide the best example.

Answer 1

You have very little control over your code this way.

You're actually calling to five different sites in order to load and run their code. If only one site will be a little busy you'll end up in a delayed display on your site.

There are workarounds for this problem and you can see examples almost everywhere.

There are some solutions available:

Homemade social buttons - you create and draw your own icons and attach the external site code 'under the hood'. It may seems like a simple solution but the last time I checked, it involved editing not-so-small lines of code. Personally I'd advise this as a last resort.

One button to rule them all - You probably saw it on other pages, a small sharing button that expand into a box with all you favorite social sites. These come pre-made and are an easy solution.

Patient is virtue - you warp all your links in a hidden container and display it after all renderings are done. The user will see the buttons appear together a few seconds after the site loads.

And keep in mind that javascript has a pretty much one track mind. Even if all your code was stored locally it still would take turns to render all of it.