You should only minify your CSS file after you are done writing it (for quicker formatting on your end). If you Google “Compress CSS” there are plenty of resources available, although CSS Drive has my favorite. Remember to back up your CSS file beforehand, just in case a) something goes wrong or b) you plan on redesigning your pages in the future.
If your server uses Apache2, mod_gzip is out of the picture so we’ll use mod_deflate instead. Here is an example of basic compression with mod_deflate:
#We can't compress images
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ \
#Don't compress executables
SetEnvIfNoCase Request_URI \
#Don't compress pdf files
SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary
If we are able to use mod_gzip, we’ll use this:
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$ #Compress plain text
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_exclude mime ^image/.* #Exclude images
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
The above two examples are really the easiest way to do this, since .htaccess will take care of everything automatically. If you are not allowed to implement either of the above, there is a php alternative. What you’ll want to do is create a file in your includes called gzip.php and add the following:
if(isset($_SERVER['HTTP_ACCEPT_ENCODING']) && substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))
// start ob_gzhandler
//set document type headers
//set cache-control headers
$addition = 60 * 60 * 24 * 365 ;
$expires = "expires: " . gmdate("D, d M Y H:i:s", time() + $addition) . " GMT";
//set expires headers to 1 year
4. Add expires headers, configure entity tags
Why do we want to do this? It is going to help the browser cache your files easier and the more files a browser caches of yours, the less HTTP requests the browser has to make. Load time will also decrease because your browser will have to download fewer files to load the page. To do this properly, simply add this to your .htaccess file:
#Revalidate in 1 hour
Header set Cache-Control "max-age=3600, must-revalidate"
#Cache expires in 1 year
Header set Cache-Control "max-age=290304000, public"
Header unset Pragma
Header unset Last-Modified
FileETag MTime Size
#Never cache this, files are dynamic
Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
Header set Pragma "no-cache"
What the above code does is grab the file’s date of last modification (filemtime()) and appends it to the file name and what you end up with is something like this:
You can use this same method for your CSS files, as well. Images that are updated may require renaming depending on which browser a visitor is using.
5. Cool it with the images
This is a simple one. Don’t be an idiot – if the image isn’t adding to the content/design or making it easier for a user to navigate the site, chances are you don’t need it. The truth is, you can do a lot with CSS and you can make it look just as hot as you can with images. You should also try to use png’s instead of jpg’s or gif’s whenever possible. PNG’s provide the best quality in almost every situation and have generally have smaller file sizes.
6. Use CSS Sprites for background images
This is especially important for things like rounded corners and menus that require more than 1 image to complete. You can make a full menu with hovers included in one image. CSS Tricks has a great article on how to use CSS Sprites to your benefit. They use jpg’s which, as you now know, I am totally against. So just imagine that post including png’s and you should be all good.
7. Download YSlow + Firebug or use some other free website optimization analyzer
You can download YSlow and Firebug here: http://developer.yahoo.com/yslow/
There you have it, these are some simple steps you can take to get the most out of your website. Feel free to ask any questions in comments or if you’re one of those types, call me an idiot. To learn more about website performance and optimization, visit Yahoo Developer Network