I have come across a new tool to enable faster web page loads by loading all of the Javascript files in parallel without blocking the page. This is achieved through using a Javascript class called 'Head.js' (http://headjs.com/), then loading the Javascript files through this. My first thought was that it may have other implications, and I searched for other user comments and found that the feedback is largely positive; there's a few issues users may have in certain instances, but these are documented. Largely, I think that Head.js is a simple and good idea; why didn't anyone think of this sooner?
The creator of Head.js has developed an example page where you can see this in action and compare it with loading the page with or without the use of Head.js. This can be found here: http://headjs.com/test/headjs.html.
I decided to put it to the test with a quick change to a website to see the difference in page loading. I have used YSlow, a Firefox Firebug add-on, to view the page load speed and size. Unfortunately, I did not see a difference in the performance rating, and the page size was slightly higher when adding the new Javascript file for Head.js. (I'm not sure what the reason is, but when completing the test based on page loading per miliseconds, my results were varied in favour of both ways.) So, my test was inconclusive.
I tried the same with the test comparison pages on the Head.js website, which is a simple test with no other distractions which may slow down the website. (Possibly the number of resources on my test page was slowly down loading at times, while other times loading was quicker.). Although the Head.js page is slightly larger and an extra Javascript file is loaded, the performance indicator is a lower number than loading the Javascript files in the <HEAD> tags. However, with several refresh attempts, I notice that the grade rating is higher for the page that uses Head.js; the Head.js is listed as a grade 'B' while the other page is a grade 'A'. This rating is possibly due to adding the extra Javascript file. Where the difference in this changes is when refreshing the page with cleared cache. This marks both pages to grade 'B', but the Head.js page has a better performance rating.
In conclusion, using Head.js can help to improve the page's loading speed if you are loading many Javascript files, but the most benefit seems to come from the page loading for the first time, before the page and files are cached. There will be an extra Javascript file to load, which makes the page only slightly larger. I suggest trying a variety of ways to refactor web pages, and if loading a lot of separate Javascripts, it would be worth trying and monitoring the Head.js solution to see if it suits your needs.
The creator of Head.js has developed an example page where you can see this in action and compare it with loading the page with or without the use of Head.js. This can be found here: http://headjs.com/test/headjs.html.
I decided to put it to the test with a quick change to a website to see the difference in page loading. I have used YSlow, a Firefox Firebug add-on, to view the page load speed and size. Unfortunately, I did not see a difference in the performance rating, and the page size was slightly higher when adding the new Javascript file for Head.js. (I'm not sure what the reason is, but when completing the test based on page loading per miliseconds, my results were varied in favour of both ways.) So, my test was inconclusive.
I tried the same with the test comparison pages on the Head.js website, which is a simple test with no other distractions which may slow down the website. (Possibly the number of resources on my test page was slowly down loading at times, while other times loading was quicker.). Although the Head.js page is slightly larger and an extra Javascript file is loaded, the performance indicator is a lower number than loading the Javascript files in the <HEAD> tags. However, with several refresh attempts, I notice that the grade rating is higher for the page that uses Head.js; the Head.js is listed as a grade 'B' while the other page is a grade 'A'. This rating is possibly due to adding the extra Javascript file. Where the difference in this changes is when refreshing the page with cleared cache. This marks both pages to grade 'B', but the Head.js page has a better performance rating.
In conclusion, using Head.js can help to improve the page's loading speed if you are loading many Javascript files, but the most benefit seems to come from the page loading for the first time, before the page and files are cached. There will be an extra Javascript file to load, which makes the page only slightly larger. I suggest trying a variety of ways to refactor web pages, and if loading a lot of separate Javascripts, it would be worth trying and monitoring the Head.js solution to see if it suits your needs.
Leave a comment