How to Set Up Browser Caching with WordPress

In this post, we will learn How to Set Up Browser Caching with WordPress.

As all web dev.’s should, they often run their sites through multiple online website optimization tools.  I commonly test with these: Google PageSpeed Insights and GTmetrix. This will also now improve your PageRank with some, as they are using website performance as a metric. (Slow sites will not be well listed in search).

Often, those sites suggest the site will perform best with browser caching enabled. Browser caching from an Apache based WordPress install is much easier to achieve than ‘some’ would have you believe.

Here is what one of these note:

Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network.”

First, how this works. All modern browsers can ‘cache’ website content. While WordPress is dynamic, many of the resources served by your server are static. Every time a visitor returns to your site, the server can serve each of these resources again or your browser can load the cached content. Without browser caching set, your site will not perform as well as it could. Setting up browser caching well will also reduce the overall server bandwidth, especially if a high percentage of visitors are return visitors.

Notice I wrote “return visitors”. A browser cannot cache site content until it is visited by a user.  A user can also clear their browser cache or set it to not cache at all. Most do not do so, so let’s take advantage of browser caching and help our servers send fewer resources.

The following is added to the very top of .htaccess (of root):

<IfModule mod_expires.c>
 ExpiresActive on
 ExpiresDefault "access plus 0 seconds"
 ExpiresByType application/javascript "access plus 1 year"
 ExpiresByType image/x-ico "access plus 1 year"
 ExpiresByType image/jpg "access plus 14 days"
 ExpiresByType image/jpeg "access plus 14 days"
 ExpiresByType image/gif "access plus 14 days"
 ExpiresByType image/png "access plus 14 days"
 ExpiresByType text/css "access plus 14 days"
 ExpiresByType text/html "access plus 14 days"

Above edited 2-2014 to change ExpiresDefault to 0 seconds. We cover all types used by the site in ExpiresByType and need cookies not to be cached.

The ExpiresActive‘s ExpiresByType Directive sets the expiry date per each served resource being sent of the file types included.

The ExpiresDefault Directive sets the expiry date per each served resource being sent of the file types not specified with ExpiresByType.

You may also have a particular need to cache only some content or to force content expiration after a very short time. If so, see the link in the previous paragraph for more detailed information.

There are many other techniques used that can speed up your site, deliver a better user experience to your site visitors, and keep your bandwidth usage lower. If you need assistance with any of these topics, please use the Contact Form.

Note: If you use above, make sure to always refresh your browser when working on your site.

Important note: Update WP Super Cache and W3TC Immediately – Remote Code Execution Vulnerability Disclosed