But another increasing prevalence amongst web design is the constant optimization of pages – whether that be to make the markup of the page more semantic, pass the W3 Validator or reduce the loading time of the page, for example.
script elements are placed between the
head tags, they delay the loading of the rest of the page (since pages are loaded in a top-down fashion), and will only show a blank page since the content is placed between the
body tags, which come after the
head tags. This also makes the user think that the page is not loading, which will either cause them to refresh or leave your site.
So what can you do to add rich content to your webpage, whilst maintaining a fairly speedy page load? Surely one is a tradeoff for the other?
Minification and Obfuscation
- Minification is about reducing the size of your code, whilst maintaining its functionality. Such methods of minifying include removing blank spaces, carriage returns and comments, all of which can reduce the filesize drastically, and this change can often be rather substantial for large files (since they tend to have more comments and other characters which can be stripped).
- Obfuscation is about removing the meaning from the code. Often variable and function names are changed to alphanumeric values, such as
cetc, with the intent that anyone who wants to take a look at your source code will have a harder time reverse engineering it, and discovering how it works (Note that although this hinders people, it won’t prevent them from reverse engineering your code, if they have enough time to do so). Obfuscation normally leads to minification, since variable and function names are shortened, and often parts of the minification process, such as stripping spaces and comments is done through obfuscation to make the code harder to read.
To see an example of this, take a look at the jQuery source code. The original file, unminified, is ~118KB. However, the minified version is ~56KB – 47% of the original file size. As you can see, minification can seriously reduce the size of your code, and in the case of jQuery, more than halving the file size.
The basic principle is:
- Optionally, the loaded files are kept track of, so that any subsequent calls to load the scripts do not actually load the scripts again.
This can be implemented quite easily; the basic idea is that script tags are added to the page DOM, which will cause the script to be loaded into the page. Of course, this can be done several ways; some implement it using the
However, this isn’t a good way to do it; using
document.write is a bad practice and the better way to do it is to create a
script element and add it to the DOM:
var s = document.createElement("script");
s.src = path;document.body.appendChild(s);
It is also faster than using
document.write (on Opera and Safari at least), although despite being slower on other browsers (naming no names), it is a much cleaner method of adding the object to the DOM.
Despite being a good way of managing dynamic loading of scripts, if you have to load lots of scripts in most cases, it increases requests to the server and increases the amount of objects on the page, which is less efficient than bundling them into one file and serving that directly.