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:
or
ExpiresDefault “access plus 60 seconds”
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:
or
ExpiresByType text/css “access plus 1 month”
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:
ExpiresActive On
ExpiresDefault A86400
ExpiresByType image/x-icon A2419200
ExpiresByType image/gif A604800
ExpiresByType image/png A604800
ExpiresByType image/jpeg A604800
ExpiresByType text/css A604800
ExpiresByType application/x-javascript A604800
ExpiresByType text/plain A604800
ExpiresByType application/x-shockwave-flash A604800
ExpiresByType application/pdf A604800
ExpiresByType text/html A900
</IfModule>
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.
If you liked reading this post, consider following Technically Easy through the following:
on October 26, 2008 at 7:59 pm
That sounds cool, but I’ll let WP-SuperCache plug-in does the job for me (on WordPress)
Twitter: michaelaulia
on October 26, 2008 at 9:30 pm
@Michael: The method explained above can actually help the WP-SuperCache plugin. The WP-SuperCache plugin processes the PHP files and creates static HTML pages from them. Each time a visitor requests a page, the static HTML pages are served. The problem without using the above method, is that they the static HTML pages are sent to the browser each time.
By implementing the caching explained above, you can set an expiration time. This means that if a visitor requests the same static HTML page before it has expired on their local machine, there is no server request as the local copy is displayed. Less round-trips to the server = faster respone times.
I like to use both, as they compliment each other nicely.
on October 26, 2008 at 11:30 pm
Great post!!!
I will implement this directives in .htaccess.
Thanks again for the great post.
on October 27, 2008 at 1:28 pm
Quite some time ago I came across something similar to this. I took notice at the time but then promptly forgot about it. Thanks for the reminder. When I have some time I will experiment with the suggestions made here. Thanks.
on October 29, 2008 at 9:02 am
Thanks for this great tip. I’ll be trying it on all my blogs/sites right away. There is however one thing I’ld like you to reply to (if you have time)…
If people access the site from their cache, I don’t see them in my log. How accurate is my traffic analysis then? (Depending on expiry times of course…)
Cheers
Willem Kossen
http://willemkossen.nl/b
on October 29, 2008 at 7:48 pm
@Willem: Chances are your HTML pages are cached only for a few minutes so they won’t usually be retrieved from the cache, unless your visitors visit the same page within a few minutes. This means that you will see the request in your server logs.
on October 30, 2008 at 12:15 am
Great tips! I’ll try to implement this technique.
What will happen if I set CSS expiration date for a week and then within that time I change the theme? Thanks.
on October 30, 2008 at 8:45 am
@Icon: If you change it before it expires, the browser will probably use the older cached version. One way around it is to include a version number in your files, and then reference the new version. This will cause the visitor’s browser to download the new version. Another option is to change the location of the CSS file, and depending on the theme change, it may be in another directory.
on April 3, 2009 at 10:10 pm
Excellent post and I’m glad I visited when I did. My blog is large-mainly due to the images I use in a lot of my posts. WP-Super Cache, for some reason, does not like my blog at all. I’m going through a clean-up, theme redesign-so what is the best method- to use .htaccess and then enable WP-Cache, which will hopefully work, or, do it the other way around?
on April 3, 2009 at 10:30 pm
The caching used by .htaccess is mostly useful for visitors that visit on a regular basis. By setting a time limit of say a week, if they visit any number of times in that week, then they won’t redownload the content, provided they don’t delete their cache.
WP-Super Cache affects the download speed for all visitors as the PHP files were compiled into HTML files, so there is less overhead. I use both the .htaccess and WP-Super Cache together, as .htaccess affects all content and then sets a cache timeout for the HTML files created by the plugin. I set the WP-Super Cache plugin cache timeout to 600 seconds and the same for .htaccess cache timeout.
on June 24, 2009 at 7:27 am
Excellent article. I am planning to implement some of these suggestions on my site to improve my load speed. Thanks for these great suggestions.
on August 9, 2010 at 6:12 pm
This is something new to me.. I use Super cache plugin to perform this task…
Harsh Agrawal recently posted…Hostgator Maximum Discount and 1 month Free Hosting- August 2010
on August 9, 2010 at 9:41 pm
I used to use the Super Cache plugin, but have since switched to W3 Total Cache, which provides more options for caching and speeding up a blog.