Speed Up Your Online Store: 6 Techniques For Efficient Caching

For e-commerce and online retail, revenue and web performance are inextricably linked. Delays, latency and downtime reduce conversions: Google estimates that every second of extra page load time over two seconds reduces conversions by 7%. It’s why many major brands rely on Varnish software to power their online grocery, clothing and cosmetics stores. By caching and accelerating HTTP content, Varnish keeps e-commerce operations fast and available, maximizing revenue with minimal complexity. An effective caching strategy is essential to meet customer expectations and achieve revenue goals, but it’s not just about implementing a caching solution: the solution should be as efficient as possible. This means maximizing cache hits while keeping cached objects up to date and minimizing cache clearing overheads.

This efficiency is often unattainable using an off-the-shelf CDN. Without the flexibility to adjust caching policies and dial in requirements specific to a single online store, caching is imperfect. Not enough content is cached, and clearing outdated content from the cache is often difficult. It can also be difficult to cache the full range of HTTP responses involved in online storefronts: not just web content, CSS and images, but GraphQL responses, APIs and JSON data.

How to Make Your Cache More Efficient

The goal here is to implement caching within existing workflows, without expending a lot of effort, messing up backend configurations or modifying any HTML. Varnish Enterprise deploys into existing architectures at the application layer and offloads traffic from backend services to lower webpage latency and reduce cloud egress fees, but with built-in edge compute it also offloads processing too. Let’s take a look at some Varnish tools for efficiently caching and accelerating the delivery of online stores.

1. Low Latency Dynamic Page Assembly

E-commerce sites often use Edge Side Includes (ESI) to compose web pages that need dynamic presentation of personalized content from different page fragments. It’s what enables companies to tailor highly personalized experiences for end-users in the form of targeted, curated and relevant content. While ESI boosts the flexibility of dynamic content and drives user conversions, it does come with the cost of added latency.

Enter parallel ESI, Varnish’s solution to this latency challenge. Parallel ESI seeks out and fetches required web page fragments simultaneously. Because these fetches are done in parallel, responsiveness in ESI-heavy pages is significantly improved. Users see up to 75% faster page assembly straightaway, improving user experience with web pages displaying dynamic content, without backend code changes!

2. Speed Up Browser-Based Page Assembly

Many websites are assembled in-browser using JavaScript, content, templates and JSON data. Browser-based page assembly requires multiple round trips to servers and can be slow on mobile. 

Edgestash moves this process into Varnish, composing a dynamic response in a fraction of the time. Edgestash is a realtime templating engine built inside Varnish Enterprise that allows for JSON data to be composed into a response using Mustache syntax, e.g. . Each response can be assigned its own JSON object for truly dynamic responses. JSON can either be fetched from a backend or generated via VCL and any number of JSONs can be assigned to a template. An Edgestash template is fetched and compiled into response-optimized byte code and stored into cache. This code is executed on delivery, efficiently streaming the response using a zero-parse, zero-copy algorithm, the overall result being a page-load process that takes just milliseconds, which can be a 100x improvement over JavaScript-based frameworks.

3. Cache Personalized Content

Personalized content, such as a session token that allows you to add an item to a shopping cart, is often considered impossible to cache. The solution to this problem is XBody. When combined with Edgestash, XBody allows you to cache and accelerate personalized content like user information, session tokens and dynamic CSRF protections.

XBody takes the content and deconstructs it into JSON data and a Mustache template. Edgestash then recombines the JSON data and Mustache template back into the original response. The advantage here is that both components are reusable across requests, so we can personalized pages from cache and achieve much higher cache hit rates!

4. Cache Invalidation and Revalidation

Cache efficiency is about keeping data in cache as long as it’s needed, but not too long, and without cache clearing processes negatively impacting performance. Cache invalidation is a method for telling the cache that it’s time to fetch the latest version from the origin. 

With Varnish, cache invalidation is done using keys or tags. In Varnish Cache this is Xkey VMOD, while in Varnish Enterprise it’s Ykey. These VMODs let you attach tags to objects when you insert them into the cache. This is useful when you want to invalidate all assets in the cache that are related to a specific item, for example if an item in the online store has a new price or image. Keys make it easy to invalidate all items each time an update happens. Ykey is more flexible than other purges in Varnish because it doesn't depend on the URL to identify objects, and it’s a lot faster than banning.

Another time data changes regularly and needs a solid cache invalidation strategy is GraphQL.

5. Caching GraphQL and API Responses

GraphQL is a query language that aims to make APIs fast and flexible, and is a common feature in the web stack of e-commerce platforms, fetching real-time price information and stock levels. VMOD Ykey comes in useful here too, enabling instant invalidation of all GraphQL query responses assigned a given key. GraphQL queries are often in the critical request chain of a web page, and a slow GraphQL query delays loading the rest of the page, so it’s vital they get answered quickly. Varnish can cache POST requests and serve responses from cache with very low latency. Using the VMODs std and Xbody, Varnish can make the POST request body part of the cache signature of each request, ensuring each unique query is cached separately. This also means that whenever Varnish receives multiple identical GraphQL queries simultaneously, and does not already have the response in cache, the requests will be coalesced and only a single request makes it to origin.

6. Image compression

Varnish’s Image VMOD compresses JPEGs and PNGs into WebP format and stores a compressed copy in the cache, reducing file size while maintaining high quality. The value in Image VMOD comes from being able to deliver images faster from the edge, save on data costs and speed up a user’s web experience by avoiding use of unnecessarily large images. The average WebP file size is 25%-34% smaller compared to a JPEG; a significant saving in load time, bandwidth and client data for image-heavy websites. With VCL, it’s also possible to set compression policy rules per hostname, folder, user, and more.

Each feature, strategy and technique described here reduces page load times for your users, and taken together they make a truly significant improvement in user experience, conversion rate, even search ranking. Nikon [PDF], for example, saw a 60% improvement in organic traffic in the first three months! For more details on how Varnish Enterprise can power your e-commerce platform to success, please do get in touch with our experts.