Where speed is concerned these spaces and comments that don’t actually add anything from a computers point of view and if you remove them then a smaller file can be downloaded much faster. It may sound trivial but any saving in time, however small, can be very important when you consider the following statistic from Kiss Metrics.
“47% of consumers expect a web page to load in 2 seconds or less.”
“25% of users will abandon a site that takes more than 4 seconds to load”
Minifying is the process of removing everything from the file that is ignored by a computer, so any comments or spaces are removed and this can, in many cases, reduce the file to half its original size.
The two images above are of the same code for our 404 error page. The image on the left is the original HTML of the file and can’t fit on to the screen but you can see that it takes 103 lines of code despite being a relatively small file (57.1 kilobytes). The image on the right show the same code after it has been minified and as you can see it has been compressed onto a single line and easily fits onto just over half the screen.
The memory saved from this html file wasn’t much (about 0.80 kilobytes) as stated this was a small file and html tends to have less space and comments than CSS. In comparison my CSS file for the main site was 14,435 lines long and was 331 kilobytes. After I minified the file it became 219 kilobytes which is just over a third of its original.
Options to minify
If you are using a WordPress site there are several plugins you can use that will you automatically minify your code files for you.
Or you can use a CDN, many of which have many options to automatically minify your content as well as a host of other useful tools. I personally use Cloudflare and would definitely recommend them to everyone.
We will talk about CDN’s in another article. If you are interested in site speed and increased security, and let’s face it who isn’t, using a CDN is a must.
Additionally Google actually supplies you with a minified copy of your files you can simply replace the originals with using an ftp client. Or there are many online tools you can use to do the same job. I would however recommend you keep a copy of the originals. If you wish to make changes to the files later they are incredibly difficult for humans to read. Additionally I would recommend you follow the Reduce Server Response Time section of the tutorial before minifying any files.
What is Minification?
Minification is the process of removing unnecessary characters from your code without affecting its functionality. This includes removing white spaces, line breaks, and comments, as well as optimizing the code structure to make it more concise and efficient. By reducing the size of your files, minification helps to improve the load times of your website, as smaller files take less time and resources to fetch and parse. This ultimately leads to a faster and more responsive website, which can improve usability for both desktop and mobile visitors.
How Does Minification Work?
If you have multiple external css files and inline css then it will make sense to compile them into a single css file. This isn’t compulsary for minifying css but will make it easier. Assuming you are doing this for the benefit of site performance then this is also an important step (see our guide on ###Reduce #####). Combining the external css code into a single file will speed up site performance. Normally when the page loads it needs to pull in a lot of CSS files but with fewer render-blocking resources to parse before page load reduces pageload time.
When combining CSS files you need to be aware of the order in which it loads. Cascading Style Sheets get their name because they have a hierachy with the later command being the most important (You can add !important to overall this).
When creating single css file start copying from the first link file in order, adding the on-page or internal css last (and again in order of how it appears on the screen).
It also makes adding the css from a single file into the minifying software much easier. Once you have used the tools (as listed below) then add the minified css to a file such as example.min.css to make it easier to identify.
- Use CSS minification tools like CSSNano or CleanCSS to automatically remove unnecessary characters and optimize your CSS code.
- Consider using CSS compression plugins for popular content management systems like WordPress, which can minify your CSS files with just a few clicks.
It makes adding the js from a single file into the js minifier software much easier. Once you have used the tools (as listed below) then copy the minified code to a file such as example.min.js to make it easier to identify.
- Utilize online tools like HTMLMinifier or Minify HTML to remove unnecessary characters from your HTML code and optimize its structure.
- Consider using plugins or optimization features available in popular content management systems like WordPress to automatically minify your HTML files.
Benefits of Minification
Improved Page Load Time
Reduced Bandwidth Usage
Minified files are smaller in size compared to their original versions, which means they require less bandwidth to transfer over the network. This can be especially beneficial for websites with a large amount of traffic or limited bandwidth resources.
Optimized User Experience
A faster website not only improves usability for desktop visitors but also enhances the experience for mobile users. Faster load times reduce the chance of a bounce, improve usability for mobile visitors, and contribute to a positive overall user experience.
Important Considerations Before You Minify Your Files
While minification offers numerous benefits, it’s important to keep a few considerations in mind:
Backup Your Files
Test Your Minified Code
After minifying your files, thoroughly test your website to ensure that everything is functioning as expected. Sometimes, minification can inadvertently remove essential characters or alter the functionality of your code. Regular testing helps to identify and address any issues that may arise.
Minify Concatenated Files
Using WordPress Plugins for Minification and Compression
Online Tools to Minify HTML JS and CSS Code
HTML Minification Tool
CSS Minification Tool
I am a self-motivated, passionate website designer and developer. I have over ten years’ experience in building websites and have developed a broad skill set including web design, frontend and backend development, and SEO.
Using my growing knowledge base I have built my own company (scriptedart.co.uk) creating websites and ecommerce stores and producing custom graphics and web app functionality for a range of local businesses.