Hi all – I’ve been meaning to post a warning for a while. The minify plugin that Caddy uses is unusual and dangerous in that it will delete your <html> and <head> tags by default, and will also delete any IE conditional comments you have, and probably other syntax as well. There’s a high risk it will break your site.
It’s the only minifier in the world that behaves this way by default, and I assume this is not what you expect when you use it. The creator of the tool has an idiosyncratic philosophy such that he thinks a minifier should enforce his interpretation of the HTML spec, rather than just minify. So for example, since the HTML spec describes the <html> and <head> tags as “optional”, he thinks that means they should be deleted. The spec is written in terms of a renderer’s behavior (i.e. a browser), but the attributes and contents of the <html> and <head> elements are often consumed by other agents, like search engines, or Facebook and Twitter cards/presentation, etc. (They’re also consumed by browsers – e.g. the language code attached to the <html> element will determine how the browser handles certain accessibility and other features…) The guy doesn’t understand that these provisions in the spec have no bearing on how a minifier or site generator should behave, that nothing should be deleted, etc. (Or in one of the specs – there are actually two HTML specs, though maybe the “optional” bit is in both.)
So anyway, some of the search engine stuff will break without the <head> tags, and I don’t expect FB and Twitter to always process their metadata without them either. You can set the minifier to not delete those tags (though I’m not sure how to do this via the Caddy plugin implementation), but there’s no option to not delete conditional comments. Long-term, I expect this minifier be a persistent problem, since he thinks it’s his place to enforce his peculiar reading of the HTML spec – he’s way too interested in deleting stuff.
I gather that the only reason this minifier is associated with Caddy is that it’s written in Go. That’s somewhat arbitrary. If you want safe minification, I’d try html-minifier, which is a Node package. It does some crazy things if you choose some of the options, but by default it’s pretty safe. WebMarkupMin also looks pretty good, but it’s a .NET library, which makes it a bit harder to implement from the perspective of a Caddy user. Either way, these aren’t going to be Caddy plugins and will require some separate workflow – them’s the breaks.
Hey Joe, I’m glad you can feel comfortable voicing your concerns here. Looking through the issues on that repository, I can see why there’s a bit of controversy. I don’t think it’s a bad discussion to have.
since the HTML spec describes the and tags as “optional”, he thinks that means they should be deleted.
Well, that is the definition of minification. What you’re probably bumping up against most of the time are clients that are not spec-compliant. In the case of removing a tag that has useful attributes, though, maybe that’s an issue to open with the repo as a bug report.
Let’s be sure to make a clear distinction between the minify plugin and the underlying minification library; they are written and maintained by different people! It could be that the behavior you’re seeking is possible with the underlying library you’ve linked to, but maybe its options aren’t exposed through the plugin. In that case, definitely file an issue with in the minify plugin’s repo.
Hi Matt – I just saw this again. I already filed issues with the repo before posting. I see this is as extraordinary case where communication seems to be very difficult. The minifier author is basically reading through one of the HTML specs and deciding to delete anything that isn’t mentioned in the spec, or which he sees as violating the spec. No other minifiers work this way. 99.99% percent of web developers would cringe at the thought of deleting the html and head tags from their page source. They’d know that something would break as a result. It wouldn’t matter to most developers whether a spec calls those tags “optional” – they’d care more about reality and the web and so forth than a spec, and a key fact here is that there are lots of consumers of our web pages, and only some of those consumers are browsers (which might notionally be bound to an HTML spec).
The trouble here is that he’s deleting by default at this point, and in some cases there’s no opt-out. He just started deleting conditional comments – that’s new, and contradicts the minifier’s docs. There’s no opt-out for it, so you’re simply not going to be able to preserve your source. (We got him to add an opt-out a while back for the deletion of “optional” tags.) Hence the warning – I think people will be very surprised by what the minifier is doing by default – it’s well outside the norm for minification, which for HTML is usually about whitespace removal and redundant attributes. (As you probably know, minification for CSS and JS gets a lot more interesting and can look like an optimizing compiler, especially with UglifyJS, csso, and Google’s Closure compiler.)
Maybe adding a strictmode flag with default =false could be nice. Currently, html is minify-ed by a Play plug-in… Maybe the caddy plug-in could working with the same settings :
“optional” does not mean “has no effect”. It just means you should be able to take it out and still have valid HTML remaining. Therefore, any minification should definitely not remove that stuff by default. Styles and colours are optional too, I wouldn’t expect those to be stripped.
Minification is making a file “as small as possible whilst preserving the end result”, not “as small as possible”.
One major issue I’m having is .svg distortion and .css minification issues.
HTML
I am having the <head> tag disappearing issue. My <html> tag does not disappear (likely because I have <html lang=en>).
SVG
Sans Minify
Minified
It creates double lines and ruins the top arch. I realize the SVG support is supposed to be in beta, but this isn’t production ready. If it’s not working correctly, it should be off by default.
CSS
Font Sizes
My first problem was font sizes. If my css contained a decimal em value (ie font-size: 3.5em), it would round it off changing many of my font sizes a great deal. I fixed it for now by using px values instead.
Notice the translucent black rectangle with the “Built at the center…” caption .carousel-caption p { background-color: rgba(0, 0, 0, 0.5); }
And the translucent white circle slide indicators. .carousel-indicators li { background-color: rgba(255, 255, 255, 0.5); }
Minified
