HTML, CSS, and JS minification reduce the size of these files which can result in faster downloading time and faster rendering time for these files, and therefore minification can help improve the website speed. But if you are using a CMS (Content Management System) like WordPress, where this minification is necessary for all the individual pages, this minification can add a little bit of time to the total load time of the very first visitor to these pages. But the subsequent visitors will be able to enjoy the benefits of minification.
That's why it can be a good idea to minify your website files if your website have at least a decent number of website visitors. But if your website has only a few website visitors, depending on your website setup, it might not bring any noticeable change or it may sometimes negatively affect your website. So, keep reading to know whether you should minify your CSS and JS files for your specific website setup.
What Is HTML, CSS, and JS Minification
HTML, CSS, and JS minification mean eliminating unnecessary characters from these HTML, CSS, and JS files. However, these unnecessary characters are only things like extra white space characters (like spaces and tabs from the keyboard), new line characters, and comments which are there to make the codes more readable to humans. So, minification doesn't mean eliminating unused codes. Here, unused codes are executable code blocks that are present in a file but aren't necessary for the webpage.
Does Minification Improve Website Speed
Now, because minification removes unnecessary characters from these HTML, CSS, and JS files, the size of these files get smaller. This in turn results in faster downloading and faster rendering of these files. Therefore minification can help improve your website speed.
But this reduction in file size generally isn't anything very significant so the ultimate difference in speed may not be very noticeable.
Minification in Static Websites
If you have a static website that doesn't require changing very often, you can just minify your HTML, CSS, and JS files once and keep reusing those minified files until those files need to be updated again. So, as long as those minified files can be reused, you don't need to spend any more time or resources. That's why it may be a good choice to minify HTML, CSS, and JS files if your website is of static nature.
Minification in Dynamic Websites
Dynamic websites are basically those websites whose contents need to be generated/changed based on the user visiting the webpage. For instance, if you visit any website like Facebook, Google, and others, you may see your name on the screen but when someone else visits the same page, they see their name instead of your name on the screen.
If you are using any CMS (Content Management System) like WordPress, your website is dynamic by nature. Minification in these CMS platforms is done automatically so you don't need to spend any time minifying those files. However, this minification process takes some time to complete and uses some processing power from your web server. Therefore, minification adds some extra loading time to your webpages as well as add burden to your server.
This is why you need to consider whether the benefits of minification exceeds its costs for your site. Here is a simple rule that will help you decide. If you can reuse those minified files multiple times, the benefits of minifying will exceed its cost. As such, the more you can reuse those minified files, the more benefits you will get from those minifications.
Therefore, if your site has lots of visitors, you will benefit from using minification because of the faster downloading and rendering speed of those minified files. But if your site has only a few visitors, you may not see much improvement in the website speed because of the extra time required to serve the first visitor which may also affect your site speed negatively if your site has a very low number of website visitors.
Additionally, because the minification will use some server resources, you may not want to use it if your web server resources are very limited. But in most cases, this shouldn’t be an issue as long as you are taking advantage of caching on your site.
Should I Minify CSS and JS
Generally, the CSS and JS files of dynamic websites don't change very often so they are considered static files. Therefore, you can minify those CSS and JS files once and keep reusing those minified files. That's why CMS platforms like WordPress automatically saves those minified CSS and JS files in the cache in order to reuse them in subsequent page visits.
In addition to that, if the same CSS, and JS file is used in multiple pages, minifying it once will be enough because you can just reuse the minified files in all those other pages where they have been used. That is to say, you may lose this benefit if you decide to combine your CSS and JS files. Because the combined file of one page may no longer match with the previously matched individual files. Read more about whether you should combine CSS and JS files from this article.
Now, because you will be able to reuse the minified CSS and JS files, only the very first visitor to any webpage will face a slightly longer page load time but all the subsequent visitors will enjoy a faster page load speed. Also, this won't unnecessarily overburden your server resources by using too much processing power. That's why minifying CSS and JS files can almost always be a good idea.
Should I Minify HTML
HTML files are very much dynamic in websites created with CMS platforms like WordPress. As such, the webpages need to be regenerated every time based on who is visiting the page. Therefore, every time a page loads, it may need to load with different contents. In that case, you can't reuse HTML files to serve any other visitors. This is why WordPress and other CMS platforms don't cache HTML files by default.
However, most webpages just show the same contents to everyone visiting the webpage even though you are using a CMS. In this case, you can use the same HTML files for everyone. Therefore, you can also minify those HTML files and keep reusing them as you could do with any static files.
To extend, some webpages might even share both of these qualities. Say, for instance, you have a website where people can log in. Then when logged-in users visit the website, they see their name on the webpages, and because every user will have a different name, you can't reuse the same webpage/HTML file for everyone. But when non-logged-in people visit the website, they aren't shown with any name on the webpages and so they all see the same contents on the webpages. Therefore, you will be able to reuse the same webpages for all the visitors who aren't logged in.
Now, if you can store the HTML file in the cache and reuse it for other visitors, minification will only be necessary once per webpage until the minified HTML file is removed from the cache or the cache gets expired.
So, if you are using HTML/full-page caching on your site, minification will only be necessary once per webpage. So, even though the very first visitor to any webpage will face a slightly longer page load time, all the subsequent visitors to the page will enjoy a faster page load speed. Also, the load of minifying webpages only once won't overburden your server resources by using too much processing power.
But if you aren't using HTML caching on your site, minification will be necessary for all the visitors to any of your webpages. So, all these minifications will make your webpages always load slower and this will all these minification loads will unnecessarily overburden your server resources by using too much processing power. But all these will do no good for your website.
That's why if you are using HTML caching on your site, you can get benefits from minifying HTML files. But if you aren't using HTML caching, minifying HTML files will end up affecting your site negatively.
Should I Minify in CDN
You can also do this minification at the CDN level if you are using a reverse Proxy CDN provider like Cloudflare that offers minification at their CDN.
If you do the minification at your web server, the minification will only be necessary once per page. But if you do it at the CDN level, the minification will be necessary once for every PoP or Point of Presence of the CDN provider. This is because most of the CDN providers don’t auto replicate files from one CDN PoP to all. So, the same page will need to be minified for every first visitor to a webpage from a different PoP.
Cloudflare has over 200 PoPs. So, if Cloudflare needs to serve one webpage from their 200+ PoPs, that webpage will need to be minified 200+ times instead of just once from your server. So, all those 200+ first time visitors to the page will face slower page load time.
So, minification at the web server level should generally give you better results than minifying at the CDN level.
Conslusion
Considering all these, If your website has only a small number of visitors, you may be better off without minifying HTML, CSS, or JS files if you are on a CMS like WordPress. But if your site has at least some decent number of visitors, you can get better results by using minification. But the ultimate result may not be very significant so you may also see similar results with or without minification.