Automatic optimize/minify CSS and JS files

Since CSS should stay in the head section, 'end' does not work for CSS.

http://stackoverflow.com/questions/1642212/whats-the-difference-if-i-put-css-file-inside-head-or-body

Well I always thought so myself too, but lately I was improving a site and checked google insights and that was saying I need to put css below. I don't like that too much because it is loading all content first and after that loading the css style and that dont look that great when having slow internet.

http://developers.google.com/speed/pagespeed/insights
https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

I think when using it like this it is correct: (property and rel)
<link type="text/css" rel="stylesheet" property="stylesheet" href="css/homepage.css" />

[ed. note: fourroses666 last edited this post 10 years, 4 months ago.]

According to http://stackoverflow.com/questions/4957446/load-external-css-file-in-body-tag/4957526#comment-26845703

In HTML5, link can only be used within the body if it uses the itemprop attribute instead of rel

The warning of insights means, that there should be less or no delay showing the first view of the page (without a scroll). This could be provided by using two css files. One for the fast display in head and a second one at the end of the body. It is a demanding task, to split the css in this way.

AddHeaderfiles has to be patched somehow to allow 'end' for CSS. Since I have switched CSS/JSfile handling to grunt (in combination with bower + sass), I don't use that package anymore.

oké thanks for the info. didn't understand the part to split them up in head and on the bottom.

At this moment I use "minify" http://code.google.com/p/minify/ on all my web projects. I do this to speed up the website so that the site is as fast as possible.
The 'problem' is that I need to build in minify myself, where the best solution is that a plugin handles this for me.

I'm not sure if something like minify can be turned into a plugin that scans the output of the pages for CSS and JS calls and then combine them into a call that activates minify. Can someone tell me if this possible and maybe put me in the good direction so that I can try to make a plugin like this?

By the way; it doesn't have to be "minify", I just want a option to optimize/minify css and js automaticly. I also found "CSS JS Booster" http://github.com/Schepp/CSS-JS-Booster maybe it is a better solution to start with?

This might be relevant, just FYI: https://forums.modx.com/thread/91496/why-compress-css-and-compress-js-are-silly?page=3#dis-post-530871

I do see allot of front-end improvement when using it.
Using it on all new (EVO) websites. All I need to do is add /min/?f= and combine + seperate the paths with a ,

Its not that hard to do. I rather deside what files I compress and which I don't then having it done automaticly.

Ah I just realized that thread I provided was about including the minimizing functions *by default*, the argument was it doesn't make a huge difference and ends up causing problems for new or inexperienced users.

So, maybe not relevant after all, for you experienced users. Never mind :p