Minify CSS

[danst0]

Hi,

I am looking into minifying (remove comments, new lines, whitespaces) the CSS output of S9Y using this php program as a replacement css file:

Code: Select all

<?php
  header('Content-type: text/css');
  ob_start("compress");
  function compress($buffer) {
    /* remove comments */
    $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
    /* remove tabs, spaces, newlines, etc. */
    $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
    return $buffer;
  }

  /* your css files */
  include('style.css');

  ob_end_flush();
?>

(not by me)

As I now realized, the serendipity.css file is constructed not only from my template style, but also fallback and plugins.

Is there a) a way to get this script working anyway or b) where would one insert this code directly in s9y (so where is the css generated)?

Daniel

[yellowled]

As I now realized, the serendipity.css file is constructed not only from my template style, but also fallback and plugins.

Correct. One would have to minify the dynamically generated stylesheet, i.e. serendipity.css. However, some templates add extra stylesheets on top of that (i.e. Bulletproof).

I've been meaning to suggest this as a new feature in future versions or a plugin. Preferably, it would not only minify CSS but also JS files (using YUI compressor which can minify both) as well as optionally concatenate multiple files. However, I'm not sure about any limitations created by our system of adding styles to serendipity.css ...

YL

[danst0]

I like the plugin idea: The serendipity.css file has to be created someplace, isn't there a way to hook in?

Daniel

[sonichouse]

There is a list of all 97 hooks here, but I do not see any mention of CSS

[yellowled]

I like the plugin idea

Personally, I would prefer to see this as a core feature. Performance is going to become even more important in the future given the expanding mobile web usage.

Then again, some people might object to using YUI compressor, and I'm not sure if/how the various CSS/JS minifiers out there could be combined into the same functionality. So maybe a plugin is the better idea. Garvin?

Either way, the functionality itself needs some options. It should be possible to choose which (external) JS/CSS to concatenate and/or minify in some way since it might not be desirable to combine all of them (think: conditional referencing of stylesheets or scripts only if they're actually used).

I also strongly recommend using the latest YUI compressor and keeping it up to date. I recently experienced some issue with it concerning @media queries. This is likely to happen again if CSS3 introduces new modules using syntax the compressor doesn't consider to be problematic. Still, it's (IMHO) the best minifier out there, especially since it kills two birds (CSS and JS) with one stone.

YL

[garvinhicking]

Hi!

The serendipity.css is created by serendipity.css.php and pipes through all CSS through the 'css' event hook.

Thus, a plugin could ismply register the 'css' hook, do the PHP replacement on all of $eventData and spew it out.

As for javascript, there's no real way because all plugins simply add their JS related code calls to the 'frontend_header' event. A plugin could listen on that one, preg_match on all <script> tags, combine the content of all of these files, remove all those <script> tags and replace it with a single created files in templates_c/ or archives/.

Both things would need to be done last in queue, the plugin would need to be placed at the end.

Having said that, I'm not a huge fan of minifying and compressing scripts, mostly because it makes debugging virtually impossible, which would have an impact on the job I do here on the forums

However, if someone wants to develop a plugin for that, I'm open-minded towards this.

Regards,
Garvin

[yellowled]

Having said that, I'm not a huge fan of minifying and compressing scripts, mostly because it makes debugging virtually impossible, which would have an impact on the job I do here on the forums

Erm ... why?

First of all, Firebug still displays minified code in a proper way, at least for CSS. I'm pretty sure similar tools for other browsers do that as well. Second, we could (and should) always keep an unminified copy of a CSS or JS file - i.e. have a serendipity.css (which should be accessible from the outside), but include serendipity.min.css. And finally, there are developer tools out there which can "re-format" minified code to a human-readable format.

Personal opinion: measures improving the performance are only going to get more important in the future. We should at least give users the option to use them.

YL

[danst0]

Couldn't this be integrated into the extended_properties caching (save a minified version of all css in the database)?
There are php versions of the YUI minifier, alternatively the minified cached version could be created using the original js-minifier in the backend.

Daniel

[garvinhicking]

Hi!

Couldn't this be integrated into the extended_properties caching (save a minified version of all css in the database)?

No. extended_properties is for entry metadata. minified CSS etc. is global, and completely unrelated from entry-dependant metadata.

The plugin should be completely independent from that, I do not really see any interoperability that the entryproperties plugin could provide...the functionality would be something completely new.

YellowLed: Bandwidth increases much more in the future. Saving a few bytes by compressing data is not worth the extra calculating power or the increased complexity of code, as well as the maintainability. Also, compressing many scripts into one actually hinders threading of browsers, there are several articles on why putting everything into a single file can actually even decrease rendering and download performance. IMHO there are more important battles that should be fought, other than this. $0.02, of course. I can accept and understand differing views on this.

Regards,
Garvin

[danst0]

I did some testing with the plugin / event hook on css approach. The results show that it works nicely (with the right regex it would be even better). But there are some tags that are not touched that way, even though I put it as last event plugin in the queue:

Code: Select all

.serendipity_karmaVoting_links .serendipity_karmaVoting_current-rating {
    z-index: 1;
    background-position: left center;
}
.serendipity_image_center {border: 0px;padding-left: 5px;padding-right: 5px}.serendipity_image_left {float: left;border: 0px;padding-left: 5px;padding-right: 5px}.serendipity_image_right {float: right;border: 0px;padding-left: 5px;padding-right: 5px}.plainList 

Non-minified entries include here the karma and livesearch plugin.

@garvin: the extended properties was only a (not well thought through) suggestion. My main point was if it would be possible to cache the css there would be little drawback (no additional performance hit by minification) and increased performance by reduced size.

Conclusion:
At the moment the my css is about 6% of the total page (including pictures) and could be minified by about 38% using the YUI compressor. Ergo, the total bandwidth effect would be about 2,3% (or 39 ms at current level, depending on your internet connection).
So sadly, I do not think that it is really worth investing to much time and probably the additional regexps take longer than that?!

Daniel

[yellowled]

Also, compressing many scripts into one actually hinders threading of browsers, there are several articles on why putting everything into a single file can actually even decrease rendering and download performance.

True, it's not always the best idea to just concat everything. It's also true that i.e. the iPhone is unable to cache files larger than a really small amount of KB, depending on iPhone generation, so putting everything in one file might not always be the ideal solution. Then again, I have never heard of minifying being bad in any way whatsoever.

It's probably also true that in terms of optimizing performance, the John Doe blogger has other areas to start with (integration of external services, minimizing background images, writing better CSS etc.) - I was just thinking about all those "Hum, there's no minify plugin for s9y? I'm gonna use something else then." people.

YL

[Timbalu]

Just a note, so I can close some tabs:

CssMin is a css parser and minifier. It minifies css by removing unneeded whitespace character, comments, empty blocks and empty declarations. In addition declaration values can get rewritten to shorter notation if available. The minification is configurable.
http://code.google.com/p/cssmin/
http://code.google.com/p/cssmin/wiki/Configuration
same for js files
https://github.com/rgrove/jsmin-php/blo ... /jsmin.php

[danst0]

Hi,

I built a plugin for minifying css using above mentioned script. There are several issues:

• * I haven't read the MIT license fully (http://www.opensource.org/licenses/mit-license.php)
  * Some parts of the CSS are not minified (eg. Karma css) no matter if the plugin is first or last in the list

I put the Plugin here: http://dl.dropbox.com/u/285107/serendip ... ifycss.zip

Would be cool to see it in the repository someday.

Daniel

[onli]

Is there something to be aware of? Installed the plugin, but my css don't seem to be minified.

[danst0]

Scroll down in your serendipity.css file, The lower parts should be minified.

Daniel

Edit: had a look at your file. That's one of the issues I mentioned above. Some parts of the CSS are not minified. But I don't understand why!