What is a Full Page Cache?
Full Page Caching (FPC) saves a copy of an entire page for a large group of users so that it can then load the saved copy of the page at a later date instead of building the page again. For instance, a product page may only have a few variations (logged out, logged in customer, logged in customer that receives discounts, etc.). Because hundreds of thousands of users (not to mention bots like Google) may see the same variation of a page, it makes sense to build the page once, then save it, and show everyone the saved version that’s right for their group. This makes the page load faster and reduces the overall load on the web server. Then, should something about the product change, like its description or availability, the cache can be cleared and rebuilt the next time someone (or a bot) tries to view it.
The Challenges with Implementing Full Page Cache
Caching an entire page can be problematic when the page contains user-specific content like a counter with the number of products in a customer’s cart, or a welcome message with the customer’s name. There are two main ways of solving for this challenge:
- Hole Punching - This method puts placeholders in the saved copy of the page. Then, when a customer visits the page, the application swaps out the placeholders for the customer’s unique information, like their name. This still affords major benefits over an uncached page, as large sections of the page like an expandable menu or a complex product configurator are pre-built. However, it does require the page to be updated with customer information before it can be sent to the user, increasing the Time to Interactive (TTI) over a cached page without hole punching.
- Backfilling with AJAX - With this method, unique customer content is added to the page after the page has started to load in the user’s browser. This decreases the TTI, but makes the process more visible to the user. The initial content that the user sees would need to be generic, followed a second or two later with updated content. A “Cart” link might become “Cart (11)” and “Welcome” might become “Welcome, Tyler.” This method is typically more difficult as the page must be designed to support both a generic and a non-generic state. However, it yields the lowest TTI and allows users to navigate the site as quickly as possible.
It's important to understand that Full Page Caching is not a substitute for a fast website. Many pages such a My Account, Cart, and Checkout are always going to be unique and shouldn’t be cached. A product listing page may have combinations of filters and sorting which are too numerous to feasibly pre-cache. Caches will also be cleared from time to time as content changes. This can, at least for a short time, pull back the curtain and show your users just how fast or slow your website really is.
Instead, Full Page Caching should be thought of as a way to increase a site’s scalability. With an FPC, you can show the same page to one hundred users or one million users, all while building the page only once. This improved scalability can allow you to reduce your hosting costs, and/or increase your site’s traffic spike tolerance.