: CSS reduction for faster loading / less bandwidth Is compacting CSS / Removing unused rules for a specific page worthwhile in terms of bandwidth or can we rely on caching (headers/last-modified)

@Vandalay111

You can get the best from both worlds, minify the file at execution time and gzip the output.
The source file stills readable when you need to edit it, but it's compressed when you download it

first: use htaccess to tell apache to treat all css files as php scripts and to compress the output when of type text/css

in .htaccess
AddHandler php5-cgi .css
AddType text/css .css
AddOutputFilterByType DEFLATE text/css

second: use output buffering with a callback function to minify the css code before the download starts, also set the expire time so the file gets cached

in your css file

<?php
ob_start("trima");
header("Content-type: text/css; charset=utf-8");
ob_start();
date_default_timezone_set('GMT');
$lasmod = "Last-Modified: " . strftime ("%a, %d %b %Y %T GMT", filemtime (__FILE__));
Header($lastmod);
$offset = 3600*24*30*12;
$expire = "Expires: " . date("D, d M Y H:i:s", time() + $offset) . " GMT";
Header($expire);
function trima($str) {
$str = str_replace(array("n", "r", "t", "o", "xOB"), '', $str); // remueve enter tabs y demas
$str = preg_replace('!/*[^*]**+([^/][^*]**+)*/!', '', $str); // remueve comentarioa
$str = ereg_replace("[ ]+", " ", $str); //remueve espacios multiples
$rep = array( '{ '=>'{', ' }'=>'}', '; '=>';', ', '=>',', ' {'=>'{', '} '=>'}', ': '=>':', ' ,'=>',', ' ;'=>';' ); // remueve espacios inecesarios
$str = strtr($str, $rep);
return $str;
}
?>
css content here


Third: profit?

Vote Up Vote Down

@Welton855

Even if performance is reduced by removing unused CSS on a per-page basis (and I'm pretty convinced that caching would outweigh this unless you're talking about radically different pages), you need to factor in the maintenance time required to do so. Unless you're Google, it's probably not worth spending a several days over the life of the site to save each user a tenth of a second.

A lot of this has to do with your site's usage profile. If you're really sticky, then caching wins hands-down. However, if you have a high bounce rate, you may be better off with optimized CSS (or spending the time you're wasting on CSS optimization making your site stickier!).

One approach that you could take if you have page-specific markup is to have a generic site-wide CSS file, and embed per-page rules in the HTML document's head.

Vote Up Vote Down

@Cofer257

Removing some unused CSS will obviously improve load times on one page, but you also have to balance that with the effect over several pages. You also want to avoid too many HTTP requests.

Remember, gzipping CSS is by far the most effective way to speed up CSS loading. The difference between one file with everything in and another with a few unnecessary blocks removed is negligible after gzip.

Vote Up Vote Down

@Voss4911412

There are a lot more potential places for optimization that will have a greater impact...

If you're looking for strictly a performance gain, CSS source optimization is pretty low on the food chain.

Excess cruft in the CSS source will take a minor hit the first time the stylesheets are loaded. Caching should take care of the issue from then on.

Vote Up Vote Down

@Pope3001725

Reducing the size of files will certainly reduce bandwidth and shorten page load time. The first time a user hits your site they won't have anything cached, and for most sites first time visitors are the majority of the traffic.

Additionally, make sure you have gzip compression enabled. This will do a drastic amount to reduce bandwidth.

Vote Up Vote Down

@Carla537

I would suspect it depends on the dynamics of your site. If you have many repeat visitors and not many new visitors, caching is probably enough. If, however, you have lots of new visitors (and especially if you want to make a good first impression), I think you should reduce the size of your CSS as much as possible.

Vote Up Vote Down

@Welton855

I don't think it's an either or. Reducing file size will help the user the first time they access the file. Caching will help on their second visit.

Vote Up Vote Down

@Si4351233

Any time you can remove stuff you will improve the speed of loading, if only negligibly. Also, it's good practice to remove stuff you aren't using for code clarity as well.

Vote Up Vote Down