Increase Your Web Site Speed With .htaccess

Web site and blog owners are usually trying to increase the speed of their sites. Visitors won’t wait for a web site that loads in 30 seconds, so making a site load very fast is crucial.

With many sites containing many additional files that are downloaded, such as Javascript, CSS, images, and flash, web sites can take quite a bit of time to finish downloading. In this post I will show how you can change your .htaccess file to increase the speed of your web site very easily.

A Reason for Web Site Speed Increase

When a visitor views your web site for the first time, their browser will begin to download the necessary files it needs to display the web page correctly. The file names and locations are usually referenced in the web page itself, a CSS file or additional supporting files.

The more the browser needs to download, the slower a web site becomes. For many small images, the download speed could be quite quick. Once you add several larger files (40KB+), the time it takes to display your site could be too much for your visitor.

For many web sites, images such as logos and backgrounds won’t change very often, so a visitor shouldn’t need to download such files each time they visit your site. Reusing the images that are stored in their browser cache would improve the loading time of your site, as well as reduce the bandwidth usage on your host.

For those using Apache, you can easily modify your .htaccess file to manage the caching of various files from your web site. I’ll explain how to do this below.

Caching Files With .htaccess

As previously mentioned you may want a visitor to use their local cache for certain files, such as images, CSS and Javascript, that don’t change very often. Apache allows you to do this through the .htaccess file.

The .htaccess will use the mod_expires module to set the expiration date/time of certain file types to prevent these files from being download each time a web page is accessed.

There are two directives that you can use in the .htaccess file to accomplish this task: ExpiresDefault and ExpiresByType.

The ExpiresDefault sets a default expiration time for all files on your domain. For example, is you add the following to your .htaccess file:

All files on your domain will automatically have an expiration time of 60 seconds after the file was accessed. The A in the example means accessed, while an M would mean modified. The time specified on the line is in seconds.

You can also use this format, which means the same thing as above:

The ExpiresByType directive allows you to specify an expiration time based on file type. As an example, this is useful if you use CSS files that aren’t modified frequently. To set the expiration time for CSS files, you can using the following:

What the above lines mean is that when a visitor accesses your web page the first time, the CSS files are downloaded to their local browser’s cache. If they return to your web page within the next month, the browser will use the local cached CSS files instead of re-downloading them. You can do the same for any file types that aren’t updated on a frequent basis.

A cache solution may look like the following:

The default expiration time is set at 1 day, while each individual file type has its own expiration. The smallest expiration time are used by the HTML files, which may be updated on a frequent basis. Icon files have an expiration of 1 month, while all the other file types listed expire in 1 week. Keep in mind that the expiration times are determine by when the file is accessed.

By using the above definitions, visitors will be using the local cached files instead of having to re-download them all each time they visit a web page. If you use the same files on all your pages, such as files that belong to your template, then the files won’t need to be downloaded again, regardless of which page your visitor views.