Leveraging Browser Caching in WordPress

WordPress

Numerous studies over the years have clearly shown that page load speed is important to web users. If they have to wait more than a second or two for a page to render, they are less likely to be interested in spending a lot of time on that website. Anything more than 3 or 4 seconds and they may not wait long enough for a page to load. You can speed up rendering by taking advantage of what is known as browser caching.

Browser caching involves generating code that tells the standard web browser how long to store the various elements of your website in the cache. Every modern browser supports caching, so it is not a problem to implement.

For the record, browser caching is a universal trick used by developers of all kinds of sites. We are applying it to the world of WordPress because, by design, WordPress is primarily a blog platform – and blogs are supposed to be updated regularly. The way WordPress is designed means it does not natively handle browser caching very well.

Browser Caching Is Easy: How It’s Done

Utilizing browser caching involves modifying the .htaccess file on your server. Don’t worry; it’s not as difficult and dangerous as you might think. In fact, it is rather easy and relatively risk-free. Start by finding the file through cPanel or whatever interface your hosting company offers. The file is normally located in your root directory.

Once you find the file, download a copy as a backup. You can then edit the file on your hard drive before uploading a new copy or, if your control panel allows, edit it right there on your server. All you need do is add the appropriate code to tell browsers how long to cache the various elements of your site. Below are two examples; one uses seconds as the timing mechanism while the other uses months and years.

Example #1

<ifmodule mod_expires.c>

ExpiresActive On

ExpiresByType text/html “access plus 7200 seconds”

ExpiresByType image/gif “access plus 864000 seconds”

ExpiresByType image/jpg “access plus 864000 seconds”

ExpiresByType image/png “access plus 864000 seconds”

ExpiresByType text/css “access plus 864000 seconds”

ExpiresByType text/javascript “access plus 864000 seconds”

ExpiresByType application/javascript “access plus 864000 seconds”

</ifmodule>

Example #2

## EXPIRES CACHING ##

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/jpg “access 1 year”

ExpiresByType image/jpeg “access 1 year”

ExpiresByType image/gif “access 1 year”

ExpiresByType image/png “access 1 year”

ExpiresByType text/css “access 1 month”

ExpiresByType text/html “access 1 month”

ExpiresByType application/pdf “access 1 month”

ExpiresByType text/x-javascript “access 1 month”

ExpiresByType application/x-shockwave-flash “access 1 month”

ExpiresByType image/x-icon “access 1 year”

ExpiresDefault “access 1 month”

</IfModule>

## EXPIRES CACHING ##

As you can see, both examples require you to have at least a basic understanding of the kinds of elements your website offers. As long as you know that, you should be able to determine which elements change infrequently enough to warrant a longer caching period. For example, a graphic you know will not change over the next 12 months can be cached for one year. Text that is changed every couple of days should have a much shorter caching period.

Taking advantage of browser caching is one way to speed up your WordPress site. You will also find it to be more search engine friendly as a result.

Share it!Share on FacebookTweet about this on TwitterShare on Google+Email this to someone

Our Recommended Wordpress Web Hosting Provider

WordPress

WHC.CA
Get a 50% Discount by using our link.

WHC.ca

Reliable host, with excellent customer service and an easy one-click Wordpress installation. Our recommendation to host a Wordpress blog.

Leave a Reply

Your email address will not be published. Required fields are marked *