Minifying HTML - Do you, don't you?

General question for anyone out there, do you generate a minified version of a HTML template and upload the minified version to be sent instead?

I was thinking about this process, and how you could build it in to a current workflow when developing an email campaign.

I came across this tool:

Using the Java Command Line method, I was able to generate the minified version with little effort.

java -jar htmlcompressor-1.5.3.jar --preserve-comments --type html -o "/path/to/minified-version.html" "/path/to/normal-version.html"

You would need to save the htmlcompressor.jar to somewhere and then switch into the directory where the java executable is via Command Line.

In terms of filesize saving one template went from 79kb to 38kb, that's a pretty big difference. Granted it was a long newsletter, and had a lot of table nesting, CSS and everything else, but just over 50% saved after reducing white space, line breaks and indents.

Given the problems with larger sized emails (filesize) where some clients causing clipping or, having the user initiate the download of the remaining content, I guess minifying HTML might be something to consider for larger emails?

Are there any known bad effects of this at all?

zerocents zerocents, 2 years ago

If you live life on the bleeding edge, you need to be careful. It's far safer to simply select all lines of code and shift+tab until you remove all indents. The extra 10-20% gained by going all the way not only makes it difficult to make quick changes in a pinch, but can actually break your email. If you use conditional comments at all, I don't recommend it unless you're prepared to go in and fix it post-process. Feel free to minify your CSS however.

My guidelines for manual compression:
- Backup your uncompressed version.
- Select all, shift-tab x10
- Remove all trailing spaces
- Remove all spaces after semi-colons (beware of semi-colons in content copy)

My guidelines for preprocessors:
- Backup your uncompressed version.
- Preserve all comments.
- Preserve DOCTYPE.
- Preserve http/s protocol.
- Preserve Boolean attributes.
- Don't remove quotes on attributes.
- Don't remove redundant tags.
- Don't remove line breaks.

You need to be extra careful if you have a lot of template code in your HTML as this can break preprocessors.

The benefits of compressing HTML markup:
- Typically 30% reduction in markup size. YMMV.
- More content becomes visible before truncation.
- Fit more into your 100kb budget.

One of the most complex emails I worked went from 183kb uncompressed, down to 97kb compressed. It can make a huge difference.

Edit: One other major downside is that you can't paste your minified code into Litmus for testing if you remove line breaks. Litmus will insert line breaks seemingly at random, in the middle of tags, rendering it useless. The only way to test aggresively minified code through Litmus is by email.

Michael Muscat
jmwhite, 2 years ago

I love life on the bleeding edge! But I haven't sent a minified version of a campaign through an MTA to date. I did actually find a few problems after generating a minified version and testing it with an Inbox Inspection (Not via Litmus, but through EOA), as well as viewing the minified output in Dreamweaver CC. Here's what I found:

- Removing the space between a closing style tag when the last preceding content is a media query ending bracket will break valid syntax. I used a regex rule to stop the yui-compressor doing this.
- Removing line breaks can cause display issues as noted.
- Not sure if VML code will get borked with automated minification.
- Conditonal comments get messed with.

Certainly, I would never directly overwrite a version of a campaign email, hence why I generated a version with min at the end, so its separate. The htmlcompressor tool only reads the source file and doesn't modify it, so it should be safe.

I'm more for automation in a process, rather than manual, but I appreciate where your coming from in terms of your process, I'll see how I get on with both methods however.

There are many preserve flags through htmlcompressor, which I'll look into, but your insight is very helpful. Its something I haven't really seen much information about, but I figured the whole truncation scenario means its something to consider for larger campaigns.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free