Recently we made some modification to our site. The modification primarily was primarily related to optimizing page load times. This particular optimization is related to the front-end. There is a very cool tool called YSlow which is integrated to firebug a popular addon for firefox browser.

YSlow advises you on the 13 Performance rules:

1. Make Fewer HTTP Requests
2. Use a Content Delivery Network
3. Add an Expires Header
4. Gzip Components
5. Put CSS at the Top
6. Move Scripts to the Bottom
7. Avoid CSS Expressions
8. Make JavaScript and CSS External
9. Reduce DNS Lookups
10. Minify JavaScript
11. Avoid Redirects
12. Remove Duplicate Scripts
13. Configure ETags

To get the best performance possible by making the least possible changes, I suggest using rule no. 3 and 4. This particular article will outline using the apache configuration changes to get the best possible performance. This is by far the easiest way to get most out of your website.

Rule no. 3, add an expires header:

Adding an expire header to the resources used by your pages will save you bandwidth as well as reduce the total time needed for loading the pages. What this header will do is tell the web browser that partciular javascript, css and image files will not expire until certain date and time in turn saving the unnecessary downloading of those files. To implement this change you will just need to add following option to your webserver configuration file. The following snippet is for apache web server:

ExpiresActive On

# expire images after a month in the client’s cache
ExpiresByType image/gif A2592000

# javascript files are good for 1 day
ExpiresByType text/javascript M86400

# Everything should expire after a week
ExpiresDefault A604800

Where AXXXXX/MXXXXX is in seconds and A means the files will expire XXXXX seconds after the file was first accessed and M means XXXXX seconds after the file was last modified. For more information see apache expires module. This modification will save you around 50% bandwidth and similar load times for your client!

Rule no.4, use gzip components:

<Location />

# Insert filter
SetOutputFilter DEFLATE
# 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
# Don’t compress images
SetEnvIfNoCase Request_URI \\.(?:gif|jpe?g|png)$ no-gzip dont-vary
</Location>

 

This change only takes few minutes and it will visibly improve your performance. This is because you are compressing files before transferring them. Note: Make sure you don’t compress the image files as they are already compressed.

I hope you will find it useful. If there are any further questions or comments, please post comments.

Hi!

Welcome to my personal weblog. I will be writing about the things I encounter at work.

I  will write about things related to software development that I find interesting.

Hope to see you soon.