Beginners question - how to avoid caching a specific section of a page


#1

On our website we’ve a cart / total displayed on every page of the site. When implementing Fastly I can either cache an entire page or ignore an entire page. I don’t appear to be able to tell the system to cache everything except what’s at the top of every page.

Am I correct in thinking that without some code changes to our site this is not possible? By code changes I mean the use of ESI (putting the basket code into some sort of include?)

If I’m incorrect about the above, what is the recommended solution for setting certain sections of a page as not-cacheable?

Thanks


#2

@emm you’re correct that single objects can’t be segmented for different caching statuses without some additional work. ESI is one way to achieve this, but using an AJAX call or some other method of isolating the content in a separate HTTP call would work as well. The general rule is: with the exception of ESI handling, Fastly doesn’t process web objects themselves – we just read headers.


#3

ESI comes with a few downsides as well:

  1. Currently Fastly does not support ESI with gzip. In some cases this is worth it, but it’s definitely something to keep in mind.
  2. ESI with a fragment that is not cached means that we don’t finish returning the page until after the origin responded. If you look at big websites like Facebook, they load the basic page first, and then update elements as they come in. This is a faster and more pleasant experience for most users. So using AJAX is better where it can be used.

However, there definitely are use cases where AJAX is not usable, and in that case you’ll have to make the gzip vs ESI tradeoff.


#4

Thanks, I’ll investigate getting ESI working first before trying the Ajax solution. Appreciate the responses. thanks again.