Minify strategies for HTML, CSS, JS

Are you someone that believes in always minifying HTML, CSS, JS?

There’s a whole website speed cult now that believes everything must be minified…or else you’re an idiot. I didn’t know this could be such a hot topic but it appears some people will argue vehemently with my stance on minification. Some of them are actually developers; the others are just clients parroting those developers.

It’s ok! This guide isn’t for the detractors…it’s for the clients who just want to know what I do and why I do it. (Secretly…I think it’s a stupid post that shouldn’t need to be written but people keep asking me whyyyyyyyyy.)

The BENEFIT of minifying files

Smaller files transfer faster than larger files!

If you don’t know, minification makes website files smaller by removing unnecessary characters like line-breaks, spaces, comments, and other things. It can reduce your HTML, CSS, or JS file sizes by a good 20% without affecting it’s function in any way. It’s known as one of the easiest no-brainer tactics for optimizing your site speed.

And as we all know…smaller files send faster. That’s especially nice if you have visitors on limited bandwidth (like via mobile devices).

So then why don’t I do it?

The COST of minifying files

Minifying files requires server load.

The server has to spend some CPU processing power to minify those files. So now you gotta think…

• If files are PRE-minified before being requested, they are sent right away in minified (decreased) file sizes.
• If files are NOT minified before being requested, then they have to be minified first before they can be sent out.

That little distinction there can make all the difference. Let’s do some analogies.

• Pretend you’re wearing a backpack and need to run 50 feet.
• Is it faster to put down the backpack and then run the 50 feet?
• Or is it faster to just run the 50 feet with the backpack on?
• Now…what if instead of a backpack, you were carrying a fridge?
• Or…what if instead of 50 feet, it was 500 feet?

You see what I’m saying? It really depends on the situation. Ideally, there would be no extra weight being carried and all files were already PRE-minified before they are requested.

WHEN to minify

The real world use doesn’t always reflect simple blanket theories. It’s full of variables:

• How strong is your server?
• How many pages does your site have?
• How much traffic do you have?
• How often do you update content?
• How much HTML/CSS/JS do you have?
• What are you minifying? HTML or CSS or JS? Or all?
• Is your server doing the minification or a CDN?

Don’t you worry, I’ll break it down into tiny OCD bits for you.

How server strength affects minification…

The weaker your server, the less processing load you want to put on it. Use that precious CPU power for something else, like processing dynamic php and making DB queries.

If you really want to minify still:

• Let your CDN (like Cloudflare) do all the minification work.
• Pre-minify your files ahead of time. (Usually done with a caching mechanism.)

How your number of pages affects minification…

If you have only a few pages (like say 20 or even 50 pages, heck, even 300-500 is manageable)…it shouldn’t be too much problem pre-minifying everything ahead of time.

The problem is when you have say 1-2 thousand pages. Are those are going to be pre-cached and pre-minified? Because if not, that means a good chunk of those pages will be minified only when visited by real users. Users who will now have to wait just an extra fraction of a second for the server to generate those minified files.

How your traffic size affects minification…

We already know the best case scenario is if you pre-minified everything already. But let’s say you have a big site that minifies on the fly. Well, if you have few visitors…it’s gonna suck for them, because it’ll seem like they always get slowed page loads because of waiting for the server to minify.

But…if you have lots of traffic…say thousands of hits per day, only the first visitor to each page will hit a slow page load and the rest of them will benefit from the minified files that the first visitor initiated. From this explanation, you would minification is always recommended on high traffic sites.

Except only…

How your content update intervals affect minification.

Lol, this rabbit hole never ends! If you don’t update content very often and don’t make changes, you theoretically can have the files minified just once and they stay like that forever.

But if you DO update content very often and your cache mechanism keeps clearing the minified files…then that means your server is constantly re-minifying those files and can be under more burden if you have many visitors requesting uncached/un-minified assets.

All this isn’t a big deal if you have a site with few pages, but certainly something to consider when you have tons of pages. Your server barely finishes minifying a portion of the files and then *boom* content update triggers a cache purge and the server has to re-minify from scratch again.

• A real-world analogy would be like…pretend you took forever to cut your grass, that by the time you’re barely halfway down, that the part you cut already grew back.
• Or pretend you took forever to make your bed that by the time you’re finished, it’s time for bed already.

How the size of your HTML/CSS/JS affects minification…

This is another factor. The thing is if your files are already lean, they won’t benefit much from this extra effort. Like no noticeable gain whatsoever.

But on the other hand, if they’re so huge and bloated…I’m not so sure minifying is a great idea either. Because yeah, you’re saving space but at the same time the user has to wait that much longer for larger files to minify. Weird catch-22, I know.

Typical HTML, CSS, and JS size below:

• LEAN sites – usually 50kb for HTML, and 100kb total for CSS and JS.
• BLOATED sites – 200-300kb for HTML, and 300kb to 1mb for CSS and JS.

What are you minifying? HTML or CSS or JS? Or all of them?

If it isn’t obvious, I recommend you not minifying anything that isn’t even that big to begin with. If you have a 50kb HTML page…minifying that only saves like 10kb…that’s nothing compared to the 300kb header image.

When it comes to CSS and JS, you focus only on the critical assets. That is…the CSS and JS that are used to render your site. And especially anything that renders objects above-the-fold. All that other junk that loads in the footer…they don’t matter at all because your visitor doesn’t actually perceive their load time.

And if you do render footer CSS/JS, then you’re being silly because you’re slowing down delivery of critical assets for things users don’t perceive.

“But what about those page scores recommending minification?”

Those tools are mostly generic recommendations that don’t apply to every scenario. Go ahead and listen to them if you want. You’ll certainly get a higher score, but the score itself doesn’t guarantee faster load or better SEO or whatever other junk you’ve been told.

• Why Google Pagespeed, Pingdom, and GTmetrix scores don’t matter

HOW to minify

Minification strategies for LEAN sites:

• A lean site to me is anything with under 100kb of HTML, and under 100kb of CSS and JS combined.
• Use a cache plugin with preload option. And let the cache plugin do the minification.
• You could also not even bother with minify as you won’t even notice the difference. There are probably other assets and things loading on your site that could be speed optimized with more noticeable results.

Minification strategies for BIG sites but LOW traffic:

• A “big site” is to me a site with over 1000 pages.
• Low traffic is anything less than 20,000 hits/month.
• If your site is big but lean and you don’t update content often, use cache plugin to minify and preload your cache.
• If you do update content often, try not minifying your html and do it only for CSS and JS.

Minification strategies for HIGH TRAFFIC sites:

• Feel free to turn it for HTML, CSS, and JS…just know that initial visitors will hit uncached pages and see slower loads.
• If you’re updating your content often, maybe you can minify only CSS and JS but not HTML.
• If you do update your content often (everyday) and you have many pages, I recommend to use Autoptimize to do your CSS and JS minification. This way those minified CSS and JS won’t be purged every time you update your content.
• NOTE: if you’re using Autoptimize to minify CSS and JS, don’t enable the minify options from your cache plugin.

Minification strategies for BLOATED sites:

• Use Autoptimize to minify CSS and JS.
• For HTML, you can minify if you have very few pages and/or don’t update your content often.
• If you have many pages and update content often…I probably wouldn’t minify HTML.

MY tactic for minification:

• I never do it from my server or cache plugin.
• I only do it from CDN. Most CDN’s all have CSS and JS minification. For the CDN’s that proxy the HTML content (like Cloudflare and QUIC.cloud), you can minify the HTML as well through their servers.
• This is great since it saves your servers the trouble.
• But CDN does come with some proxy delay…so if you don’t need a CDN (you have local traffic), you might be better off not using one.

What about CSS/JS merging?

I hate merging CSS/JS. Having one combined 300kb CSS/JS (instead of 400kb of uncombined and un-minified CSS/JS) might actually make your site appear to load slower. How?

• If your CSS is loaded in parts (separate files), the browser can process each piece immediately after it downloads. Critical CSS used for the actual HTML can therefore load faster.
• If your CSS is loaded in one massive chunk, the browser can’t process anything until the entire CSS is downloaded. This delays critical CSS since it has to wait for all CSS to load.

So why is this merging topic a big deal? It’s because many caching mechanisms won’t minify your CSS/JS unless you enable the merge option. And that’s where you have the extra variables to factor in.

Should you use critical CSS? (I mostly hate critical CSS tactics as well.)

• The safe answer is not to use critical CSS unless you know what you’re doing.
• It’s probably best if you learned CSS and refactor the code yourself. I don’t believe in doing automated critical CSS optimization.

Don’t know which minification strategy to use?

The safest way is not to even mess with it. If your site is bloated as heck, you’ll probably notice much more of a difference optimizing other areas than to waste your time with minification.

Just so you know, minification only speeds up the user’s very first visit. After that visit, the CSS and JS are already browser-cached and won’t even be downloaded again.

Ultimately, you’re just gonna have to test it for yourself. Don’t trust what anyone says. Not even me. Be your own scientist!