Understanding cache flow when using PageSpeed and Varnish

On MageStack, when you change a file, it changes immediately. There are no disk caches, no PHP caches or file caches of any kind. If you create, or modify a file, the change is reflected immediately. So if you change a CSS file, and view that file in via SSH/FTP, you'll see the change straight away.

Traffic flow

However, with CSS, JS and Images - when using PageSpeed and Varnish, you are subject to two additional caching layers. Here's how it looks for a the first (uncached) request,

Customer > Varnish > PageSpeed > Nginx
                                   | (un-cached)
Customer < Varnish < PageSpeed < Nginx

When Varnish is disabled and PageSpeed is enabled (and empty)

When a request comes in, PageSpeed will dynamically look at the HTML generated by your Magento store, and take steps to combine CSS/JS and re-compress images. It will modify the HTML source on-the-fly, save a cached copy of the new combined CSS/JS and images, then serve the request back to the user.

At this point, future customer requests will do this,

Customer > Varnish > PageSpeed
                         | (cached)
Customer < Varnish < PageSpeed

So even if you modify any CSS/JS/image, until you purge PageCache, the response will be served from PageCache, and not actually hit Nginx itself.

When Varnish is enabled (and empty) and PageSpeed is enabled (and empty)

As above, when a request comes in, if Varnish is empty, the request gets passed to PageSpeed, if that is empty, the request gets passed to Nginx, like so,

Customer > Varnish > PageSpeed > Nginx
                                   | (un-cached)
Customer < Varnish < PageSpeed < Nginx

On the next request, PageSpeed (as above) will have cached the request, and will serve the response from the cache, like so,

Customer > Varnish > PageSpeed
                         | (cached)
Customer < Varnish < PageSpeed

Then on all subsequent next responses, Varnish will also have cached the data, bypassing PageSpeed altogether, like so,

Customer > Varnish
               | (cached)
Customer < Varnish

At this point, if you modify any CSS/JS/image, until you purge both Varnish and PageCache, the response will be served from Varnish or PageCache, and not actually hit Nginx itself.

Purging needs to be done in the correct order though, because if you do it in the wrong order (ie. purge Varnish before PageSpeed), then Varnish will merely access the (now out of date) cache in PageSpeed and cache it again.

So when using both PageSpeed and Varnish. To make changes effective, you must purge PageSpeed first, then purge Varnish second.

Leveraging debug headers will tell you very clearly if the content is actually being cached by Varnish, read more about debug headers.