Thursday, November 1, 2012

The Fine Art of Minification in CQ5.5

The Problem:

Pages are taking too long to load in production, because the JavaScript pages contain comments, whitespaces and long variable names causing bloating in file size.

The Solution:

Minification! What is minification you ask?

The Theory:

In a nutshell, minification is a fancy term for getting rid of unnecessary characters in your JavaScript. It is a subset of obfuscation.

Minification in CQ5 does the following:
  1. Removes the following superfluous characters from the JavaScript code:
    1. White Space Characters
    2. New Line Characters
  2. Renames long variable and function names in the local namespace to something smaller
You need to be careful to note that if you have ridiculously long function names, you will still wind up with bloated JavaScript files, as the Minification engine in CQ5 does not yet 

The Implementation:

To activate minification, you will need to log in to your Felix console and enable the minify option.

  1. Go to {ServerURL}/system/console/configMgr
  2. Scroll down and click on "Day CQ HTML Library Manager"
  3. Click on the Minify checkbox
  4. (Optional) Enable Gzip

Where to Next?

If minification does not reduce your file size enough yet, you only have a few options. If you can think of more, please let me know so that we can collate them here.

1. Refactor your unnecessarily loquacious  names to more simple and understandable names. (Coming Soon: Link to post on how to get understandable names.)

2. Use an external JavaScript minifier such as
NOTE: If anyone out there thinks there is a better minifier, please comment below.

3. See if you can hang your code out to DRY

No comments:

Post a Comment