01 Dec

Head JS Speeds Up, Simplifies & Modernizes Your Site

Code, MIT License

Leave a Comment

The HEAD section is the worst place to load scripts. It’s painfully slow. The more and the bigger the worse it gets. Move the scrips to the bottom of the page and you cannot use HTML5 and CSS3 safely.

The single best solution to this universal problem is to include Head JS on top of the page and load rest of the scripts with it. Head JS speeds up, simplifies and modernizes your site. Head JS loads scripts in parallel without blocking the page. The performance will be improved even with a single minified script.

Requirements: Javascript Enabled
Demo: http://headjs.com/
License: MIT License

Sponsors

Comments

James

This looks excellent, has anyone created any tests/examples yet? When I get a bit of time I will try it out on my rather JS heavy web app. (We use ExtJS)

I did notice this at the bottom of the page: “The library is not production ready yet” – not immediately obviously when you first look at the site.
Shaun

Looks interesting. Wish he provided the script with only the js loader. People that already use modernizr (me) don’t need most of the other stuff it provided. Perhaps I should make a fork of the current branch and remove all the extras.
Shaun

If anyone is interested, it looks like he already does provide a “loader-only” version:

https://github.com/headjs/headjs/blob/master/src/head.loader.js
http://www.crystalaxis.com Asela

Looks very promising…
Zoran

Idea is great, but I tried this and got some strange behavior: head.js added some opacity to my tag … I will wait until 1.0 version, but idea is realy great!
fakitol

I’m adding in the head:

<script src="js/head.min.js” type=”text/javascript”>

head.js(”js/jquery-1.4.4.min.js”);
head.js(”fancybox/jquery.fancybox-1.3.4.pack.js”);
head.js(”fancybox/jquery.mousewheel-3.0.4.pack.js”);
head.js(”uploader/swfobject.js”);
head.js(”uploader/jquery.uploadify.v2.1.0.js”);

… and it doesn’t work at all. The files are loaded, but they doesnt execute.
http://www.hireprofessionalwebdevelopers.com/ Hire Web Developer

Sounds great. Has anyone got this to work
http://zacklive.com Zack

Sounds great, is anyone using Head JS in action? I’d like to see how it works.
http://blog.creativeboulder.com/ creativeboulder

Great stuff. This is a really good library. I noticed nobody has posted to this in a few months, so I figured I would weigh in. By now, head.js is at version 0.9 and functional. (Download at http://headjs.com/#download). After working with it for a full day on a beta website, I actually re-worked all of my javascript on this traffic heavy website and have head.js working great. I use a lot of PHP to pull scripts and code based on the environment variables and page variables, and adding head.js and utilizing it to load my scripts and work with css redirection has been great. I was able to cleanup enough and save about 1.55 seconds on the load time. After testing on different platforms and browsers, I have offically published this website live with head.js.

Head.js is almost there, I know there are some upcoming features according to the website and in a production environment it is functional. It would be nice to see maybe some javascript and css compression functions built in (I guess, I could work on something like that if I had time, you can fork it on GitHub).

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact