In order to compress your CSS files with gZIP there are two things that you should do.
First, add the following line to the .htaccess file in your public_html folder:
|
1
|
AddHandler application/x-httpd-php53.css
|
By doing this, you allow the server to process .css files through PHP.
Next, add the following lines at the very beginning of your .css file(s):
|
1
2
3
4
5
6
7
8
9
10
|
<?php
ob_start("ob_gzhandler");
header("Content-type: text/css; charset: UTF-8");
header("Cache-Control: must-revalidate");
$offset=60*60;
$ExpStr="Expires: ".
gmdate("D, d M Y H:i:s",
time()+$offset)." GMT";
header($ExpStr);
?>
|
By doing this, you will enable the gZIP compression for your CSS file. For bigger websites there will be a significant improvement in the loading speed of your pages.
You can also use the Apache modules called mod_deflate and mod_expires in order to compress your CSS, js and image files. You can place the following rewrite rules inside the .htaccess file situated in the public_html folder:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
FileETag none
<IfModule mod_deflate.c>
#The following line is enough for .js and .css
AddOutputFilter DEFLATE js css
#The following line also enables compression by file content type, for the following list of Content-Type:
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml
#The following lines are to avoid bugs with some browsers
BrowserMatch^Mozilla/4gzip-only-text/html
BrowserMatch^Mozilla/4\.0[678]no-gzip
BrowserMatch\bMSIE!no-gzip!gzip-only-text/html
</IfModule>
<IfModule mod_headers.c>
<FilesMatch"\.(js|css|xml|gz)$">
Header append Vary:Accept-Encoding
</FilesMatch>
</IfModule>
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault"access plus 1 month"
# My favicon
ExpiresByType image/x-icon"access plus 1 year”
# Images
ExpiresByType image/gif "access plus1month"
ExpiresByType image/png "access plus1month"
ExpiresByType image/jpg "access plus1month"
ExpiresByType image/jpeg "access plus1month"
# CSS
ExpiresByType text/css "access1month”
# Javascript
ExpiresByType application/javascript"access plus 1 year"
</IfModule>
|
You can check the effect using this optimization tool – http://analyze.websiteoptimization.com
