W3 Total Cache vs WP Super Cache + Autoptimize

According to an internal presentation, Walmart saw up to a 1% increase in revenue for every 100ms they shaved off page load times.

Here at Jordan Solutions, we are never satisfied with good enough. We are constantly looking for new ways to solve the problems we face, so we can improve the experience for our clients and the services we offer to them.

From image formats to cache performance, minification to inlining, today we’re taking a look at our very own site’s performance; and asking ourselves – how can we do better?

We’ll also be comparing two different caching solutions for WordPress, W3 Total Cache and WP Super Cache+Autoptimize, performing benchmarks on our site to see just how well these solutions perform under pressure.

Caching and Optimization

Other than upgrading the hardware your website is running on, there are two main methods everybody should be using to improve site performance.

Caching

Dynamically generating content is slow. Painfully slow. On a WordPress site, almost everything you see is dynamically generated. From the style to the scripts, the header to the footer, all of the content is calculated dynamically whenever you make a request to the site.

If we were to get rid of dynamic content generation entirely, we would have to go back to the days of uploading static HTML/CSS/JS files to your server, manually, with no fancy website builders or templates. Nobody wants that.

So, we have to dynamically generate content. How are we going to improve the performance?

Caching. We can take advantage of the fact that, given the same request, dynamically generated content doesn’t often change after it’s been generated for the first time.

With caching, the server keeps track of requests and responses, allowing it to return a static response to (almost) any request it’s seen before without having to do any of the expensive calculations involved in dynamic content generation.

Caching content can be orders of magnitudes faster than simply dynamically generating all content all the time – so we take advantage of it at every possible level. From the page cache to the object cache, every request that can be cached is cached.

While caching is mostly done on the server, it can also be done in the browser. If content on the server hasn’t changed, there’s absolutely no reason to send it to the client if they already have a copy. This of course saves traffic, and thus load time.

Of course, cached results can expire. This means that the server needs to be able to tell when changes are made to a page, the database, or any other thing that is cached. Obviously, this all means that caching your content can get very complicated. Luckily, WordPress plugins like W3 Total Cache and WP Super Cache take care of all of this for us, allowing us to easily take advantage of the numerous benefits of caching.

Optimization

While caching is all about the big picture of requests and responses, optimization is all about the content that you are serving to the client. Fewer, smaller files means less traffic and faster load times.

There are a number of specific ways to achieve this. Here are a few.

Next-Gen Formats

We are all familiar with JPEG and PNG.

While newer image formats like AVIF and WebP are less well known, these formats easily outperform existing formats to deliver a significantly smaller image while retaining complete image quality and detail.

WordPress plugins like EWWW Image Optimizer allow you to automatically and transparently convert your images. With this plugin, you can deliver smaller images to the end user and significantly lower page load times without having to do any of the image conversion yourself.

Minifying

All of the HTML/CSS/JS content of a website can be reduced in size by removing redundant data like spaces, newlines, and comments, while leaving the page layout, design, and function itself unchanged for the end user.

Often the benefit minifying provides is underestimated – but there’s a serious amount of data to be saved by doing so. When it comes to page load time, every byte counts.

WordPress plugins like Autoptimize are able to minify automatically for you, allowing you to take full advantage of its benefits without having to build your own tools for minifying your code.

Inlining (Critical CSS)

Your browser downloads and renders every web page in steps. When it needs to retrieve a large amount of files from the server, this can get very slow. Inlining aims to solve this problem by significantly reducing the amount of files the browser needs to request from the server.

Below is a description of how your browser renders a page, first traditionally, and then with inlining.

Traditional

1. The HTML content of the main page is requested from the server.
2. This HTML content is parsed to retrieve locations of the external stylesheets and scripts.
3. The content of the stylesheets and scripts are requested (individually) from the server.
4. The stylesheets and scripts are parsed and used with the HTML content in order to render the page.

With Inlining

1. The HTML content of the main page is requested from the server.
2. The stylesheets and scripts embedded directly (inlined) in the HTML are parsed and used with the HTML content in order to render the page.

Conclusion

Inlining can have a huge impact in the performance of your website, especially on servers running HTTP/1.0 or HTTP/1.1. Without the browser having to make an enormous amount of requests, load times decrease dramatically. Inlining can also improve the effectiveness of your cache, allowing future page loads to be even faster.

WordPress plugins like Autoptimize are able to do inlining automatically for you.

Lazy Loading

If the client doesn’t need a particular file yet, the client shouldn’t have to have it to load the page. Lazy loading allows the user’s browser to load images and other content only when the user actually scrolls down to it.

WordPress plugins like Autoptimize make it easy to enable lazy loading for your images.

Choosing Your Solution

There are many different solutions available that allow you to easily configure all of the performance-boosting features mentioned above.

The two that we have used before are W3 Total Cache and WP Super Cache+Autoptimize.

These solutions both have their own quirks, but there is only one way to truly figure out which one we should use going forward.

We have to run a benchmark.

However, none of the existing tools for performing website benchmarks really did what we needed them to do.

So we built our own.

Our Website Analyzer

Our Website Analyzer, built on the industry standard and open-source website performance/SEO analysis tool Lighthouse, is configured to be particularly unforgiving. While other sites using similar tools may score your site higher, our tool is more true to real-world performance, allowing you to see your site for what it really is.

These results were taken by a device simulating the network speed and performance of a mid-range smartphone. This is what most people will be using to access your site, so while a few people may experience better load times, optimizing your site for the lower-end device ensures that everybody who visits your site has a good experience.

What you see below is the result of running our Website Analyzer, an interactive report with detailed performance characteristics and suggestions about how to improve them.

W3 Total Cache

Our results with our old solution.

WP Super Cache+Autoptimize

Our results after switching to the new solution.

Conclusion

These benchmarks prove that the performance improvement when switching from W3 Total Cache to WP Super Cache+Autoptimize was dramatic.

Perhaps we had configured W3 Total Cache incorrectly, but either way the new solution has been significantly more pleasant to use and has blown us away with its results.

We will be deploying this solution across our existing network (and for all of our new clients), in order to further speed up page loads.

There’s a lot more work that needs to be done before we’re happy with our own site, but it’s a constant process. Holding ourselves up to a high standard (and bringing our clients up with us) is just what we do.

We are constantly trying to improve how we run our business. If you have any comments or suggestions, or are interested in how we can help improve your business, please contact us using the form below.