|
/ Documentation /Troubleshooting & FAQ/ Excluding the SureCookie Banner from LiteSpeed Cache

Excluding the SureCookie Banner from LiteSpeed Cache

Overview

The SureCookie banner renders client-side. It mounts into an empty container via JavaScript, which fetches live settings from a REST endpoint. Because of this, full-page caching does not need to be disabled on pages that show the banner.

The real risk comes from LiteSpeed’s JS/CSS optimization features (Combine, Defer/Delay, UCSS, Critical CSS). These can interfere with how the banner script and stylesheet load. This guide covers the exclusions needed to prevent that.

When to Use This

  • The banner isn’t appearing, or appears unstyled/broken, on a site running LiteSpeed Cache
  • Banner buttons aren’t responding
  • There’s a flash of unstyled banner content on page load

Step 1: JS Optimization Excludes

Location: LiteSpeed Cache → Page Optimization → Tuning (JS section)

FieldValue to Add
JS Excludespublic.js
JS Deferred / Delayed Excludespublic.js

Why: SureCookie enqueues its banner script with defer intentionally, since dependent scripts (React, pro/third-party filters) need to run in DOM order. LiteSpeed’s Combine or “Delayed” JS loading can break that order or hold the script until user interaction, delaying the banner.

Step 2: CSS Optimization Excludes

Location: LiteSpeed Cache → Page Optimization → Tuning (CSS section)

FieldValue to Add
CSS Excludessurecookie
UCSS Inline Excluded Filessurecookie
UCSS Selector Allowlist.surecookie-public-banner-wrapper, .surecookie-styles, .surecookie-banner-*
CCSS Selector Allowlist.surecookie-public-banner-wrapper, .surecookie-styles, .surecookie-banner-*

Why: The banner stylesheet loads non-render-blocking, via media=”print” swapped to all once loaded. Nothing appears above the fold at initial paint since the banner mounts after JS runs. LiteSpeed’s Unused CSS and Critical CSS detection can mistake this for genuinely unused CSS and strip it, leaving the banner unstyled.

Step 3: REST API Cache Exclusion (Conditional)

Location: LiteSpeed Cache → Cache → Advanced → Cache → Excludes

Only needed if “Cache REST API” is enabled.

FieldValue to Add
Do Not Cache URIswp-json/surecookie

Why: This prevents stale banner settings or consent-log responses from being served out of cache.

Step 4: Apply and Verify

  1. Save changes on each tab.
  2. Go to LiteSpeed Cache → Toolbox → Purge All.
  3. Load the site in an incognito window, since a guest state triggers fresh UCSS/CCSS regeneration.

Then confirm:

  • No console errors
  • public.js loads as a separate file with defer intact (not combined)
  • The banner renders fully styled immediately, with no flash of unstyled content
  • Accepting or declining sets the surecookie_user_consent cookie
  • The banner stays hidden on reload after consent is given

Escalation

If the banner still misbehaves after all exclusions are applied and verified, the issue likely lies outside LiteSpeed configuration, such as a genuine theme or plugin JS conflict. Escalate to engineering with the site URL and a note confirming these exclusions are already in place.

Was this doc helpful?
What went wrong?

We don't respond to the article feedback, we use it to improve our support content.

Need help? Contact Support
Table of Contents
Scroll to Top