JavaScript-Turbo: Head.js Speeds Up Your Website

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:

<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:

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:

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

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

.lt-1024 p {
  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:

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)