Introduction

While looking at Kentico Top 10 web sites for June, I've noticed a serious amount of disregard for Javascript optimization and generally a lot of bad practices. Some sites even have a significant delay in loading the actual DOM, and by significant I mean something along the lines of 5-10 seconds on desktop which is huge, and on mobile clients that tends to increase dramatically. Users tend to be discouraged from using and checking out the site if the loading times are this long, especially on mobile.

What are they doing wrong

To say this short, they are mostly not minifying .js files, sometimes polluting the global scope and most of the time including Javascript code in the wrong place. If you combine all these facts you get the aforementioned load delay, more frequent bugs and code debugging problems when the code is all over the sites html. Unminified Javascript files are self explanatory, while not having unminified code in development is okay, having them unminified in production is a bad idea and minifying them can decrease page load. Placing large code files in the head element is considered bad practice because it can delay the loading of the actual DOM Tree by firstly waiting for the Javascript files to download and then continuing on to render the DOM. Another mistake people make is slice up their javascript code into seperate files. That creates additional unnecessary HTTP Requests with a lot of overhead data and causes additional waiting time since the server needs time to fetch the actual file from disk and serve it to the client regardless of the file being minified or not.

In the following example we can see how a large (mostly unminified) Javascript file delays the DOM tree loading:

DOM Delay

Heres an example of unnecessary waiting times with multiple files:

Waiting time

Optimizing Javascript in Kentico CMS

Most people are unaware of a way of including Javascript files so that the file can automatically be switched from unminified to minified and vice versa by changing the value of a checkbox in Kentico. The way we at Endora started including JS files recently is by using the ~/CMSPages/GetResource.ashx handler to handle the sending of javascript file to the clients instead of being sent directly from the server. The way to do this is by including a "scriptfile=path/to/js.js" query string like this ~/CMSPages/GetResource.ashx?scriptfile=~/CMSScripts/Custom/general.js and placing it as the script URL.

This enables the following setting to automatically send minified or unminified files (under CMSSiteManager -> Settings -> System -> Performance:

Automatic minification

These two (three if you also want the CSS to be minified) settings enable a quick change from development with unminified files to a production mode with minified files.

We also place Javascript files before the ending of the body tag. This prevents the DOM loading from hanging until javascript files are downloaded.

Javascript placement

Some general Javascript Guidelines

Don't pollute the global scope:

(function($){
    //place your code in closures 
    //(and/or self-executing functions like in this example)

    //create functions as vars instead of 
    //parse-time function definitions

    var hideIt = function($elem){
        $elem.hide();
    }
})(jQuery);

Concatenate your files

As mentioned before, doing so reduces HTTP overhead and decreases load times.

Minify your resources while in production.

Self-explanatory - minified files equal decreased download times

Place large javascript files before the ending of a body tag

Doing so visually renders the DOM before downloading javascript files and thus creates a better user experience.

Place jQuery elements in variables

//saves memory!
var $theDiv = $('.theDiv');
$theDiv.each(function(){
    //where $(this) is used a lot, save it in a variable so that
    //jQuery doesn't have to reselect it every time
    var $this = $(this);
    $this.data('javascript', 'optimized');
});
$theDiv.hide();

Use CDNs for libraries

Google CDN and cdnjs are just some examples.

Keep it DRY

Reuse functions and elements where possible.

Further reads

  1. Idiomatic Javascript
  2. Douglas Crockford's javascript site
  3. Explore popular javascript repos at Github
  4. Optimizing Javascript on Google Dev

Useful tools

  1. JSHint
  2. Grunt build tool
  3. PageSpeed Insights

Send feedback on this post and follow me on twitter for general Javascript info at: @theeskhaton1