In-Depth: Caches & Caching Explained

Caching is a subject that needs a whole course to itself. We’re going to discuss WooCommerce caching strategies that work for us in our stores and our client stores.

What is a cached file?

A cached file is a file that was loaded without the server regenerating all of it’s components. A WordPress page may typically involve hundreds of requests to the database (at a few milliseconds each), 10 or more templates, and hundreds of variable code paths before the final page is ready to send to the browser that requested the page.

Once the browser receives and loads the page, it’ll request all the images and scripts required to display the page correctly (6 at a time per domain!), requiring more round-trips and time waiting for the server.

This is where your standard hosting and base install will come unstuck — you install your site, set up your products and go live, and things are running fine! Soon you’re getting a bit of traffic, and the site slows down a bit at peak periods during the day. Sales keep increasing, and the site gets slower and slower – so how do we fix it?

How does the caching work?

It turns out, most of your pages don’t actually change from one customer to the next. A search for ‘Logitech Mouse’ will return the same results from one customer to the next, and the ‘Logitech Mouse’ product page will be the same for any customer who visits.

The second time around, we don’t have to ask the server how to render that page, or ask the database what the product description is. When the first request comes in for ‘Logitech Mouse’ product page, the page will be rendered, saved for the next visitor, and sent to the browser. Multiply this by thousands of products and thousands of visitors a day, and you are saving bucketloads of unnecessary server processing (which means saving $$$!).

WPEngine has WooCommerce caching (via Varnish/Nginx) and optimally configured out of the box. We objectively recommend them — their aggressive caching is one of the reasons. You can read more about why we use WPEngine for WooCommerce installations here.

There’s a few careful ifs and buts involved, which usually boils down to “don’t use the cache when a user is signed in”. If your user is signed in to your site, they’ll never receive a cached response from the WPEngine server environment.

Bits and pieces

Serving content from a CDN is also important when you’re on a speed boost mission.

A CDN is a content delivery network. This means your host is automatically hosting your images and scripts on a separate server (which should be geographically closer to your customer than the host).

The benefits to a CDN are:

  • Geographically closer, should get served slightly quicker
  • Longer cache period for these resources than regular pages
  • Cookies are not passed back and forth, saving time
  • Remember above, where I said the browser will only load 6 resources per domain? The CDN will be on another domain (so now we are loading 12 resources in parallel, saving time!)

If you follow the strategy we’ve suggested, both CloudFlare and WPEngine offer integrated automatic CDN.

Joining and minifying your scripts can save significant load time.

Fairly often a WooCommerce site will have ~15 enabled plugins, which all load a javascript file and maybe a CSS file. Remember our ‘6 at a time’ above? They allll have to load. Hopefully from a cache.

Minifying and joining your javascript and CSS files can cut down your server requests from hundreds to less than 10, which in the real world might cut your page load time from 4-5 seconds to 1 second. We use BWP-Minify for this, as an easy plug and play solution.

Leave a Reply

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