24 March 2011

HeadJS script? Is it really necessary?

I have read articles and forum posts about HeadJS script and how good it is, how it can speed up your site and basically do miracles with your sites :)

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

Results are quite clear, head.js loads page much faster than classic <script> method.


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

Really interesting this one. FF 4.0 basically wont show any difference with 1st run, same numbers for both first runs. Even more interesting is that cached run is the same speed for both versions. 


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

This is really surprising result, IE9 loads head.js fastest from all browsers. Yes, I have tried everything, I deleted cache, closed whole IE9, deleted cache and loaded page. Times are very consistent and it really is mega fast. It is even faster than Chrome 10. 


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

Again huge time difference. I am only using IEtester but it seems that it really is such a difference when loading site. Again, I am loading page without cache for 1st run, and then cached for 2nd.


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

This is most visible difference when loading the page. Old IE6 just won't die and head.js can quite improve loading time. 

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).

34 comments:

Anonymous said...

Good article and demo. Thank you.

Anonymous said...

Followed to here from one of your SO posts. My anecdotal experience has been the head.js actually does a remarkable job of speeding up the page load. Unfortunately, it is not so remarkable when it comes to older browser compatibility.

While it sort of works in IE6-7 in the sense that there are no errors, and sometimes things work, I found it very unreliable in real-world situations involving a lot of scripts. Page would just freeze and never finish loading for no particular reason, sometimes. So I had to give it up for this reason, since even though I have no love for those browsers, I can't see excluding them just for this benefit.

One possibility is browser-dependencies to use head.js only for newer browsers, but the fact that it's inconsistent worries me and I'm not interested in adding another wildcard to testing.

Anonymous said...

Please include or add Safari/webkit as it is used by many mobile devices that directly relate to this conversation.

for IT the said...

Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or learn thru Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. JavaScript Training in Chennai

for IT the said...

Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or learn thru Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. JavaScript Training in Chennai

yogesh kumar said...

I admire this article for the well-researched content and excellent wording. I got so involved in this material that I couldn’t stop reading. I am impressed with your work and skill. Thank you so much.
WordPress development company in Chennai

Praylin S said...

You are doing a great job in researching and writing worthy contents. I really appreciate your great efforts. Keep updating. Looking forward for more from you. REgards.
Javascript Training in Chennai | Javascript Training Classes | Javascript Training | Javascript Course in Chennai

Anbarasan14 said...

I believe that your blog would help the readers by giving them a useful information. Waiting for more updates from this admin.

IELTS Coaching in Mulund
IELTS Training in Mulund West
IELTS Courses in Mulund
Best IELTS Coaching Institute in Mulund
IELTS Classes in Mulund
Best IELTS Training Centres in Mulund East
IELTS Classes near me

Lithiksha said...

In the beginning, I would like to thank you much about this great post. Its very useful and helpful for anyone looking for tips. I like your writing style and I hope you will keep doing this good working.
CCNA Course in Chennai
CCNA Training in Chennai
DevOps Training in Chennai
Digital Marketing Training in Chennai
SEO Training in Chennai
CCNA Training in Anna Nagar
CCNA Course in T Nagar

lekha mathan said...

Thank you so much for providing information on this. It was very useful.
Aviation Academy in Chennai
Air hostess training in Chennai
Airport management courses in Chennai
Ground staff training in Chennai
Medical coding training in Chennai
Fashion designing courses in Chennai
Interior design courses in Chennai

luckys said...

whatsapp group links

teena bhabhi said...

Unlimited whatsapp groups for join . click here and get unlimited whatsapp groups links for join and you can also promote your groups in this website - http://whatscr.com

teena bhabhi said...

The best indian dating website in world . you will get unlimited mobile numbers of girls . click here to get girls mobile numbers
























































...................................
Post a comment




















.

VRITPROFESSIONALS said...

Nice post. Thanks for sharing! I want people to know just how good this information is in your article. It’s interesting content and Great work.
Thanks & Regards,
VRIT Professionals,
No.1 Leading Web Designing Training Institute In Chennai.

And also those who are looking for
Web Designing Training Institute in Chennai
SEO Training Institute in Chennai
Photoshop Training Institute in Chennai
PHP & Mysql Training Institute in Chennai
Android Training Institute in Chennai

Annonymous said...


we recently shared lucky patcher app download link on our blog

tricksapk said...

We shared official lucky patcher apk download link for your guys.

Lottery Winning Tips said...

Thanks for sharing valuable information.It will help everyone.keep Post.
Kerala Lottery guessing

Basudev said...

Great post
Premium Android Apps

kavithasathish said...

Excellent blog for all the people who needs information about this technology.
spanish language in chennai
spanish language classes in chennai
German Courses in Chennai
Best IELTS Coaching in Chennai
learn Japanese in Chennai
Best Spoken English Class in Chennai
Spoken English Class in Anna Nagar
spoken english course in anna nagar

technical raja said...

how to use paytm postpaid

web hosting kya hai




IndiaYojna.in

saurav said...

Great post
Top 10 cars under 5 lakhs
Top 10 cars under 6 lakhs
top 5 light weight scooty
best suv under 10 lakhs

cynthiawilliams said...

Outstanding blog with lots of information. Keep posting more like this.
ccna course in Chennai
ccna institute in Chennai
ccna Training center in Chennai
gst classes in Chennai
ReactJS Training in Chennai
Salesforce Training in Chennai
ccna course in Tambaram
ccna course in Velachery
CCNA course in Vadapalani

Rahul said...

Useful information

Top 5 best PPSSPP games for Android


Top 6 Best free online video convertor websites

Bill Gates admits losing to android as his biggest mistake


Top 9 best free tools and website to convert speech into text online

Advantages of choosing proper Antivirus for your PC


Top 8 Reasons Why Government Will Be Slow to Accept the Cloud

Things to be kept in mind while choosing a recovery software


Android vs. Other mobile Operating system and how google is best

Iamrjrahul WR3D 2K17

nowfirstviral said...

메이저토토사이트

Geo News TV said...

Thanks for sharing this article. Really helpful for me.
www.Geonewstv.com
Free Forex Signals
Daily Bitcoin Predictions

mani said...

This is a very amazing post for cheap web hosting services. in this post, you have provided all the basic information regarding.
website builder for reseller

mani said...

Comfortabl y, the post is really the freshest on that deserving topic. I harmonise with your conclusions and definitely will thirstily look forward to your next updates.

private label website builder

mani said...

Thank you for the link building list.I am going jot down this because it will help me a lot.Great blog! Please keep on posting such blog.
white label website builder

Stiff Marten said...

Thanks For Providing Us this Great Iformation .Get Our Some Quality Services Buy Adsense Accounts .
Here is also avilable Buy Adsense Accounts .
You Can Watch Adsense Earning Trick Here Youtube Channel Buy Adsense Accounts .

ACE said...

Thanks for Sharing a great information about technologies..
Spoken English in chennai
Personality development in chennai
IELTS in chennai
TOEFL in Chennai
American Accent Training in chennai
Call centre training in chennai

Anonymous said...

Hindi Dubbed Movies Download

Biswajit Das said...

Amazon Customer Care Phone Number

Amazon Customer Service Email

Amazon Live Chat Support

Return Item With Amazon Return Policy

Amazon Affiliate Commission

sanjana singh said...

click here
click here
click here
click here
click here
click here

jeet said...

realmeroot.com

download kingoroot apk

install TWRP in Realme x

Root Realme X without PC

root Xiaomi Poco f2 without PC

root redmiK20 pro

root redmiK20 pro without PC

Root Realme phones

download picsart mod apk

How to Unlock Bootloader Of Redmi 8A

lightroom pro apk

Download Latest Official TWRP 3.3 Recovery on Android Phones [How-To Install]