WebAppers

/ best free open source web resources /

Shopify

Head JS Speeds Up, Simplifies & Modernizes Your Site

Posted Ā· Category: Code, MIT License

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.

headjs

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

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

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons