Compressing CSS and JavaScript files will put a bit more load on the server but its worth doing as it will save you some bandwidth and your site will be delivered faster to your users/visitors.

Load mod_deflate

First you need to make sure you have mod_deflate module loaded. Check you have this line in your httpd.conf file and if so, that it’s uncommented. The line should look like this:

LoadModule deflate_module modules/mod_deflate.so

All following options can be put in httpd.conf file but just for keeping things organized I recommend creating a new file in the same folder called deflate.conf.

Enable compression

To enable compression for everything type in the following:

SetOutputFilter DEFLATE

To enable compression only for certain types of files type in the following:

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css
AddOutputFilterByType DEFLATE application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript

Compression level

Available levels are between 1 and 9, meaning 1 – weakest compression using least resources and 9 – strongest compression using the most resources of the server. All modern servers have no problem with handling level 9.

DeflateCompressionLevel 9

Old browsers

To exclude browsers not fully supporting compression type in the following:

BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

Logs

Setting up a log file lets you know when and who requested your files as well as gives you information about how well your files were compressed.

DeflateFilterNote Input instream
DeflateFilterNote Output outstream
DeflateFilterNote Ratio ratio
LogFormat '"%r" %{outstream}n/%{instream}n (%{ratio}n%%)' deflate
CustomLog logs/deflate_log deflate

Result

Your finished deflate.conf file should look something like that:

<ifmodule mod_deflate.c="">
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css
AddOutputFilterByType DEFLATE application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
DeflateCompressionLevel 9
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
DeflateFilterNote Input instream
DeflateFilterNote Output outstream
DeflateFilterNote Ratio ratio
LogFormat '"%r" %{outstream}n/%{instream}n (%{ratio}n%%)' deflate
CustomLog /var/log/deflate_log deflate
</ifmodule>

In your httpd.conf file add one line to include deflate.conf

Include /path/to/file/deflate.conf

Restart apache:

service httpd restart

If Apache starts without any problems your content should be compressed.

More detailed info can be found on Apache documentation here.