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.
/* Layout helpers |
----------------------------------*/ |
.ui-helper-hidden { |
display: none; |
} |
.ui-helper-hidden-accessible { |
border: 0; |
clip: rect(0 0 0 0); |
height: 1px; |
margin: -1px; |
overflow: hidden; |
padding: 0; |
position: absolute; |
width: 1px; |
} |
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.
.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px} |
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.
Closure Tools
Closure Tools is a suite of tools from Google Developers. It includes lots of tools to help speed up your JavaScript code. Here’s a look at some of the tools that help with minifying your code.
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
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.
JavaScript Minify Tool
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.
JavaScript Minifier
This one works as expected – you paste in your code and click to minify. It also does CSS and it even has a JPEG optimizer and image resizer. It’s very easy to use and you can download as a file.
Online JavaScript/CSS Compressor
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.
Smaller
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.
Better WordPress Minify
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.
AssetsMinify
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.
WP Super Minify
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.
WP Minify Fix
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
Follow best practices anytime you’re dealing with code.
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