The two main caching systems are Cloudflare and WP Rocket. Cloudflare is the first layer of caching, and is what most customers will get when they visit any public pages. There are also some custom caching elements to make things even faster.
Logged-in users are excluded from the WP Rocket cache, as well as specific URLs or URL patterns. These include product pages and anything that can vary based on the user’s location or identity. The no-cache headers sent by WP-Rocket should be enough to tell Cloudflare to not cache those pages, but just in case we have duplicates the cache exclusions in the Cloudflare settings as well.
Custom Cache Elements
There are two elements that are common two most/all public pages that require a relatively large amount of processing to generate:
- Top menu: This uses UberMenu, and it contains numerous queries to generate the data. The generated HTML is usually over 200KB.
- Part number javascript for main search: To enable the auto-complete part number search in the top search bar, we load all of the product number data and store it as a Javascript hash.
Both the time it takes to generate those elements and the amount of HTML they contain are major factors in page load speed. Caching these elements greatly increases the speed on pages that are not cached overall.
The full part number list is around 120KB, so the size is reduced by half on that element. Basically there’s a ton of repeated text in that section, so we’re replacing it with placeholder tokens. The javascript that parses that output to create the part number search list will detect one of the tokens and do a replace on the content before appending to the DOM. So it adds a small amount of overhead to the browser since it has to parse the string replacements, but most people won’t even see that element until they specifically perform a part number search.
The caching functions for each element have their own timeouts set in the code. As of now, both are set to 4 hours. After 4 hours they will recreate themselves upon the next page request. The caches can be manually cleared by simply deleting the cache files in public_html/wp-content/cache: uber-menu.html, part-number-list.html, or part-number-list-deflated.html. Only the “deflated” version of the part number cache file will be present if the deflation option has been enabled. The relevant files that contains caching functions are public_html/wp-content/themes/biopac/header.php and public_html/wp-content/themes/biopac/library/bones.php (get_part_number_list()).
No-Cache Pages
There are a few ways to make pages not cache:
- Add the URL to the exclusions list in WP Rocket settings.
- Select the “Never cache this page” option in the page editor.
- In the page’s code, use
define('DONOTCACHEPAGE', true);. This should be respected by WP Rocket and other caching plugins. - Various settings in WP Rocket, such as not caching pages for logged-in users.
No-Cache Elements on Cached Pages
Even when viewing a cached page there are still elements loaded via AJAX that are not cached. These generally include the Local Sales widget in the footer and product prices. The URLs for these elements are included in the no-cache rules. A description of the how the ajax pricing works can be found on the AJAX Pricing page.
The cart count data in the header is stored and retrieved using local storage, so users can add items to the cart and have it display properly, even when viewing cached pages.
Clearing the Cache
To properly clear the cache you’ll need to follow steps to clear both Cloudflare and WP Rocket. If you clear Cloudflare before WP Rocket then you may end up caching the WP Rocket-cached pages, so you need to clear WP Rocket FIRST. If you also need to clear the custom cache elements (top menu or part number list), then you need to delete those files first, then WP Rocket, and then Cloudflare.