- SureCookie Installation Guide
- Installing SureCookie Pro
- Updating SureCookie
- How to Set Up SureCookie: Onboarding Wizard Guide
- SureCookie Dashboard Overview
- Connecting Your Site to SureCookie (Scanner Setup)
- Using SureCookie on Multiple Sites
- Uninstalling SureCookie & Data Cleanup
- Preferences Settings (Menu, Branding, Analytics)
- Re-Consent
- Understanding SureCookie Logs
- How to Set Up Geographic Targeting
- Resource Blocking
- Setting Up Google Consent Mode v2
- Consent Models Explained (Opt-in vs Opt-out)
- Exporting Consent Logs (PDF Proof + CSV)
- Consent & Data Settings (Duration, Retention, Renew)
- Consent Forwarding Across a Multisite Network
- Resource / Script Blocking (Add Embeds + Fixes)
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)
| Field | Value to Add |
| JS Excludes | public.js |
| JS Deferred / Delayed Excludes | public.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)
| Field | Value to Add |
| CSS Excludes | surecookie |
| UCSS Inline Excluded Files | surecookie |
| 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.
| Field | Value to Add |
| Do Not Cache URIs | wp-json/surecookie |
Why: This prevents stale banner settings or consent-log responses from being served out of cache.
Step 4: Apply and Verify
- Save changes on each tab.
- Go to LiteSpeed Cache → Toolbox → Purge All.
- 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.
We don't respond to the article feedback, we use it to improve our support content.