Speed up your website 4: Caching – best practices, mistakes and WordPress plugins

In the previous 2 articles we discussed the importance of optimizing website codes & media files. Now that everything’s looking good for your website, we should look forward to further improving its performance… Here’s how to Speed up your website 4: Caching – best practices, mistakes and WordPress plugins.

Table of content:

1. General information about caching
2. Server caching vs browser caching
3. How to properly cache – The best practices for using caching
4. Best caching plugins for WordPress
5. The ShortestCut – Sum up in a paragraph

The Speed up your website articles:

1. General tips, mistakes, elements & optimization
2. Optimize your codes HTML, CSS & JS
3. Optimize website content – Images, videos & fonts
4. Hosting (The absolute best & fastest WordPress hosting ever)

General information about caching

It’s rather easy to understand what caching is and how it works. To make it easier to comprehend, let me explain it in simpler terms, then I will proceed on to details and complexities.

Everytime you enter a website on your browser, the browser goes to the servers where the website is hosted and starts rendering the codes then downloading the files. Since changes are rarely made, then there’s no need to download every file and code every single time, right? Right. So, instead, the browser/server stores the codes and files so that it won’t be downloaded every time you enter the same website. This obviously saves time. I hope this makes sense.

How do you make the browser cache? How do you make the CDN cache? What are the best practices for caching? All questions have answers, might not always be satisfying but will surely always be one.

In short, caching is the process of storing copies of files in a cache, or temporary storage location, so that they can be accessed more quickly. Source.

Server side caching (CDN) vs browser caching

Browser caching is when the files & codes are stored locally in the user’s browser. This is when you delete your browsing history and cache! Isn’t it right? You dirty bastards…

Server caching is when the virtual server (CDN), like Cloudflare, stores your files & codes on the closest servers to the end user. So, instead of requesting access to your website from the original server, which might be far far away, the website’s cached version is served through the closest available servers.

Here’s how you can easily activate Cloudflare on your website.

How to properly cache – The best practices for using caching

If you’re using WordPress you better use caching with a plugin, although, you can still use the methods I’m suggesting here, but hey, the simpler the better.

## EXPIRES CACHING ##
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
## EXPIRES CACHING ##

Caching on Apache servers

Go to your .htaccess file and add the below code. You will find the explanation after the code.

This adds caching by expiry date. Add the expiry of each element based on how often you change them. Don’t use expiry more than one year.

Here’s a more detailed article on caching from Google itself.

Caching with NGINX and NGINX Plus

Here’s a piece of code with which you can activate simple caching on NGINX servers.

Here’s a detailed article on each and every case of caching that might concern you directly on NGINX’s website.

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;
    }
}

The best practices for using caching

• Make sure to add your expiry timings properly, depending on how often you change certain types of content.
• Don’t use an expiry more than a year.
• Purge all cache after making major changes.
• Add exception rules whenever necessary.
• Always test your website before & after caching is activated.

Best caching plugins for WordPress

Basically you have to choose between the following 3 plugins:

1. LightSpeed Cache – 2+ Million active installations
2. W3 Total Cache – 1+ Million active installations
3. Autoptimize – 1+ Million active installations

I personally haven’t tested LightSpeed Cache myself yet, but from the reviews and active installations I can guess it’s super great. In fact I saw online that it’s faster than W3 Total Cache and has way more options especially for e-commerce websites and logged-in users.

As a second option you can choose between W3 Total Cache and Autoptimize. Autoptimize has a better design and is more user friendly, while W3 Total Cache is a heavier caching plugin, and can speed up your website more.

The ShortestCut – Sum up in a paragraph

Caching is the process of storing files & codes that are not changed so often either in the browser or in the CDN (like Cloudflare) or both. So that the browser doesn’t have to download all the files every single time a visitor comes to your website.

Caching on Apache and NGINX servers are different.

How to cache on Apache servers

How to cache on NGINX servers

You can activate caching on WordPress with plugins such as LightSpeed Cache.

Make sure to exclude problematic elements from being cached, purge all cache after performing major changes and to test your website before & after caching and major changes.