Increase Speed When Using A Twitter Widget

Adding an Official Twitter Widget on your website is quite simple. They even give you a wizard that helps you personalize the look & feel. But using the script will slow down your website because it has to load the file and access the Twitter API while at the same time your website is loading.

So we did a little trick and changed the script to wait until the website has fully loaded and only then allow the Widget to start loading tweets. Let’s check out the code!

First, we save the TWTR.Widget in a javascript variable called oTweet…

	var oTweet = new TWTR.Widget({ version: 2, type: 'profile',...}); 

…instead of just instance the class:

	new TWTR.Widget({ version: 2, type: 'profile',...});

After the code that instance the oTweet object, we use jQuery.ready() function to trigger the Twitter JavaScript Widgets methods to create the look & feel and to access the Twitter API:

jQuery(document).ready(function() {
	oTweet.render().setUser('noamdesign').start();
});

Check out the new code here:

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>

var oTweet = new TWTR.Widget({
 version: 2,
 type: 'profile',
 rpp: 6,
 interval: 4000,
 width: 186,
height: 131,
 theme: {
   shell: {
     background: '#333333',
     color: '#ffffff'
   },
   tweets: {
     background: '#000000',
     color: '#ffffff',
     links: '#4aed05'
}
 },
 features: {
   scrollbar: false,
   loop: false,
   live: true,
   hashtags: true,
   timestamp: true,
   avatars: false,
   behavior: 'default'
 }
});

jQuery(document).ready(function() {
	oTweet.render().setUser('noamdesign').start();
});
</script>

Now, compare with the Twitter Widget original code:

<script src="http://widgets.twimg.com/j/2/widget.js"></script> <script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('noamdesign').start();
</script>

Simple enough! I hope you enjoy the trick and feel free to comment!