How To Minify CSS, JS, and HTML?
Google is very strict when it comes to ranking websites. Not only your site should be SEO optimized, but also adhere to the strict loading times for optimal user experience. It all starts when a visitor visits your website for the first time. If the site is slow, the visitor will drop from the website in search of a better website that loads fast and offers the same or better content.
Google knows that. And, that’s why they also rank websites that load faster. As a blogger or a business owner, your job is to load your site as fast as possible. There are many ways to do so, but in this article, we will be solely focusing on the how to minify CSS, JS, and HTML.
Your website is built using a lot of files where the majority of them are HTML, CSS, and JS. These files contain tons of codes that is auto-generated or written by a developer. This makes them have size. The code that is written in these files is humanly readable as they need to be maintained. However, the same is not true for machines as they can quickly read through the code. In short, it means that the computer doesn’t need formatted code which we can use to save space and help improve the websites file size.
Before we get started with the real process, we will first learn what exactly minify means and how it can benefit website loading time.
What is Minify?
Minify is the process by which unnecessary space or characters are removed from the code. These spaces and characters are not necessary to run the code and hence just add size to the file. When they are removed, the files become lighter which in turn improves the page loading time. Minify is a great strategy to improve meet visitor’s expectation and rank better.
What does Minify remove?
When the minification process is done, it removes the following things from your code:
1. New line characters
2. Whitespace characters
3. Block delimiters
4. Comments
All of these characters and comments add readability to the code which is solely meant for human readers. Minification helps overall data transferred when a website is requested from the server.
As a developer, it is easy to distinguish between a minified file and an un-minified file. The minified file has an extension of .min in it. For example, header.min.css
Minification and compression difference
Compression is not similar to minification. Compression is a technique where file size is reduced by using compression algorithms or schemes ushc as brotli or gzip. Both of them serve the purpose of reducing the file size but with different approaches. So, basically, you can minify the files and then compress it before sending it to the client requesting the website. The files once received from the client side will then be uncompressed and then used for rendering purposes.
This difference is explained in most of the beginner’s blogging guide in performance optimization guides.
Minifying manually
Now that we have understood what minification is and its difference from compression, it is now time for us to learn how to minify CSS, JS, and HTML.
The first process is very straightforward. All you need to do is remove the unnecessary things from your code. Let’s take a look at an example below.
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<meta charset=”utf-8">
<meta name=”viewpoint” content=”width=device-width”, initial-scale=”1">
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav>
<ul>
<li>Home</li>
</ul>
</nav>
</body>
</html>After minifications it will look like below:
<!DOCTYPE html><html><head><title>Portfolio</title><meta charset=”utf-8"><meta name=”viewpoint” content=”width=device-width”, initial-scale=”1"><link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body><nav><ul><li>Home</li></ul></nav></body></html>Isn’t that hard to read? Maybe for humans, but not for the computer. The above format removes any unnecessary whitespaces, breaks and so on making it smaller and hence decreasing the file loading time.
Using Online Tools
The manual process can be, and you don’t want to waste time when setting up a website for the first time. That’s why we have tools that do the minification for you. So, let’s list them below.
CSS
CSSminifier.com: A simple to use tool that lets you minify CSS. All you need to do is copy and paste your code and download the minified version as a file.
phpied.com: It is a development tool that uses YUI Compressor CSS minification.
JS
Jscompress.com: It is a JavaScript-based minification tool. This tool lets you copy-paste your code and download the minified code.
yui.github.io: A development tool that can be used during development.
HTML
htmlcompress.com: An online minification tool that lets you minify HTML, CSS and JavaScript.
HTMLMinifier: You can also check out this JavaScript-based HTML compressor. It is one of the best and can be integrated into your project easily.
Conclusion
There is a lot of online competition. To succeed you need to make the most out of the available tools, techniques, and methods. That’s why we went forward and shared insight on minification. We also listed the tools that let you naturally do the minification. If you are using a CMS such as WordPress, you will find a lot of caching or even dedicated minification plugin that does it for you.
So, what do you think about minification? Are you planning to use it in your projects? If yes, comment below and let us know.
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.
