Possible Duplicate:
Any recommendations for a CSS minifier?
I have a CSS file which is rather large. Is there any software I can use to make the file smaller so it will load faster? Also is there something I can do to increase the chance of my CSS being cached by the browser?
You minimize your CSS using a CSS minifier or compressor. This question has answers that will address that for you:
What are some good css and js minimizers for production code?
As for caching, the smaller the file the better, of course. You can also set your EXPIRES HEADERS that your server sends out. Yahoo has some information here:
Yes! It's called css compression/minification. In my opinion, this is the best compressor: https://csscompressor.net/ Paste in your CSS, and it will be compressed. Also, make sure you're using as few selectors as possible in your HTML, go through and see if you can combine them and remove proerties you don't need. Set defaults with this code, so you don't have to write then into each selector at the very top of your main css file. Once you've done that, then cache & Gzip your CSS by adding this to your .htaccess file in the root of your site.
#GZIP ----------------------------
AddOutputFilterByType DEFLATE text/css
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include filee \.(html?|txt|css|js|php)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
<ifmodule mod_php4.c>
php_value zlib.output_compression 16386
</ifmodule>
#CACHE ----------------------------
<ifModule mod_headers.c>
<filesMatch "\\.(css)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
</ifModule>
<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 604800 seconds"
</ifModule>
That should cache and make your css as small as possible. It's what I use on my site and my load time after caching is just under 1 second on a good connection!
You can use a CSS Minifier.
This has to be done server side to be useful.
You should also employ some form of cache control; for example, send far distant expiry headers and append the last modified time to the file as a GET param. That way, when you update your file, the client's browser will download it. If you don't modify it, your end user will only download it once (until expiry).
