Kirby Html Minifier - Version 0.8


#21

I was just wondering if it was more than the 0.007 :slight_smile:

but the seo benefit is worthwhile


#22

Ive found that using the minifier reduces an HTMLs page weight by 10 - 15k. Some might say thats not worth it, but it could be if it was a high traffic site, and your bandwidth was on a limit.


#23

This is very true, and in fact i have tested it. i built the same site twice, once with bootstrap and once with my own code. My one was nearly 60K lighter.

You can get it really tiny if you use Uncss as a final step in a production build. Personally i use it as a postcss plugin, but there are versions available for gulp, grunt and cli.


#24

Well, yes, but that is another story. What I meant was, that with a framework like Bootstrap you have to write a lot more HTML than necessary. Of course, the amount of (unused) CSS is likely higher and adds to the overall page load.


#25

Oh yes, i see what mean… yup… got to hate having to have 14 classes on a element just to get it to dance the responsive tune.


#26

got to hate having to have 14 classes on a element just to get it to dance the responsive tune.

I actually tend to have a lot of classes on elements, but my css file is normally < 5kb as every class is very reusable.


#27

I tend to use up to 3 classes, and i use dynamically generated body ID so i can alter on a particular page or an entire section of a site without having to write yet more classes.

But we are starting to get off the point of the post topic…

@jenstornell thanks for the plugin, it works great so far.


#28

I agree with all of you here. Minify html is just one step of many and if you can stay away from frameworks you will not need as much code. With css box models like flex and grid, the need for a frameworks is as good as gone.

About adding classes to elements. I try to not add too many classes. I often don’t need more than two. But it’s a balance to keep both css and html clean and semantic. But again, the new box models help to reduce code as well, especially on the html side.

Anyway, if Google Pagespeed tells you to minify your html, Kirby Html Minifier could be your friend.


#29

I find page speed only really give a high level overview of the problems your site has. You should take care of them of course, but i find a more useful tool is Sitepeed.io.

You can crawl a whole site and get an html report on the findings by installing it and running…

sitespeed.io https://www.YOURDOMAIN.com -d 10 -n 3

the d option is the depth to crawl (without it, it will just do the home page), and the n is how many times to test each page so that an average can be calculated.

tip: if its a large site and it runs out of memory (default node memory allocation is something like 1gb) then try this command on a mac:

node --max_old_space_size=4096 /Users/YOURUSERNAME/.config/yarn/global/node_modules/sitespeed.io/bin/sitespeed.js https://www.YOURDOMAIN.com -d 10 -n 3

Many more options in the docs such as changing the browser used (Chrome by default), the screen resolution and simulating network speed.


#30

I can think of one further way to minify the html. Is it possible to get Kirby to generate relative urls to images and files used on the page rather then full blown address including the domain name?


#31

I agree that it would make the html size smaller, but it would change how the site works and make it harder for crawlers.

More about it here:

With the minifier I think it’s really important to keep it safe in the first place. For example I don’t use a dom node approach, because I don’t want to break the html if a closing tag is missing for example. Also by default I keep single spaces for most elements to keep inline elements work as expected. The first priority is to not break the html in any way. The second priority is to minify it as much as possible. :slight_smile:


#32

Replacing absolute URLs with relative URLs just to save bytes isn’t really worth it. If you use Gzip compression (you should!), the first part of that absolute URL will be compressed very well. The same is true for indentation and other whitespace in the HTML. Whitespace can also be compressed quite well.

But if you really want to have relative URLs: It is possible to override the automatic URL detection with a config setting:

c::set('url', '/');

#33

Version 0.8 released

Kirby HTML Minifier: https://github.com/jenstornell/kirby-html-minifier

It’s updated because I’ve released a completely rewritten version of the engine Tiny HTML Minifier.

Some new highlights are:

  • Inline SVG files are supported and will be minified.
  • Custom Elements support (<my-element>My content</my-element>).
  • The slash of self closing tags are removed from /> to >.
  • Unneeded element data are removed from style and script tags (type="text/css" and type="text/javascript").
  • The minifier is now aware of what’s inside <head></head> and will minify it without leaving the spaces (except for style and script).
  • Instead of whitelist all allowed elements, it minifies all tags, but skip textarea, code, pre and script.
  • The code length is reduced from around 300 lines to around 200 lines.

I think there was a question before about what will happend if a <textarea> is places inside a <textarea> or something like that. It will not minify the textarea and it’s now aware of depth for these kinds of elements. Therefor it sees the inner <textarea> as content of the parent <textarea>. The same goes for pre, script and code.


#34

Nice work! Just as a point of interest, how hard would it be to minify JSON schema tags (<script type="application/ld+json">), but skip javascript script tags? I have some of these on my site, and the do take up a lot of room.


#35

Good point! It’s not supported today. It will just not minify script tags.

Removing whitespace from a JSON does not seems to be that hard. The JSON should validate even without the extra whitespace.

What I need to do to cover this is: if name is script and if script type contains json, then don’t skip this element, but instead minify it like any other element.

I’ve added an issue about it: https://github.com/jenstornell/kirby-html-minifier/issues/12


#36

I did a big mistake yesterday. Somehow the important minifier file was not pushed to Github so nothing except the docs was updated. I’ve uploaded the file now, sorry about that.

Experimental support for json-ld

Anyway, I’ve already added an experimental support for json-ld. What I mean with experimental in this case is that I know that it will break if you use < or > inside the json-ld script tag. Because of that you also need to enable it with an option:

c::get('plugin.html.minifier.options', [
  'collapse_json_lt' => true
]);

I did not add a new version number this time.


#37

Great - thank you but I tried it with routes and I wasn’t working. Do you have any current issues with routes in Kirby?