Website Performance Optimization - Part 4: Minification & More

In the last article in our series on website performance optimization we discussed image compression. We are going to continue discussing the idea of compression with the topic of JS and CSS Minification.

JavaScript Minification

The minification process means to remove all unnecessary characters and comments from the source of a file (typically JavaScript). The purpose of minification is to reduce the file size so that the Javscript file will download faster. Much of these “unnecessary” characters do not affect the function of the code but are comments added by developers for code readability.

There are several JavaScript optimizers that can minify code. Two most common are JSMin and Packer.

JavaScript: 3rd Party Libraries

Beyond minification another consideration is effects of 3rd party JavaScript libraries on performance. These libraries can provide additional functionality such as jQuery or Prototype which are frameworks to extend JavaScript with functionality to control the DOM more effectively. Both of these frameworks have plugins that can further extend functionality such as LightBoxes, dropdown menus, sliders and carousels. Each of these tools will increase the total page load size and execution time. Not all libraries work well together. It is wise to test each tool and evaluate how it effects website performance.

CSS Minification

Just like JavaScript the CSS (Cascading Style Sheets) file can be compressed with minification as well. A good tool for this is CSS Compressor.

CSS Techniques

Don’t use @import within your CSS files. @import request for additional CSS files will slow down page load while the browser attempts to fetch additional CSS rules.

Whenever possible combine multiple CSS files. Just like with Image Sprites reducing the number of HTTP requests can have an impact on overall page load and website performance.  Please contact us to learn more!