HeadJS script - testing web page loading speeds





0/5 (0 vote)
Head.js (http://headjs.com/) is tiny script which improves loading speed of your websites/pages.
The latest version is version 0.9. Demo on the headjs.com has some problems, I find it really strange that developer has not yet updated javascript links within headjs demos (there are 404 errors and js wont load). So they are basically worthless if you try to measure speed.
I have removed all github links and added various CDN javascript libraries. Now all the libraries are working, return status 200 OK. Point of CDN usage is that scripts wont be slowed by speed of my web server and most of these javascript get loaded from CDN anyway.
Original test is from head.js website, it calculates how long it takes to load page either using classic <script> within <head> or using just one <script src="head.js"> library and rest specifying as javascript call:
head.js("https://ajax.googleapis.com/ajax/libs/yui/3.3.0/build/yui/yui-min.js") .js("http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js") .js("https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js") .js("https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js") .js("https://ajax.googleapis.com/ajax/libs/mootools/1.3.1/mootools-yui-compressed.js") .js("http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js");You can try amended benchmars here:
HeadJS demo with script src (i am ignoring bottom <script> locations):
http://www.feronovak.com/test/headjs/script.html
HeadJS demo with head.js
http://www.feronovak.com/test/headjs/headjs.html
I have disabled all extensions, addons, plugins for all browsers to make it as fair as possible. Still this is not any scientific test and methods used are pretty lame. But it works for me as this is how normal person browsing a page will see it.
And my results (please feel free to post your times in discussion):
Chrome 10.0.648.151
SCRIPT SRC DEMO
- 1st run, empty cache: 261ms
- 2nd run, cached files: 38ms
HEAD.JS DEMO
- 1st run, empty cache: 24ms
- 2nd run, cached files: 14ms
Firefox 4.0
SCRIPT SRC DEMO
- 1st run, empty cache: 263ms
- 2nd run, cached files: 111ms
HEAD.JS DEMO
- 1st run, empty cache: 261ms
- 2nd run, cached files: 108ms
Internet Explorer 9.0
SCRIPT SRC DEMO
- 1st run, empty cache: 368ms
- 2nd run, cached files: 116ms
HEAD.JS DEMO
- 1st run, empty cache: 18ms
- 2nd run, cached files: 8ms
Internet Explorer 8 (IETester)
SCRIPT SRC DEMO
- 1st run, empty cache: 361ms
- 2nd run, cached files: 206ms
HEAD.JS DEMO
- 1st run, empty cache: 16ms
- 2nd run, cached files: 14ms
Internet Explorer 6 (IEtester)
SCRIPT SRC DEMO
- 1st run, empty cache: 670ms
- 2nd run, cached files: 180ms
HEAD.JS DEMO
- 1st run, empty cache: 21ms
- 2nd run, cached files: 15ms
It seems that head.js really can improve webpage loading times. However, I won't be putting it into my projects until I am 100% sure it works well with all the JQuery plugins and javascript codes. But big thanks to developer for creating such useful tool, I am sure that many sites will use this soon (or in fact use it already).