Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/webgalli/public_html/blog/wp-includes/plugin.php on line 571

Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/webgalli/public_html/blog/wp-includes/plugin.php on line 571
Load your Tweet buttons and webpages faster with asynchronous - Team Webgalli Blog
Request quote

Asynchronous loading of the tweet button

Posted on: May 24th, 2012 by Raez Mon No Comments

As part of optimization of our home site, we noticed that the tweet button is breaking the page draw flow. It was being loaded in a blocking way so it is slowing down the page. This will create more problems when twitter is down or too busy (which is what happening always!!) So we thought a little bit and we changed it to the async way of loading. It uses basic HTML elements and transforms them with a little bit of javascript. We can load the javascript in a non-blocking way to give the user a faster page loading experience. This is another example of loading the javascripts async way by Flattr  and transform basic HTML elements into widgets:

<script type="text/javascript">
/* <![CDATA[ */
    (function() {
        var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];

        s.type = 'text/javascript';
        s.async = true;
        s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';

        t.parentNode.insertBefore(s, t);
    })();
/* ]]> */
</script>

You can use the same method for the following twitter button

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Replace it to the following and now the tweet button will be loaded asynchronised

<script type="text/javascript">
//<![CDATA[
(function() {
        var twitterScriptTag = document.createElement('script');
        twitterScriptTag.type = 'text/javascript';
        twitterScriptTag.async = true;
        twitterScriptTag.src = 'http://platform.twitter.com/widgets.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(twitterScriptTag, s);
})();
//]]>
</script>
Tags: , , ,