Whether you code your website from scratch or you use a content management system like WordPress, your site can benefit a lot from minifying your HTML, CSS and JavaScript files.
This is because when developers code they try to make the code as easy on the eyes as possible. They add white spaces, or they type code on new lines, so it’s easier for them to read.
Coders also add comments to specify what a particular section of code is for. When there’s a problem with the site, they can look at the code and trace where the problem is.
Now, with computers, it’s a different thing. Computers don’t care for white spaces, new line characters, comments or block delimiters. They only care about the actual code itself.
When you minify your site’s code, it’s essentially stripping away all the unnecessary details that are not going to affect your site’s performance.
In an unoptimized CSS file, you may have thousands of lines of code, however, when it’s minified it’s going to put everything on a single line.
How do you minify code?
You can either minify by hand, or you can use a tool to help you with it.
Naturally, when minifying by hand, it’s not going to be easy and will be very time-consuming. This is because you’re going to be manually removing all those spaces and comments and unnecessary characters. If you’ve got a thousand lines to work on, then you’ll be squinting at your screen for hours!
The good news is there are many tools you can use to minify your code. You can try using Minifier (https://www.minifier.org), Will Peavy’s Minifier (https://www.willpeavy.com/minifier), or any other minification tool you like.
You simply need to copy your code, hit the minify button, and voila! You’ll have your minified code read to be copied and pasted to your site!
With WordPress, you can simply install a minifying plugin, set it up and let it get to work. Here are some of the top minification plugins:
- Fast Velocity Minify (https://wordpress.org/plugins/fast-velocity-minify) – this plugin will help reduce the number of HTTP requests by merging your CSS and JavaScript files into groups.
- Minify HTML (https://wordpress.org/plugins/minify-html-markup) – this plugin will help clean up your HTML code which, in turn, will help speed up your site.
Use any of the techniques mentioned in this article and watch your page load times decrease significantly!