Minification of HTML, CSS and JS

What is minification?

In website development context, a minification means reducing length/size of code, while preserving its functions. This is beneficial for decreasing page loading time, overhead data, thus improving user experience and SEO. Most element of a page could be minified and/or compressed in some way.

Pros:

  • Unnecessary data is cut off, so less remains to be carried over to the client.
  • Less data may mean less metadata and less client-server roundtrips.
  • The above means shorter loading times.
  • All of the above contributes to better experience and positive impact on rankings.

Cons:

  • Minifying HTML, CSS and JS files has far less impact then other optimizations (e.g., optimizing images).
  • Once you minify code, it becomes incomprehensible to humans and further adjustment are near impossible. So keep your original full-sized tidy sources.

Should you go ahead with minifications?

If you agree, that every bit of improvement of SEO counts, and many little improvements could decide your rankings and result in advantage against competitors, then the answer is: yes. Cutting off few bytes will not make a big difference, but here it is the effort, that matters:

Google checks whether your CSS and JS are minified or not, and would recommend you to do so, if latter is the case. And you do want to keep Google happy with your site.

So the question is not whether to minify, but when.

In case you run your site on Apache or Nginx, use of Google's PageSpeed Module right away is a good idea, since it does the job for you.

If use of this, or any other automation, is unavailable, it may not be necessary to produce a minified file each time, you tweak your live site. But when you know, you will stick with the latest version for a while, minify it. For example, criticial inlined css is likely to remain unchanged longer than other styles.

How to minify?

Server-side tools and modules

Server-side software, which takes your original full-size code and produces a minified version.

Off-site solutions

In general, using a CDN (content delivery network) is a good idea. Google nods to it, since it is very likely to make your site faster for several reasons. One of these is resource minification and/or compression, when the CDN not only stores and delivers your static resources (e.g. styles, scripts, images), but also optimizes them. Amazon Cloudfront makes use of G-Zip compression, Cloudflare goes as far as minifying your resources (using the Auto Minify, Mirage and Polish optimization features for images).

Online minification tools

There are several optimization tools for styles and scripts available online. Paste your code into a webform, click a button and receive its minified version. The work pretty well in their default state, but some offer advanced options such as omitting deprecated styles, discarding invalid properties, compressing colors, shorthanding or timestamping.

1st SERP CSS minifiers:

When searching for "CSS minifiers", you are likely to come across the following on first search engine results page (aka SERP):

A list of CSS minifiers

Minifier can minify JS Advanced features
CSS Minifier no Provides an API for 8 programming languages.
Minify yes Available as a dependency.
CSS Compressor no Levels of minification, compatibility settings, timestamping.
Dans’ Tools CSS Minify no No special features.
CSS Minifier no A clone of CSS Compressor.
Gift of Speed CSS compressor no.. .., but is a part of a suite of great tools which include a JS minifier.
CSS Minifer no.. .., but is a part of a suite of tools which can.

Update:

A comparison of these minifiers can be found in this follow-up post.