HTML / CSS / Javascript Minimizer Recommendations

[M_Lyons10]

Hello everyone!

I'm trying to reduce the size of my site so that I can speed it up a bit and was looking at minimizers.  I have found a few online, but wanted to ask what everyone else uses.

I have two requirements:
1) I would prefer an application that I could install on my machine as opposed to a website.

2) I would like something that will allow me to batch all of my html / css/ and javascript files all at once just for conveniences sake.

 

Does anyone have any that they would recommend?

 

Thanks again for your help!

[+Tantawi Subscriber²]

npm + Grunt is your answer, then use:

For JavaScript: https://github.com/gruntjs/grunt-contrib-uglify
For CSS: https://github.com/gruntjs/grunt-contrib-cssmin

For HTML: https://github.com/gruntjs/grunt-contrib-htmlmin

[Seahorsepip Veteran]

I personally use Koala for batch less/sass compilation and css/js minification. You can also have a file automatically processed on each edit, this way you can locally work on a website and have the minified js updated on every edit. 

 

Also you could consider using an IDE like webstorm which has above features plus a lot more functionality all combined in a single application.

 

Also minifying html isn't worth the gain these days, most optimization that can be done is removing line breaks and whitespace which is negligible. As example if you're worried that your html is too big in a search result page you could consider implementing pagination.

 

Minifying is not such a big speed gain as most people expect, yes the first page load is faster but the page loads after that use the cached resources so it doesn't matter anymore if the resources are minified or not.

 

So why do sites minify anyway even when resources are cached anyway on the first visit?

Obviously they want the first visit to be fast too and they want to save bandwidth by having smaller resources.

[M_Lyons10]

Thank you both for your help.

I don't honestly yet know the merits or value of minifying my html, however it was something that I was looking into (along with reducing the size of images, minifying the css, etc.).  I will deinitely take a look at Grunt as well.

A large amount of my traffic comes from mobile anymore, and as a result I just want to make sure that I have the fastest experience possible.  While optimizing the images doesn't impact my development work each week, minifying the html for instance creates a significant maintenance headache if I cannot do it on the fly prior to publishing the site update (i.e. maintaining a readable copy for edits).  That's why I was originally looking into this.  I was really shocked at how few tools actually exist to do this beyond one page at a time...  That hardly seems productive.  lol

Thank you both for your help.  I am going to continue to look at options and ideas for further improving the speed of the site, and will give this a try.  If it isn't cumbersome to implement, and the gains are there, I would definitely start doing this. 

[DevTech]

At least you are not one of those nut case minimalists that hand craft the smallest possible HTML and then completely idiotically ignore the megabytes of payload that SEO and Adsense stuff add to the page.

 

BTW, just search GitHub on keywords like "Javascript" and "ES6" and then sort the results by # of stars and you will get tons and tons of pre-canned "workflows" that will include all the popular minimizing utils. Darned good chance that one of the popular workflows will suit your own personal style.

 

Even just browsing through just the Facebook GitHub will yield tons of illuminating information on all aspects of webdev.