Introduction
Ever wonder how when you revisit a site, it loads faster than the first time you visited it? That is actually made possible by a process called caching What this process does is that it keeps requested resources and stores them somewhere, so that once the same resources are requested, they don’t have to be retrieved (which can be resource intensive) again. This allows for a smoother and overall, better experience.
Caching is mainly done through a web browser, and when we say that we want to leverage browser caching for WordPress, what we mean is that we want to take advantage of the caching capabilities of the web browser that is currently accessing our WordPress site.
In this article, we will be going over how to do that.
Leverage the Cache with .htaccess
Using the mod_expires.c module to Extend Caching Expiration
To leverage browser caching without using a plugin, this is the way to go But first, we have to create/modify the .htaccess file on the root directory. If you don’t know how to do that, follow our article on How To Edit the .htaccess File . Once the file has been created, just add the following snippet:
# BEGIN Expire headers
<IfModule mod_expires.c>
# Turn on the module.
ExpiresActive on
# Set the default expiry times.
ExpiresDefault "access plus 2 days"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/svg+xml "access 1 month"
ExpiresByType text/html "access plus 600 seconds"
# you can add more here
</IfModule>
# END Expire headers
Code language: PHP (php)
To add more items that you need to be cached, modify the following snippet with the appropriate values and place the line within the mod_expires.c
blog:
ExpiresByType type/encoding "base[plus num type] [num type] ..."
Code language: JavaScript (javascript)
Below is an example of a valid line
ExpiresByType img/gif "access plus 1 month "
Code language: JavaScript (javascript)
Which will result in all GIFs being cached for a month after they have been accessed.
Add Cache-Control Headers
Using the mod_headers.c module to Extend Caching Expiration
usually, the previous method is enough, but if you need more control in handling caching, you can use the mod_headers.c library. This library provides further configuration for file types and even whole directories. This is usually placed inside mod_headers.c.
IfModule mod_expires.c>
<IfModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header append Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header append Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header append Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header append Cache-Control "private, must-revalidate"
</filesMatch>
</IfModule>
</IfModule>
Code language: HTML, XML (xml)
In the example above, we are telling the configuring the response to cache resources in a location for each specified filetype that is matched (this is hinted by the name). Within the tags we specify caching settings. For example in:
<filesMatch "\.(css)$">
Header append Cache-Control "public"
</filesMatch>
Code language: HTML, XML (xml)
We are telling the browser requesting to store CSS files in a public cache (which is a caching resource shared by a lot of people). The public cache can be for instance, a dedicated server. But we can also tell the content to be stored in a browser by using the ff:
Header append Cache-Control "public"
Code language: JavaScript (javascript)
Some Words on htaccesss Cache Configuration
htaccess files only work on Apache Servers so if you’re using XAMPP/LAMP you should be fine. Major hosting providers like BlueHost and SiteGround use Apache servers too so no need to worry there.
Caching with Nginx
Not all WordPress sites are hosted on Apache servers. A lot of them actually are hosted on nginx.
To leverage caching on Nginx, first access the file on your terminal then open the nginx configuration:
sudo vi /etc/nginx/nginx.conf
This will open the nginx configuration for your server. Once it is open, copy paste enter the following lines and modify it accordingly:
proxy_cache_path /path/to/cache levels=1:2 keys_zone=my_cache:10m max_size=10g
inactive=60m use_temp_path=off;
server {
# ...
location / {
proxy_cache my_cache;
proxy_pass http://my_upstream;
}
}
Code language: PHP (php)
For the proxy_cache_path
directive these are the what the values mean:
/path/to/cache/
is the path to the cache in the machine hosting the WordPress sitelevels
sets up a multi-level directory so that the cached files are stored in more than one directory
keys_zone
sets up a shared memory zone for storing the cache keys and metadata. By changing the number after the:
we can increase the number of cache keys storedmax_size
sets the upper limit of the cacheinactive
tells how long an item can stay in the cache without being activated.use_temp_path
tells the server whether the files in the cache should be stored in a temporary folder
Within the server
block, we then define which path of the site should caching be done. We also have to define a location
and specify which URL pattern caching should be done in. In the example we use /
which is the root directory. So this would cache all resources in the site which are accessed. Within that block we use the proxy_cache
to enable caching in the location. The value beside it is the value specified in key_zone
. We then define which proxy server we use with the proxy_pass
directory.
That’s all you need to know about basic configuration. If you need more details go here.
Using the W3 Total Cache Plugin
If you use a caching plugin, things get much easier. You can use the W3 Total Cache plugin which works automatically when installed and activated on your WordPress site. If you don’t know how to install a plugin, check out our tutorial on How to Install WordPress Plugins. The plugin can be found through the admin dashboard.
The great thing about this plugin is that it works and takes care of the caching for you the moment it is installed. Browser caching, which we’re concerned with is enabled by default.
It caches CSS & JS
HTML & XML
Media Files
And it even allows you to modify security headers
Be sure to checkout the configuration page to configure the plugin to your needs
Conclusion
We’ve come to the end of this tutorial. Now you know how to setup caching in WordPress either manually or using a plugin. Now, use what you’ve learned to make your site render quicker, giving your site’s visitors a greater browsing experience.