Minification is a simple concept that is often recommended as a step towards speeding up your website. But the reality is, it frustrates many site owners no end when they attempt to minify their files and end up breaking their site.
So what gives?
Minification often requires a lot of experimentation. While there are many solutions available, how they behave will vary from site to site depending on what theme and plugins you are using.
In this post, we’ll explore what minification is, its benefits, and some of the more popular minification solutions available – both manual and plugins – to help point you to the right solution for your site.
What is Minification?
The problem? As humans, we write the code contained in these files so we can read them, but computers don’t care about characters like comments, formatting, white space and new lines. So when they come across these unnecessary characters in website files they ignore them.
That’s where minification comes into the picture. Minification is a programming term that basically means removing any unnecessary characters that aren’t required for code to execute. Minification works by analyzing and rewriting code to reduce the overall size of your files, thereby reducing the total size of your site so it loads faster in the user’s browser.
For example, here’s some CSS you might find in a stylesheet:
And here’s minified version of the above CSS example:
See how much more compressed the code is?
Minification is performed on a web server before a response is sent. After minification, the web server uses the smaller minified – and much faster – files in place of the original ones, resulting in lower bandwidth without sacrificing functionality.
As SEO expert Yoast explains, minifying files can save up to 30-40%, or even 50% of file size in some cases.
Having a fast website not only makes Google happy – and helps your website rank higher in search – but it provides a better user experience for your site visitors.
Minification has many benefits:
- Smaller files means the total download size of your site is reduced,
- Site visitors will be able to load and access your pages faster,
- Site visitors will have an identical user experience without having to download bigger files, and
- Site owners will get lower bandwidth costs as less data is transmitted over the network.
Before minifying your site’s files, it’s a good idea to run a backup. Better still, minify your files on a staging site so you can check everything is in working order before making changes to your live site.
It’s also important to benchmark your page speed before and after minifying your files so you can compare the results and see whether minification has made any impact.
My favorite speed test site is GTmetrix. It analyzes your page speed performance using both Google PageSpeed Insights and YSlow, an open source performance testing tool. It then generates scores and provides recommendations for site optimization improvements.
Minifying Files Manually
Minifying files manually takes a considerable amount of time and effort. I mean, who’s got time to remove individual white spaces, lines and unnecessary code from files? Boring! Also, it allows more room for human error. So I wouldn’t recommend this method for minifying files.
Fortunately, there are many free online minification tools available that enable you to copy and paste code from and to your site. Here’s a brief list of tools and I encourage you to research other options that might work better for your site.
2. CSS Minifier
Another free tool, CSS Minifier works by minifying CSS that you copy and paste into the “Input CSS” text area. There are options for downloading the minified output as a file. For developers, this tool also provides an API.
Manual Minification Tools for Developers
- CSSNano – A modular minifier, built on top of the PostCSS ecosystem.
- csso – A CSS minifier with structural optimizations.
Minifying Files with Plugins
There are some terrific plugins available, both free and premium, that can minify your files without you having to perform manual steps.
Note: For this list, I’ve only included free plugins that are available in the WordPress Plugin Repository that are up-to-date and testedcompatible with the latest versions of WordPress. For premium options, scroll down./
1. HTML Minify
This simple, lightweight and no-hassles plugin enables you to minify the HTML output of your site. To use it, all you need to do is install and activate the plugin and it will automatically minify your markup without the need to configure any settings.
2. Minify HTML
I love the WordPress.org description for this plugin: “Ever look at the HTML markup of your website and notice how sloppy and amateurish it looks?” This plugin cleans up and minifies sloppy markup.
When the contents of your CSS or JS files change, they are re-processed so there’s no need to empty your cache. Multisite users will be happy to know this plugin works well on networks.
4. JCH Optimize
5. CSS Minify
Minifying your CSS with this plugin couldn’t be any easier – just install, activate, go to Settings > CSS Minify to enable just one option: Optimize and minify CSS code.
With more than 400,000 active installs, Autoptimize is easily the most popular minification tool in the WordPress Plugin Repository.
Autoptimize can aggregate, minify and cache scripts and styles, inject CSS into the page header by default and also move and defer scripts to the footer. There are lots of advanced options for developers and an extensive API available so you can you tailor Autoptimize to meet your site’s specific needs.
Hummingbird is a relatively new plugin to the WordPress Plugin Repository, having started out as a premium plugin. The free version features a great collection of site optimization tools, including minification, enabling you to minify, position and combine files for top performance.
There’s also a great scanning feature that allows you to test your site’s performance and get actionable recommendations for improving your site, right from within the plugin.
Minification as a Feature in WordPress Caching Plugins
Minification is generally a standard feature you’ll find in caching plugins. Here are the plugins I’ve tested and can recommend:
I hope this article has demystified minification for you and provided a solid understanding of what it is and how you can apply it to your website.
It’s important to keep in mind that minification is more of a fine-tuning step – you might see a little improvement in your site speed, but it won’t be significant. That said, it’s a best practice worth implementing in addition to other performance and optimization techniques, like combining files.
Also, make sure you configure, test, reconfigure, retest, tweak and check what works best for your website when minifying your files because every website is different.
If you liked this post, check out 6 Best WordPress Caching Plugins Compared for more advice on how to speed up your site.
Have you tried minifying your code? What other methods for making your website faster have you used? Let us know in the comments section below!