htaccess leverage browser caching and compression
@david3jones
I’m a big fan of firebug and love to use the addon pagespeed from google which offers advice and tips for optimising the performance of your website and gives your site a rating out of 100. I do try and get as high a rating as possible from the pagespeed addon but i don’t get 100 i just like to get the most i can and then compromise on certain things. For example you can reduce the size of your html pages by removing space and extra characters that aren’t needed by “minifying” it but for my sanity i prefer not to do this so i have code i can easily read through etc. I recently used the pagespeed addon on my new website holding page Code Snippety i generally aimed to make sure i have between 60-80 out of 100. In this case because its just a holding page i got over 90 but again its really up to you how far you go with it and whats best for your visitors. Alot of the tips are very well explained by google so i’m just going to cover what i used for the sites caching and compression, i hope you find it useful. First off if you don’t have it on your web server already you will want to setup gzip and the expires modules for apache. In order to do this you will need to contact your host to set it up or log in to your server via ssh and run the following commands to get these up and running.
sudo a2enmod expires
sudo a2enmod deflate
after thats done you will need to restart apache, you can do so by typing the following
sudo /etc/init.d/apache2 restart
Now thats all done and dusted, lets take a look at a htaccess file i’ve created.
Options -Indexes
Options +FollowSymLinks
DirectoryIndex index.php index.html
<ifModule mod_rewrite.c>
RewriteEngine on
RewriteBase /
RewriteCond %{HTTP_HOST} ^mydomain.com [NC]
RewriteRule ^(.*)$ http://www.mydomain.com/$1 [L,R=301,NC]
</ifModule>
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# Or, compress certain file types by extension:
<files *.woff>
SetOutputFilter DEFLATE
</files>
# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html
# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4.0[678] no-gzip
# MSIE masquerades as Netscape, but it is fine
# BrowserMatch bMSIE !no-gzip !gzip-only-text/html
# NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48
# the above regex won't work. You can use the following
# workaround to get the desired effect:
BrowserMatch bMSI[E] !no-gzip !gzip-only-text/html
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl|jpg|png|gif)$
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_expires.c>
ExpiresActive On
# Turn on the Expires engine
# Expires a week after client accesses the file
ExpiresByType image/jpeg M604800
ExpiresByType image/gif M604800
ExpiresByType image/png M604800
ExpiresByType image/x-icon M604800
</ifModule>
There are 2 sections here that cover the compression that is deflate and gzip. To compress the output of say a css file you can see i’ve used the addoutputfilterbytype where you can use any mimetype at the end to reference different file types. Along with this i am using the files tag to compress any font files that end in .woff.
AddOutputFilterByType DEFLATE text/css
<files *.woff>
SetOutputFilter DEFLATE
</files>
The other way i’ve compressed the files is using gzip tags for example compressing the images i have this line
mod_gzip_item_include file \.(html?|txt|css|js|php|pl|jpg|png|gif)$
So this covers all my compression needs now for the image caching i’ve setup the following, which will add an expiry cache date/time to the common image types. The M604800 actually stands for a week if you want to set a month you can use A2592000
<ifModule mod_expires.c>
ExpiresActive On
# Turn on the Expires engine
# Expires a week after client accesses the file
ExpiresByType image/jpeg M604800
ExpiresByType image/gif M604800
ExpiresByType image/png M604800
ExpiresByType image/x-icon M604800
</ifModule>
Comments
Comments are currently closed