Ignite

Quite recently i’ve been reading and hearing things from the yahoo ui team’s research about page loading times. One thing that i was waiting to hear all about was the effect the ever-growing mountain of script tags importing various javascript files was having on page load times, we’ve all noticed it, but these guys did the testing to prove it.

So in a current project i’m working i saw this problem becoming ever increasing as i got to 5 and 6 javascript files being imported into my code in the header tag. One of their solutions was to put some at end of the file if you can, this will only increase the PERCEIVED load time, the script still has to load, just later down the page.

They also talked about how multiple requests and other EXTERNAL requests would invoke more DNS lookups and therefore, impact on the performance. This can be seen at it’s worse with google adwords and google analytics lookups sometimes taking forever to respond. However, at my end of the problem, just the fact i had to load 6 scripts was making a small indent in the page load time, i could see the short freeze at th start of the page while it sucked down all those files.

Surely 1 big file, containing all this stuff would be better than 6 files each with their own, right? (*shrug* maybe i’m wrong). So, a short php script:

< ?php// Base directory for importing (absolute local path)
$root = "/var/www/html/";
// Scripts array contains just 1 value, a string pointing to the location
// of your file in reference to $root
$scripts[0] = "includes/js/blah.js";
$scripts[1] = "includes/js/test.js";
$scripts[2] = "includes/js/test2.js";
foreach($scripts as $script) {
 $f = file($root.$script);
 foreach($f as $line) {
 	print($line);
 }
}
?>

Basically, you add all your js files to the array $Scripts and it steps over and prints them all out line by line. Did the short wait go away? Yes! Did the page load times improve? Yes, marginally, but it did improve.