Keep the Compliance Kits working on a WordPress website with a caching or page speed plugin

To keep TermsFeed AutoTerms working with a caching or page speed plugin, clear the page cache after every kit change and exclude the Cookie Consent kit scripts from delay. A caching plugin (WP Rocket, LiteSpeed Cache, WP Super Cache) stores each page and serves the stored copy to the next visitors, which speeds up your WordPress website. A page speed plugin (WP Rocket, LiteSpeed Cache, Autoptimize) combines, defers, or delays scripts.

The setup takes 4 steps and about 10 minutes. Sign in as an Administrator, or as a user with a plugin role and the WordPress unfiltered_html capability. You need access to the settings of your caching and page speed plugins too. Besides the delay exclusions in your page speed plugin, the AutoTerms plugin offers "Caching plugins compatibility mode" for page caches that leave out the top bars.

How each compliance kit behaves on a cached page

The Cookie Consent kit, the footer legal links, and the Endorsements box print the same output for every visitor, so a page cache serves them unchanged until you clear it. The kit loads TermsFeed Free Cookie Consent 4.2.0, which decides in the browser whether to show the consent banner to each visitor. A cached page therefore shows the consent banner to new visitors, and under the default GDPR preference Cookie Consent still holds back the optional vendor scripts.

The Cookie Notice bar and the Update Notices bar print with the footer when they sit at the bottom, so every page cache stores them with the page. A visitor who closed the Cookie Notice keeps it closed. On a cached page, the Update Notices bar appears a moment after the page loads, and it needs visitors to reach admin-ajax.php on your WordPress website. Read which edits the bar announces in Announce Legal Page Updates in WordPress.

Whether a bar set to the top position shows on a cached page depends on the page cache. WP Super Cache and Cache Enabler store the top bars with the page, while some other page caches serve pages without them.

Step 1: Clear the page cache after every kit change

Clear the whole page cache each time you turn a kit on or off, save its settings, publish a legal page, or change a vendor script. The cached pages keep the old output until they expire, so visitors see the old consent banner settings, the old footer legal links, or no bar. Use the purge or clear button of your caching plugin in the WordPress admin, and clear the host cache where your hosting company runs one.

Check the result logged out, because most page caches serve cached pages only to logged-out visitors: close every private window, open a new one, and load the page. Open the page source with Ctrl+U (Cmd+Option+U on a Mac) and search for the change. Search for the title of a new footer legal link, for example, or a new value in the inline script that starts Cookie Consent.

Step 2: Turn on "Caching plugins compatibility mode" when the top bars are missing

Turn on "Caching plugins compatibility mode" when a bar set to "top" never appears for logged-out visitors on cached pages. The mode prints the top bars in the footer, where every page cache stores them, and visitors still see the bars at the top of the page. The mode is off by default.

The Advanced tab shows "Unsupported caching plugins detected. We recommend enabling this option." in bold once the AutoTerms plugin finds that your page cache serves pages without the top bars. No admin notice repeats the hint, so open the Advanced tab to read it. The AutoTerms plugin checks again each time you activate a plugin from the WordPress admin, such as a caching plugin you install later.

Turn the mode on from the Advanced tab of TermsFeed > Settings, then clear the cache.

  1. Open TermsFeed > Settings in the WordPress admin and select the "Advanced" tab.
  2. Tick "Caching plugins compatibility mode".
  3. Click the "Save Changes" button.
  4. Clear the page cache, as the field text "Clean/delete cache after enabling or disabling this option." asks.

The Advanced tab of TermsFeed Settings with Caching plugins compatibility mode and the bold Unsupported caching plugins detected hint marked

Turn the mode off again after you switch to WP Super Cache, Cache Enabler, or no page cache, and clear the cache once more. Look up where each bar prints on the page in TermsFeed AutoTerms CSS Classes and Containers.

Step 3: Set up page speed plugins for the notices and the Cookie Consent kit

A page speed plugin combines scripts into one file, defers them to the end of loading, or delays them until the visitor first scrolls, clicks, or types.

The Cookie Notice and Update Notices bars work with combined, deferred, or delayed jQuery, WP Rocket "Delay JavaScript execution" included. The bars need no exclusion unless a combined file fails with an error. With delayed JavaScript, the bars appear as soon as the page speed plugin loads jQuery.

The Cookie Consent kit loads the Cookie Consent script in <head> and starts it from inline scripts in the footer. The run script always prints, and the Callbacks script prints when the Callbacks are an object. Delaying all these scripts shows the consent banner only after the visitor first scrolls, clicks, or presses a key. Delaying the Cookie Consent script without its inline scripts does not show the consent banner, and the Console tab shows the error cookieconsent is not defined.

Exclude the script address and the 2 inline scripts from delay in your page speed plugin. The first entry is part of the Cookie Consent script address, and the other 2 are names in the inline script code.

www.termsfeed.com/public/cookie-consent/
wpautotermsCookieConsentCallbacks
wpautotermsRunCookieConsent

WP Rocket and LiteSpeed Cache delay scripts, and both take addresses or partial strings in their exclusion lists. Enter the entries as written rather than script ids. In WP Rocket, add them to the "Excluded JavaScript Files" box of "Delay JavaScript execution". In LiteSpeed Cache, add them to "JS Deferred / Delayed Excludes" on the Tuning tab of Page Optimization. For another page speed plugin, check in its documentation whether it delays scripts, and add the same entries where it does.

Deferring and combining leave the Cookie Consent script and its inline scripts working. WP Rocket "Combine JavaScript files" copies a vendor script whose src ends in .js into the combined file, where it runs without consent. Add the address of each vendor .js file to the files WP Rocket excludes from combining.

Check in the page source that each JavaScript vendor script still carries type="text/plain" and its data-cookie-consent category after the page speed plugin runs. Compare each one with the vendor script example in Cookie Banner Code on WordPress Pages.

Step 4: Check the kits on a cached page

Check every kit on a cached page, logged out, after you change the cache or the page speed settings. Confirm that cached pages carry the Cookie Notice bar, load the Cookie Consent script, and run the update check of the Update Notices kit.

  1. Close every private window, open a new one, open Chrome DevTools, and load your WordPress website. Reload the page so the second load comes from the cache.
  2. With the Cookie Notice kit on, select the Elements tab and press Ctrl+F (Cmd+F on a Mac). Search for the selector div.wpautoterms-cookies-notice to confirm that the bar is on the page. A bar set to "top" sits inside wpautoterms-top-static-container or wpautoterms-top-fixed-container.
  3. Select the Network tab, type cookie-consent.js in the filter box, reload the page, and check that the request appears at page load, before you move the mouse. The request appears only while the Cookie Consent kit is on.
  4. Select the Console tab and check that no cookieconsent is not defined error appears.
  5. Select the Network tab, type admin-ajax in the filter box, and check that the request with action=wpautoterms_check_updates returns 200 while the Update Notices kit is on.

A 403 or other error response to the admin-ajax.php request points to a firewall or a security plugin that blocks it for visitors. Find the other causes of a missing bar in Update Notice Not Appearing in WordPress.

Page caches that store pages for logged-in users

Keep page caching off for logged-in users, or set "Disable for logged-in users" to "no" on both notices. A page cached for a logged-in user carries the "Disable for logged-in users" result for that user. The notices script reads that result before it shows the Cookie Notice or checks for updates. Logged-out visitors who get that page then do not see the Cookie Notice or the Update Notice. W3 Total Cache does this while "Don't cache pages for logged in users" is turned off. WP Rocket "User Cache" and LiteSpeed Cache "Cache Logged-in Users" keep the pages cached for logged-in users apart from the pages other visitors get. With WP Super Cache, keep "Disable caching for logged in visitors." selected under Cache Restrictions on the Advanced tab.

Close every private window, load a page in a new one, where you are logged out, and search the page source for wpautoterms_js_cookies_notice and wpautoterms_js_update_notice. A "disable":"1" value in either object shows a page cached for a logged-in user.