How To: Load Scripts Faster on Your Webpage

This may be an old trick, but it is still very useful. Head.js proudly proclaims that it is the only script you need in your head. You can use it to parallel load all your scripts. This is much faster than loading them one by one.

Step 1: Download Head.js

It can be found at http://headjs.com. Save it to the same directory as the html file your working on is saved.

Step 2: Add This Between Your Head Tags!

<Script>

</script>

<script src="head.min.js"></script>

Step 3: Add This Between Your Script Tags.

head.js("file1.js", "file2.js", "file3.js");

Except replace the file names with the names of your js files.

Step 4: So Far It Should Look Like This:

<script src="head.min.js"></script>
<script>
head.js("less.js", "jquery.js");
</script>

Step 5: Style Sheets

If you are planning to link any external style sheets. Make sure you put it before script src. Otherwise it wont work, I had to learn this the hard way.

Step 6: Enjoy.

You should notice a considerable change in your sites performance. Other guides to speed up your site will be coming soon.

Image from Photobucket