WordPress Caching – WPQuickies

In this lunchtime #WPQuickies, I talk about caching methods and plugins to speed up your WordPress website.

WordPress Caching – WPQuickies webinar

Why Bother With Caching?

It’s all about speed!

Speed is a huge ranking signal in the Google results algorithm.

Google will rank faster sites higher in the SERPs and everyone wants to be at the top of page one.

So if your site is faster than your competitors you have a big SEO advantage over them.

How WordPress Renders A Web Page

Let’s start with the basics – a web browser only understands HTML, CSS and JavaScript.

WordPress is a PHP app with the majority of content in a database so there’s a bit of a process to go through before HTML data can be sent to the browser – known as dynamic response or dynamic data.

how wordpress renders a web page

The dynamic part is where the server has to run the WordPress PHP app which then runs other PHP files which collate JS, CSS and media files as well as asking the database for content.

All this data is used to dynamically create an HTML page which the server eventually sends to the web browser. PHEW!

That whole box with the server, WordPress and the database can take a lot of time depending on how much data is to be collated – think about PHP API calls, database requests and third-party external API calls.

If only there was a way to store those dynamically created HTML pages and serve them straight back out to the browser the next time somebody requests the same web page.

Welcome to the world of caching.

A cache is a bit of content that has already been rendered (the bit in the server box) and stored, ready to send out to a browser request.  

This can shave seconds off responses to make your a lot faster.

Here’s a link to WP Rocket’s caching explained in plain English article.

Types Of Caching

There are generally three types of caching that will help speed up a website.

Site Cache

A site cache or page cache stores website data the first time a web page is loaded. Each time a user returns to your website, saved elements are quickly accessed and displayed to visitors.

This is a type of client-side caching.
As a website owner, the only say you have is how long content remains in the cache.

Pages with content that don’t change much, static pages, can be set in the cache with a long expiry.

Pages with content that changes often, think about checkout pages and client dashboard, can be set in the cache with a short expiry or bypassed altogether so they are rendered again server-side to pick up the changed data.

If your site has a lot of static content then it could benefit from site caching.  In this case, you would look to use a plugin – I’ll cover some of those later.

Browser Cache

Browser caching is a type of site caching built into the end-user’s web browser. 

Website elements are stored by the browser on your visitor’s computer and grouped with other files associated with your content. 

A browser cache can contain HTML pages, CSS stylesheets, images, and other multimedia content.

There is an overlap with site caching and browser caching as they are both client-side caching systems.

All browsers have a caching system that is fully automated without the need for user intervention.

Most WordPress caching plugins will also implement browser caching but if you want to do it manually you will need access to your website files and for nginx users the server configuration files.

For Apache web servers, you will need to edit the .htaccess file in your site’s root public_html folder.

For Nginx web server, here is a Digital Ocean article link on how to implement browser caching rules in server blocks.

<IfModule mod_expires.c>
ExpiresActive On

# Images
ExpiresByType image/jpeg "access plus 6 months"
ExpiresByType image/gif "access plus 6 months"
ExpiresByType image/png "access plus 6 months"
ExpiresByType image/webp "access plus 6 months"
ExpiresByType image/svg+xml "access plus 6 months"
ExpiresByType image/x-icon "access plus 6 months"

# Video
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"

# CSS, JavaScript
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
</IfModule>

In the example above you can see we’re telling the browser cache to fetch new images after 6 months, videos after 1 year and css and javascript files after 1 month, otherwise dig it out of the cache if it exists there.

Server Cache

Server caching is an umbrella term which covers all the different types of systems that servers use to cache data.

These systems could include a content delivery network (CDN) like Cloudflare, object caching like Memcache and opcode caching which is the storing of pre-compiled PHP code.

Using a server cache for temporary storage is called server-side caching.  

Cloudflare CDN is probably the only system you will be able to implement by yourself as an end-user.  cPanel and Plesk dashboards have an easy interface to set up your website with Cloudflare.

Otherwise, unless you maintain your own server, you will be unable to implement the other server-side caching, that will be in the remit of your web hosting provider.

Best WordPress Caching Plugins

Now let’s look at some popular WordPress caching plugins which implement site and browser caching.

WP Rocket

WP Rocket Price: $49 USD per site per year with other pricing options.

WP Rocket

WP Rocket is the most popular premium cache plugin with over 1.3 million websites using it.

It’s easy configuration makes this plugin so popular.

As soon as you install and activate the plugin the majority of your site will benefit from caching straight away.

WP Rocket also implements its own faster lazy loading system, separate from the WordPress core lazy loading and minifies JavaScript and CSS files.

It also comes with lots of hooks and filters that developers and theme designers can use to change the caching on particular pages and page templates such as client dashboards, profiles, checkouts and carts etc.

WP Optimise

WP Optimise is a freemium caching plugin which means the core plugin is free with a paid premium option starting at $39 USD per site per year with other pricing options.

WPOptimise

This plugin comes from the same developers of the Updraft backup plugin.

WP-Optimize speeds up your WordPress site by cleaning your database, compressing your large images, and caching your site.

The premium version has additional features such as multisite support, lazy loading, multilingual and multi-currency caching and a whole lot more.  Check out their website for a complete list of paid features.

SG Optimizer

SG Optimizer is a free caching plugin by SiteGround that’s available to download from WordPress.org. 

https://wordpress.org/plugins/sg-cachepress/

It’s built to connect your WordPress site with the SiteGround performance services. 

Please note that this plugin will work only if you’ve hosted your website with SiteGround and will not work with any other hosts.

I only include it here because Siteground is such a large WordPress website hosting provider and the plugin is very good at speeding up SG websites.

WP Super Cache

WP Super Cache is a free plugin from Automattic, the organisation behind the WordPress open source project and it has over 2 million active installations.

https://wordpress.org/plugins/wp-super-cache/

This plugin is best used with sites that are more static than dynamic so blogs and business websites will benefit more than eCommerce and membership dynamic sites.

The interface is pretty simple and has three modes, simple, expert and advanced allowing you to tweak the settings depending on your skill level.

W3 Total Cache

The last plugin I’d like to talk about today is W3 Total Cache.

https://wordpress.org/plugins/w3-total-cache/

This is another free plugin you can get from the WordPress.org plugin repository and it has over 1 million active installations.

W3 Total Cache is one of the top three most popular caching plugins for WordPress. It improves your server performance by caching every aspect of your site and also offers content delivery network integrations.

The developers claim that the plugin can offer up to 80% bandwidth savings via minification, the process of reducing the size of your HTML, CSS, JavaScript, and feeds without having a negative impact.

The interface is not simple but does allow you to fine control the caching at almost every level.

If you run nginx as your web server, W3 Total Cache is a great option with the plugin including settings to include in your Nginx server block to allow the plugin to implement caching at the server level.

Probably not the best plugin to start with if your new to site caching.

Conclusion

There are of course a lot more caching plugins out there but these are in my opinion the best of the bunch.

Which one should you choose? 

Well that depends on your level of skill with implementing caching techniques and your budget, there is no “one size fits all”.

If you are on Siteground then choose the SG Optimizer plugin.

If you don’t want to pay money for a premium plugin WP Super Cache or W3 Total Cache would be your best options to try out.

Overall I would recommend WP Rocket as the top caching plugin overall.

#WPQuickies

Join me every Thursday at 1 pm Sydney time for some more WPQuickies – WordPress tips and tricks in thirty minutes or less.

Broadcasting live on YouTube and Facebook.

Suggest a #WPQuickies Topic

If you have an WordPress topic you’d like to see explained in 30 mins or under, fill out the form below.

https://forms.gle/mMWCNd3L2cyDFBA57

Was this article helpful?
YesNo

Keep In Touch

Wil

Wil is a dad, consultant, developer, conference organiser, speaker and business mentor. He co-organizes the WordPress Sydney meetup group and has been on the organising committee for WordCamp Sydney since 2014. He speaks at many special events and contributes to the WordPress open source project. His likes are chillies, craft beer and electrogravitics.