Nov 03 2012

JavaScript-Turbo: Head.js Speeds Up Your Website

Advertisement

Complex websites would not work well without JavaScript. Often there are several scripts residing in the head of your HTML document. The more you embed, the slower your website, potentially. Head.js is a JavaScript tool that calls itself the only script you need. We have put it to the test and found out that Head.js can really boost the performance on websites with several scripts. The more scripts you call in the head the higher the effect Head.js can provide.


Head.js

How to embed and use Head.js

Obviously the first thing you will have to do is embed Head.js in the head of your HTML document. Configuring the variable head_conf you can set several options necessary for some of the special features:

1
2
3
4
5
<script>
  var head_conf = { ... }
</script>
 
<script src="/js/head.min.js"></script>

Loading several JavaScripts at once with Head.js

The main function of Head.js is the ability to load several scripts in one single blow. Instead of you having to fetch each script individually, Head.js takes over this task like this:

1
head.js("file1.js", "file2.js", "file3.js");

While files via the element script are usually loaded one after the other, Head.js cares for loading in parallel. It is easily imaginable that this strategy leads to faster loading of style sheets and images, securing that the whole page feels much faster.

Browser- and Feature-Detector for CSS

Especially the use of CSS3 is not without problems as not all browsers in the wild support the coming standard. Head.js comes with special classes for the definition of styles for individual browsers:

1
2
3
.webkit p {
  color: red;
}

The example above shows the content of all the p-tags in red, but only while being viewed through the eyes of a webkit-browser. You can explicitly define styles for browsers that support certain CSS3 properties or you can define styles for browsers that do not support certain properties:

1
2
3
4
5
6
7
.borderimage div {
  border-image: url("border.png") 25% repeat;
}
 
-no-borderimage div {
  border: 1px solid green;
}

In this example we equip div elements with the property border-image in browsers that support it (.borderimage). All non-supportive browsers (.no-borderimage) simply show a green frame around the element.

Head.js has corresponding classes for every CSS3 property there is.

How to use CSS3 on different breakpoints with Head.js

Another feature of Head.js is the possibility to define style sheets corresponding to different resolutions. You could also do it by the use of media queries, but let’s take a look at it:

1
2
3
.lt-1024 p {
&nbsp; font-size: 10px;
}

If the resolution is below 1024 pixels, the font-size is set to 10 point. The resolutions to be responded to are defined via the variable head_conf:

1
var head_conf = { screens: [800, 1024] };

HTML5 in the ancient Internet Explorer

Elderly browsers – most notably older versions of the Internet Explorer – ignore HTML5 elements such as SECTION, ARTICLE and the like. Head.js takes care to make sure even ancient browsers present these elements correctly.

This is more or less simple as the elements are usual containers such as divs. Thus Head.js only has to make sure that browsers interpret them as intended.

Conclusion: Take a thorough look at Head.js. It is worth it. There are more features to explore.

(dpe)

About the Author

Denis works as a freelance web designer since 2005.

Homepage

Comments and Discussions
  • Andy Feliciotti, 03 November 2012

    I use head.js and must say it’s a great addition to any site, I also love the add ons that you mentioned in it

  • Theo, 03 November 2012

    Great way to improve your website’s speed. Thanks for sharing!

  • Ryan Mann, 06 November 2012

    Great addition!

  • SOS, 11 November 2012

    What about. Serious comparison compared to require.js or common, should it be used in addition to the latter?

    If I use require,js why should I use it ?

  • Robert, 12 November 2012

    @SOS

    HeadJS actually caters to 3 categories (responsive design, feature detection, script loading), wrapped into 1 package. Most people know of or advocate the script loading part.

    If you’re just into script loading or are using RequireJS on an advanced level, then be sure to stick with it. HeadJS will offer you nothing extra (except css loading maybe). However if are more into responsive design & feature detection then there’s a chance HeadJS will offer you some neat features.

    Think of it as kinda like Require.JS, Modernizr, and Respond.JS all wrapped into a single package at under 5K. And if you don’t need something: the loader & responsive/detection parts both come in standalone packages.

search form
 
image description image description