Web Design Sydney

Ever wondered where that missing second is in your blog or Web Sites loading time?

Chances are that it is getting eaten up by your feeds or third party API’s like Twitter, Facebook, Google and Flickr. We all love social media, if you don’t then you were probably the school captain throughout your education and don’t posses the intrinsic ability to Tweet, Blog at update your feed from that shiny Iphone at any given time of the day, rain, hail or shine. But for the rest of us, here is a simple solution.

I personally enjoy including Twitter feeds for myself and clients on web sites, it highlights the human side of an at times, not so human interface. But it comes at a cost, around 700 – 800 milliseconds to be precise. So to include a Twitter feed on web-sites I build It would seem that we would have to sacrifice all the hard work done to optimise the web site so we can give it the cool edginess that a twitter feed presents. But what If we still want both! The answer is Ajax, pure and simple. Load your Twitter feeds via ajax onDomReady and insert them into your page when the server is finished fetching them from the Twitterplex.

How you say?

View Demo :: MooTools

The HTML

{code type=html}

{/code}
Add this to your web-site. It is the container which the JavaScript will look for to insert your Twitter posts

The MooTools Javascript

{code type=php}
window.addEvent(‘domready’,function(){
new twitterUpdate(‘twitter-update’);
});

var twitterUpdate = new Class({
Implements: [Options, Events],
options: {},
initialize: function(element, options){
this.setOptions(options);
this.update = $(element);
this.getTweets();
},
getTweets: function() {
new Request.HTML({
method: ‘post’,
url: ‘yourserver.com’+’/ajax.php’, // Your path to the ajax
onRequest: function() { /* Add an ajax loader here*/ },
update: this.update
}).send();
}
});
{/code}
Copy this into your JavaScript file. It will run on ‘domready’ and send a request to our ajax.php file below, to retrieve our twitter posts.

The PHP

{code type=php}
/* Make a file called ajax.php and paste this code into it*/
require ($_SERVER[‘DOCUMENT_ROOT’] .’/twitter.class.php’);
$ftwitter = new twitter();
$feed = $ftwitter->userTimeline(‘YOUR TWITTER NAME’, 2);
$feed = $feed->status;
// print out your latest 2 Twitter posts!
echo ‘

‘;
echo ‘
• ‘.$feed[0]->text.’

‘;
echo ‘

• ‘.$feed[1]->text.’

‘;
echo ‘

‘;
{/code}
Pop this up on your server along with the Twitter Class linked below.

Wrapper class around the Twitter API for PHP

• Loading Times for A Plus Design (average over ten runs)
• Without ajaxian Twitter feed = 1.34 Seconds to load.
• With ajaxian Twitter feed = 0.376 Seconds to load.

The testing indicated no matter what server I put Twitter feeds on (US or AU based locations), I was seeing between 700ms and one full second added to my loading times. That certainly isn’t acceptable for an optimisation monkey such as myself, and wouldn’t surprise me if a lot of bloggers and web developers feel the same way, especially when the solution is so easy. No matter how fast the Twitter or other API servers are, it is still a Cross domain request and they are a big snafu when it comes to optimising, just ask YSlow, it will certainly mark you down for them.

Ok you have everything you need to get going, upload the Twitter wrapper class to your server (you need to rename the file from .phps to .php), link your ajax file in the ‘url’ request field and bam your done. Snappy web pages, no lag between feed calls, and A plus super happy customers and clients.

Enjoy and let me know how you go!