I'm working on performance of a Thematic Child Theme and I'm faced with an issue.
* Automatically compressing multiple CSS files into one *
It's a long post so read it if you will and of you do, I'd be delighted if you shared your thoughts!
In developing my own personal website: http://theoribeiro.com, I test driven most of the nice cache and optimization plugins out there. I ended up with a list of 4 favorites which can be used in two combos:
Combo 1:
* DB Cache Reloaded (for caching database queries)
* WP CSS (for joining multiple @import CSS declarations into one CSS file and minifying the content)
* Hyper Cache (for caching pages and serving as static HTML files)
Combo 2:
* W3 Total Cache (works for almost everything plus more but doesn't join multiple @import declarations into one CSS file)
* ??????? (for joining multiple @import CSS declarations into one CSS file and minifying the content - WP CSS doesn't work here in conjunction with the previous)
I don't actually need such a performance boost at this time but for the sake of science and, love for experimentation and all, my first option was Combo 1 but combo 2 offered one irresistible temptation:
Trying Amazon's Cloudfront Content Delivery Network for speeding delivery of static content around the globe so I ended up choosing the former.
Only trouble is I couldn't find a solution to joining and minifying @import declared CSS that would work along W3 Total Cache (in my opinion the great plugin biggest flaw).
I thought, what the heck, why not come up with an "in-theme" solution for doing this job and serve an already combined and minified file to start with??
Though I managed to build all the website myself I'm a kind of PHP and Javascript illiterate that kind of guess my way through it combining the help and knowledge of others with my intuition but some stuff are still beyond my reach.
I came across a couple of interesting posts on the web, specially these three:
http://www.catswhocode.com/blog/3-ways-to-compress-css-files-using-php
http://rakaz.nl/code/combine
http://www.sonassi.com/blog/2009/06/04/combine-and-compile-css-and-js-into-gzipped-files/
and begun trying to build a solution inside my functions.php
file.
It's on the early stages but so far, only putting the following function works but compresses all my HTML and CSS and is probably not very nicely done or written. Creating a cache file on the fly would be much more elegant.
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;
}
function compress_css() {
?><style><?php
/* your css files */
include('library/styles/reset.css');
include('library/styles/typography.css');
include('library/layouts/1c-fixed.css');
include('library/styles/images.css');
include('library/styles/access-essencials.css');
include('library/styles/access.css');
include('library/styles/screen.css');
include('library/styles/plugins.css');
include('library/styles/jquery.ad-gallery.css');
include('library/styles/colorbox-plus.css');
include('library/styles/photoshelter.css');
?></style>
<?php
}
add_filter('thematic_create_stylesheet', 'compress_css');
Anyone interested in sharing their thoughts or helping with the challenge? :)