Load Twitter Follow Button Asynchronously

The default Twitter Follow code, the script loads the like button synchronously. When you add the synchronous Twitter Follow button to your website, Page Speed Online will tell you to prefer asynchronous resources. When I tried to use it on a minimal HTML page score goes down by 8 points. If you are like me and want to get the best score possible in Page Speed you would want to know how to make it asynchronous.

Prefer asynchronous resources - Fetching resources asynchronously prevents those resources from blocking the page load. - Page Speed Insights
Prefer asynchronous resources message on Page Speed for Twitter Follow Button

Here is the original code:

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

Here is the modified code:

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

I figured this out by looking at the Google +1 code. It was as simple as adding one line of code. I can’t understand why Twitter didn’t implement this in its code. Same applies for Facebook Like Button.

4 thoughts on “Load Twitter Follow Button Asynchronously

  1. Hi Omar,
    I like your technique of async loading of facebook script. Would you please write a post of loading ‘Videobar1’ widget of Youtube loading asynchronously. It will be great help to me. You can see Videobar1 widget on my site on left top sidebar.
    Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *