Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

Is compacting CSS / Removing unused rules for a specific page worthwhile in terms of bandwidth or can we rely on caching (headers/last-modified) to remove this overhead in the wild?

Cheers

Also, good luck with the beta everyone!

share|improve this question

8 Answers 8

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.

share|improve this answer
1  
Thing is, if you're reducing file size on one page by offloading it to unique or embedded CSS in other pages, you've just negated the benefits of caching. Best to take one hit up front to provide your users with a great experience on pages 2- X. So, make your css as clean as possible. Combine multiples into one. But don't make redundant, unique code to (slightly) lessen a one-time hit. –  bpeterson76 Jul 30 '10 at 21:43

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.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer
    
As an example, a major theme.css file where each page only uses around 30% of the rules ... but the mix would make splitting the fix up a nighmare. –  Aiden Bell Jul 8 '10 at 20:29

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.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

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?

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.