How to Minify Your WordPress Site’s CSS, HTML & JavaScript

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?

Websites are made up of a lot of different files. If you test your site speed with Google PageSpeed Insights, you might get the recommendation to minify your HTML, CSS, and JavaScript files.

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:

a:link {
  color: gray;
}

a:visited {
  color: green;
}

a:hover {
  color: rebeccapurple;
}

a:active {
  color: teal;
}

And here’s minified version of the above CSS example:

a:link{color:gray}a:visited{color:green}a:hover{color:#663399}a:active{color:teal}

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.

Why You Should Minify Your HTML, CSS and JavaScript Files

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.

How to Minify Your HTML, CSS and JavaScript Files

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.

Other great speed test tools I can recommend include Pingdom Website Speed Test and WebPageTest and Test your mobile speed.

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.

1. Will Peavy’s HTML Minifier

The HTML Minifier is a free online tool for HTML minification built with PHP. To use the tool, simply paste your HTML into the text area, including any CSS of JavaScript in your markup, and click the “Minify” button. To ensure your scripts work after minification, it’s recommended that you terminate JavaScript statements with a semicolon and use * * syntax for comments.

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.

3. JSCompress

JSCompress is an online JavaScript compressor that allows you to compress and minify your JS files by up to 80% of their original size. To use it, copy and paste your code or upload and combine multiple files and then click “Compress JavaScript”. This tool is based on UglifyJS 3 and babili-standalone.

Manual Minification Tools for Developers

For developers looking for more advanced options, Google recommends these HTML, CSS and JavaScript minification resources:

• HTMLMinifier – A Javascript-based HTML compressor/minifier (with Node.js support).
• CSSNano – A modular minifier, built on top of the PostCSS ecosystem.
• csso – A CSS minifier with structural optimizations.
• UglifyJS – A JavaScript parser, mangler, compressor, and “beautifier” toolkit.

Google’s Closure Compiler is an optimization tool for JavaScript. Instead of compiling from a source language to machine code, it compiles from JavaScript to make better JavaScript. It parses your code, analyzes it, removes dead code and rewrites and minimizes what’s left. This tool also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.

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.

Unlike the HTML Minify plugin, this tool provides more options. It includes optional minification for JavaScript and CSS, though it doesn’t mess with text areas or preformatted text. There are also options for removing HTML, CSS and JavaScript comments (leaving MSIE conditional comments), removing unnecessary XHTML closing tags from HTML5 void elements, and removing unnecessary relative schemes and domains from links.

3. Merge + Minify + Refresh — WordPress Plugins

This plugin does more than just minify your code. It combines your CSS and JavaScript files and then minifies the generated files using Minify (for CSS) and Google Closure (for JavaScript). Minification is performed via WP-Cron so that it doesn’t impact your site speed.

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

JCH Optimize has a bunch of nice features for a free plugin: It combines and minifies CSS and JavaScript, minifies HTML, there’s GZip compression for combines files, sprite generation for background images, and you can exclude certain files from combining to resolve conflicts.

There’s a pro version available with more optimization features, including loading JavaScript asynchronously, optimizing CSS delivery to eliminate render blocking, CDN/cookie-less domain support, and lazy loading and optimization for images.

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.

The code in this plugin has been forked from the popular Autoptimize plugin (more on this plugin below). The plugin’s author Peter Pfeiffer has a similar plugin available for JavaScript, Minify JavaScript.

6. Fast Velocity Minify

With more than 20,000 active installs and a five-star rating, this is one of the more popular options available for minifying files. To use it, install and activate the plugin and go to Settings > Fast Velocity Minify. There, you’ll find a stack of options for configuring the plugin, including advanced options for developers JavaScript and CSS exceptions, CDN options, as well server information. However, the default settings work just fine for most sites.

The plugin performs minification in real-time on the front-end and only during the first uncached request. Once the first request is processed, any other pages that require the same set of CSS and JavaScript will be served that same static cache file.

7. Autoptimize

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.

8. Hummingbird Page Speed Optimization

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:

• WP Rocket
• W3 Total Cache
• WP Super Cache

Conclusion

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!