I ran into a particularly frustrating issue trying to integrate WordPress, W3 Total Cache, and CloudFront. Hopefully this can save someone else the same headache that I had.

The Symptoms

CSS changes were not showing even after clearing the minify and page caches for W3 Total Cache.

The Problem

After some troubleshooting I realized that CloudFront was serving up the cached version of the stylesheets. This surprised me because I assumed Total Cache would use different CSS file names when changes to the stylesheet are detected. Some further digging revealed that the expected behavior is for the name to change when changes are detected, but for some reason the same name was being generated for me over and over. I even went as far as to completely remove the plugin and the same filename was created upon reinstallation!

The solution

There are a couple different ways to do it, but here is what I think works best:

First, enable Prevent caching of objects after settings change in the Browser cache menu.

This should append a string onto the end of the css file. This should let CloudFront know to fetch the updated version. To make this work we also need to make sure the forward query strings is enabled for our CloudFront distribution.

Now if we clear all the caches, we should see our CSS changes! There is also an option in the top menu bar for Total Cache to update the media query string. That will also change the code appended to the end of the CSS file.

Once everything is working, it really flies. Especially when combined with something like varnish. My under-powered VPS is easily serving sub one second page loads.

Alec Thomas

MVSG Consulting