How to Minify CSS, JS, and HTML
What is CSS, JS, and HTML minification?
To minify CSS, JS, and HTML involves removing any unnecessary characters from within a file to help reduce its size and thus make it load faster. Examples of what is removed during file minification includes:
- Whitespace characters
- Comments
- Line breaks
- Block delimiters
Most times, the minification process does not affect the function of the file but rather simply optimizes it for downloading purposes. Minifying the CSS, JS, and HTML files in your production environment is especially useful. File changes are often time not made directly in production thus avoiding the need for visually appealing code. Additionally, since Google takes speed into consideration when ranking, minification helps speed up your website making both Google and your site visitors happy.
In order to distinguish minified files from unminified files, a .min is often times included within the file name (e.g. foobar.min.css).
Difference between minification and compression
File minification and file compression are not the same thing. Although both aim to achieve the same goal (faster load time) they are both different in how they work. Compression is used to reduce file size by using a compression scheme such as Gzip or Brotli. Files are compressed before they are sent from the server to the client therefore the compression process is carried out as follow:
- Files are compressed via a compression method
- A request is made for the compressed version of a file
- The compressed file is sent from the server to the client
- The client uncompresses the file and is able to read the information
Supported compression methods can vary by server as well as web browsers. When a browser makes a request to the server it tells the server which compression method it supports so that the server is able to optimize the response for that browser. If the browser does not support any compression method then the server will simply respond with uncompresses data.
Read more about the implications of compressed data for modern vs old browsers in our Vary Header article.
Minification example
The following example shows how a CSS file looks before and after minification.
Before CSS minification
.entry-content p {
font-size: 14px !important;
}
.entry-content ul li {
font-size: 14px !important;
}
.product_item p a {
color: #000;
padding: 10px 0px 0px 0;
margin-bottom: 5px;
border-bottom: none;
}
After CSS minification
.entry-content p,.entry-content ul li{font-size:14px!important}.product_item p a{color:#000;padding:10px 0 0;margin-bottom:5px;border-bottom:none}
As can be seen by the example above, after minification the CSS is harder to read as there is there are no line breaks, whitespace, etc. However, this optimized format requires less bytes thus making it to download.
How to minify your files?
There are a myriad of tools available for performing CSS, JS, and HTML minification. The following section outlines a few tools available for minifying each file type.
Minify CSS
To minify CSS you have a few options to choose from.
Online-based
- csscompressor.net: Csscompressor gives you the option to select the level of minification you would like to perform on the specified CSS code. Depending on the minification level selected, the tool will determine how many bytes you have saved.
- cssminifier.com: This tool is quite straightforward in that you simply paste in your existing CSS and the minified version is created. You then have the option to copy the minified code or alternatively you have the option to download it as a file.
Development tools
- yui.github.io: The YUI Compressor provides you with the ability to create a build process in your development environment which minifies, renames, and saves the optimized file to a production directory.
- phpied.com: Phpied's cssmin.js tool takes advantage of YUI Compressor's CSS minification capability, however uses JavaScript instead of Java.
Minify JS
To minify JS files there are also a few options available both as online-based and development tools.
Online-based
- closure-compiler.appspot.com: Google's Closure Compiler can be used as both an online tool as well as an API. This tool allows you to also select optimization and formatting preferences.
- jscompress.com: The online-based Jscompress tool allows you to minify JS by copy / pasting it directly into the compression tool. Additional you also have the ability to upload a JavaScript file and run the minification process on one or multiple files at once.
- javascript-minifier.com: Made from the same creators as cssminifier, this JS minifier offers the same functionality to simply copy the minified output or download it as a file.
Development tools
- yui.github.io: As previously mentioned as a CSS minification tool, the YUI Compressor also provides the ability to minify JS files and conveniently make them ready for production.
Minify HTML
- htmlcompressor.com: This HTML minifcation tools offers multiple options including the ability to select between various levels of minification as well as inline CSS and JS options.
There is an array of tools available to minify your files. Some tools focus on a single file type such as CSS or JavaScript while others are capable of performing minification on various file types. However, online-based and development tools are not the only options available for minification. Many CMS's also offer plugins and extensions to minify CSS, JS, and HTML files.
WordPress minification plugins
There are several WordPress plugins which offer a minification option to help further optimize your WordPress website, examples include:
Many caching plugins also offer the ability to enable cache minification. For example, Cache Enabler comes with the option to enable minification for HTML or HTML and JS. Using this feature can help further improve your web page load times, however in certain cases it may cause a conflict with another plugin. Therefore after enabling any minification options via any plugin, you should test your site to ensure there are no conflicts.
Drupal minification module
A popular option in the Drupal community for minification is the Minify module. This module allows you to minify HTML and JavaScript files and relies on the Google Closure Compiler to perform minification. Configuration of this module is quick and requires just a few steps before your files are minified.
Joomla minification extension
The Joomla CMS also offers a site optimization extension, called JCH Optimize, which provides the ability to minify CSS and JavaScript files. This extension aims to aggregate your CSS and JavaScript files and also comes with the ability to enable Gzip compression for the aggregated files.
Benefits of minifying your files
In summary, the decision to minify CSS, JS, and HTML files provides advantages for both the website visitors as well as the site owner. By minifying your files you will benefit by reducing the amount of data transfer required, files will run more quickly in the client's browser, and compression results are enhanced. Taking advantage of minification is a great way to help further optimize your site and is easily achievable with the above mentioned online tools and plugins.