How to Minify Your Websites CSS, HTML & Javascript

One of the ways that Google and other search engines evaluate your website is your page load speed. This is also one of the ways that your visitors will evaluate your website – especially on their first visit. If your pages take too long to load, it is likely that visitors will move along. The Internet has too many distractions to expect visitors to wait.

Your website has to load a lot of files, including your HTML, CSS, and JavaScript. You need this code to be as clean and fast as possible. The problem is this code was written to be read by humans. It includes extra white space, comments, and formatting that computers don’t need in order to run the code. Fortunately, this can be fixed! A great way to help speed up your code is to minify it. Minify? What is minify? Let’s take a look.

What it Means to Minify and Why it is Beneficial

Minify is a programming term that basically means to remove any unnecessary characters that are not required for the code to execute. Minifying your code speeds up your page loading, making visitors and search engines happy.

Minifying your code removes:

White space characters

New line characters

Comments

Block delimiters

These types of characters are used to add readability to the code but they are not required for the code to execute properly. Minifying your code is especially useful for interpreted languages that run over the Internet, such as CSS, HTML, and JavaScript. It reduces the amount of code that has to be transferred over the web. The superhighway that is the ‘net still has a limited amount of bandwidth and supplying the smallest and cleanest code possible is in our best interest as web developers.

Speed Comparison

You can test the speed of your page loads using online tools like Google PageSpeed Tools.

Simply paste in your URL and get the results. You should try this often. I highly recommend doing a before and after comparison so you know the quantitative value of improvements that your efforts have made.

Every site is different, but as an example, a before score might be around the mid-80s and an after score might be around the mid-90s. It will give you results for desktop and mobile separately and it will highlight the areas that are the slowest (such as server response) and give you tips on how to fix it.

Minify vs. Compression

Minifying code is not the same as compressing the data. Compressed data requires an un-compression step before it can be run. The code is smaller than the original for the actual transfer, but the extra decompression step adds to the time before the code can run. Minified code can be run as-is. The same interpreter can understand minified code as easily as it can the original code.

Use Gzip for HTML

Gzip is currently the most popular and effective compression method. It was developed by the GNU project and standardized by RFC 1952. Gzipping generally reduces the response size by about 70% and is supported by around 90% of today’s web browsers. Gzipping will reduce the page weight and increase load speed. Some of the plugins will use Gzip for their HTML compression.

How to Do It Manually

There are several types of tools that you can use to minify your code manually. You can minify by hand or use one of the many free online tools and copy and paste your code from and to your site.

Minifying by Hand

You can minify your code by hand if you want. I don’t recommend it as it’s easy to introduce errors, but I do want to show an example so you can see how minifying works. The first set of code is non-minified CSS.

To minify your code, first remove the comments. The comments is the text between and including /**/. Highlight all of this code and delete it.

Next, remove all of the unnecessary spaces. That’s all spaces except for the spaces between (0 0 0 0). Your code still needs this because it’s part of the CSS function. This will make the code appear on a single line.

Unless you know which spaces to remove and which to leave, it is better to do the work through a minifying tool. Here is a quick list of tools that will minify and combine files. Most are online, but there is one here that work offline.

The Closure Compiler is a JavaScript optimizer that rewrites your code and minimizes the dead space, allowing it to download quicker. It will also check your syntax, variable references, and types, and it will warn about common JavaScript issues. Your code will be optimized, less buggy, and easier to maintain. There are several levels that it will optimize – for white space only, simple, and advanced. It makes your code compact and improves its performance.

Nearly every team at Google that write JavaScript uses Closure Linter. It check your files for issues such as operator placement, missing semicolons, spacing, etc. This helps in debugging to ensure your code has all the necessary elements to run.

The Closure Stylesheets will concatenate and minify a list of stylesheets. It will even make a vendor-specific stylesheet. Vendors include WEBKIT, MOZILLA, OPERA, MICROSOFT, and KONQUEROR. When the vendor’s flag is present, the vendor-specific properties for other vendors will be removed.

CSS Minifier is a free online tool from Dan’s Tools that will remove the spacing, indentation, new lines, and comments from your CSS code and make your code and website faster. You paste in your code and select Minify. Once your code is minified, you copy and paste it back into your site.

This is another minifying tool from Dan’s Tools. Just like the CSS Minifier, you paste in your code, click to minify, and then copy and paste back into your site. There are no settings or adjustments to deal with, making it extremely simple and easy to use.

This one will minify your CSS, HTML, and JavaScript using UglifyJS 2, Clean-CSS and HTML Minifier. You can paste or drag your files and click the button. There are lots of options for ensuring compatibility, rebasing URLs, debugging, etc. This has more features and options than most online minifiers and it’s easy to use.

For OS 10.7 users and up, Smaller will compress your HTML, CSS, and JavaScript for your desktop. It will let you combine multiple files into one. This is a paid app, but you can download a free 30-day trial.

How to Do It Dynamically Using Plugins

Code can also be minified automatically using plugins. This is the easiest method for WordPress as there are no manual steps for you to perform.

This free plugin will let you combine and minify your CSS and JavaScript files. It improves compatibility with other plugins and themes by using WordPress’s enqueueing system. You can move the enqueued files to the locations you want, such as header and footer, and you can make tons of adjustments in the control panel. It is multisite compatible. It’s one of the best plugins for speeding up your WordPress site.

I installed this and gave it a whirl. There are plenty of options and settings, and they do get advanced. The settings that I needed were already set when I installed it, so I just left everything at default. You can choose the enqueued files individually and choose actions for each file. It was easy to use, but it does take some reading through the settings to see what to do.

This one is another free plugin to minify your CSS and JavaScript. It doesn’t have anywhere near as many settings to deal with. After choosing a handful of settings (which you can leave at default unless you want to ‘use Compass’), you can choose whether or not to compress files and scripts and which files to exclude.

This free plugin will compress your CSS, JS, and HTML. It has the fewest settings of the plugins I tried – you just choose whether or not it will compress your JavaScript and/or CSS. That’s it. You can’t exclude any files or clear the cache. You can view your site’s source code and select CTRL + U and it will tell you the file size before and after. I like this feature as you can get a good idea of how your site has improved.

The example it gives is a total size saved of 11.341%, with the size before compression being 27104 bytes and the size after compression being 24030 bytes. Not bad for a free plugin.

This one is an update to an older plugin. With this free plugin you can enable compression of JS, CSS, and HTML, and you can add files to be minified or not to be minified. There are lots of tweaking and tuning options such as JS placement (header or footer), HTML5 sync tags, and more. It will even use pretty URLs. You can also pass extra arguments to the minify engine.

I like the settings and features this one provides. It’s easy to set up and use.

Tips and Cautions

If you’re not careful you can kill your code. Keep backups handy and be careful with copy and paste.

Don’t rely on your users boosting their performance by using cache. Many of your visitors will come to your site with an empty cache, so plugins that boost performance through the use of cache will not help them.

Use the tool to combine all the CSS files for a single website into one file. This will reduce the number of HTTP requests that need to be made to get all the elements of a website.

Keep your original code with all of the comments and formatting. This will help in troubleshooting if you need to look back at the code.

Use Google’s PageSpeed Tools and test your site (both before and after) to keep track of your site’s page loading for both desktop and mobile devices. The higher the number the better.

Test your pages and posts as well as your home page.

Wrapping Up

The faster your site can load into your user’s browsers the better. One way to help with that is minifying your CSS, HTML, and Javascript code. This is especially important on slower sites. Minifying your code is a great way to improve your page loading with shared hosting. Minifying your CSS, HTML, and JavaScript is easy to do with online tools and with plugins.

How about you? Have you minified your CSS, HTML, or JavaScript? Did you use one of the tools I described here? Is there a tool you would like to add to this list? I’d like to hear about it in the comments below!

Article thumbnail image by merrilu / shutter stock.com

By Brenda Barron

Brenda is a professional writer and WordPress enthusiast from Huntington Beach, California. You can often find her typing up a storm at the local coffee shop, or at home re-watching Back To The Future and Doctor Who.

I’ve used WP Minify Fix version 1.3.4 for a while, and it does the trick. But version 1.4.0 was released to allow placing JavaScript in the footer, and broke JavaScript placement in general, so was unusable for me. I had to roll back to the prior version. There has been no response on the support forum after reporting the issue (and it’s been 3 weeks), so I would recommend careful attention to JavaScript placement for anyone trying this particular plugin.

In general, one has to be careful configuring a Minify plugin, being ready to sort out appropriate exclusions for their site. It’s something best attempted on a staging site first.

I’ve tried a lot of dynamic minification and resource combination plugins (including the feature in W3 Total Cache), but they usually end up breaking the site. I’d often forego minification altogether because it.

One plugin I’ve found that automatically avoids this is ZenCache Pro (zencache.com – formerly Quick Cache) and its ‘HTML Compression’ feature, which can minify *and* combine files (into as many files as necessary to avoid conflict) with great success. It’s also the only plugin I’ve been able to successfully trouble-shoot in occasional cases where there have been conflict, because it can turn off (and so isolate) different sections of js and css individually (header, footer, inline).

And no, I’m not even affiliated with them (or gain any form of remuneration). Just a customer happy to find and share a solution that “just works”, as it should.

It’s quite easy to troubleshoot, though, as I mentioned. Just selectively turn off parts of js/css in header, footer, etc, and isolate the problematic area that way.

After that, you can use the browser’s Inspector to find the uncompressed js/css files (these would be in the area(s) isolated from the above step), then, keeping the list of these files on record, re-enable compression, then selectively add some of these files to the exclusion patterns, until the problem CSS/JS is isolated (I usually check this with Chrome’s Incognito Mode, as compression is applied to logged out users only by default).

Jim
March 3, 2015

You mentioned that “Use the tool to combine all the CSS files for a single website into one file.”; Does this work if using Child Theme CSS and custom JS files? How do updates to parent effect this mini-fication process? Good read. Thanks!

Good read. Got me thinking now as to whether or not my WP hosting provider (WPEngine) is doing any minifying for me. I guess I should choose one or two of these and try them out to see if it lights the load – not that I’m having performance issues yet but would be a good thing to know.

I use the W3 Total Cache to optimize and minify my website assets. It also does browser caching which speeds up the website. I check my templates on page speed tool and follow their recommendations. With that plugin and some more minor adjustments it went to a massive improvement of my site and it loads faster. Good for usability!

Just one question. If i will instal ine plugin to make me this work. after the work it’s done and i have optimize all the css and java file, if i will remove the plugin, all the filles will rest optimize ?!
Or it’s neccesary to have all the time the plugin active ?!

Brenda this is the guide I was looking for since many days. I have tried w3 cache to minify the css, html and javascript but did not worked well for me. I can’t do this manually that’s will try the plugins you mentioned here.

I was using w3 total catch but still a lot of JavaScript need to be catched. Thanks a lot for this useful article, I will try the minify plugin. Hopefully, it can improve.

Lindsay
March 16, 2015

Thanks for this guide!
Love using Divi but I haven’t settled on a great workflow for speeding up my Divi sites enough yet.
Wondering what Divi users find is most useful in reducing # of HTTP requests & minifying javascript from the Divi Theme itself. It makes a lot of extra HTTP requests I think…
I’ve tried WP plugins W3 Total Cache and Super Cache but still not 100% happy with the page load/ speed. I’d love to find a solution to use on all my Divi sites…
Thanks! 🙂

That great to know we can do Minify CSS and Javascript in Blogger. There are still remain in Page speed: Minify HTML, Leverage browser caching, Reduce server response time, Eliminate render-blocking JavaScript and CSS in above-the-fold content: Is there any chance to pass those in Blogger?

I have installed better wordpress minify plugin just now and it’s working great for me. My mobile pagespeed improved from 61 to 74 and desktop pagespeed from 70 to 86.Not bad with the use of a free plugin.Thanks for the article