Compressing files is an essential part of any Web Developers deployment pipeline. There are actually 3 parts to website compression:

1. CSS Minification

This is the process of removing code comments and unnecessary spacing. Take the following CSS code snippet:

.my-selector {
  font-size:26px;
  border: 2px solid #FCC;
  color: #CCC;
}

.my-selector a {
  color: #DDD;
}

After minifiying it with clean-css it is reduced to this:

.my-selector{font-size:26px;border:2px solid #FCC;color:#CCC}.my-selector a{color:#DDD}

The second snippet is 88 bytes on disk, a reduction of 20% from the original 111 bytes.

2. JavaScript Minification

With JavaScript it is possible to further reduce the size of a file by renaming variable names to something shorter.

Take the following contrived code example:

var aLongVariableName = "Figroll";
aLongVariableName = aLongVariableName + " static hosting";
console.log(aLongVariableName);

It would be turned in to the following:

var a="Figroll",a=a+" static hosting";console.log(a);

The first code snippet is 126 bytes on disk, the Closure compiler with Advanced Optimizations reduces this to 54 bytes - an impressive 57% smaller.

3. Compression

Now that you have your source file in the smallest, most efficient state the next step is to compress the file.

Web Servers and browsers mainly use GZIP as their chosen compression technique. If we apply GZIP to our minified files above we can achieve much smaller file sizes. In the previous examples the code is too short to benefit from compression. I have therefore taken some Figroll code as an example.

Source File Source Minified Minified + GZIP Overall Reduction
style.css 48607 29473 5522 88%
app.js 19986 7487 2543 87%

What you need to do

Just Minify your CSS and JavaScript files and ensure you are referencing them in your HTML files.

Figroll will not do any minification of your files as it is your decision how much minification you wish to do. We will however compress your files so that they are served swiftly to your visitors.

Our current list of files we minify are:

  • .css
  • .js
  • .html
  • .htm