Cookie banners and page speed - how not to wreck Core Web Vitals
A cookie banner loads on every page, before everything else, right in the viewport. It is hard to think of a worse place for a heavy script. If your Core Web Vitals dropped after a CMP went in, that is usually not a coincidence - and usually fixable.
Three ways a banner hurts your scores
- CLS (Cumulative Layout Shift) - a banner injected after the page renders pushes content down. The fix: a
fixedoverlay that takes no part in document flow, rather than an element appended tobody. - Render blocking - a script wired synchronously into
<head>stops the parser. A banner should load asynchronously. - Transfer size - some CMPs pull in several hundred kilobytes: engine, translations for every language, icons and external fonts, on every single visit.
How much should a banner weigh
Numbers instead of adjectives - the CookieFox script, measured on production:
one language (e.g. Polish): 35 KB raw -> 13 KB gzipped
28 languages with auto-detection: 78 KB raw -> 30 KB gzipped
The gap is instructive: being multilingual costs you. If your site is single-language, pin that one language instead of auto-detection and the payload more than halves.
Turn on compression - it is a one-off job
The most commonly neglected item: the web server is not compressing application/javascript. The browser then downloads 35 KB instead of 13 KB - three times the bytes for no reason at all. One directive in the nginx or Apache config and it is gone.
The second is caching. Banner configuration changes rarely, so it should be served with an ETag and stale-while-revalidate; on a return visit the browser then fetches nothing.
What cannot be made faster
Autoblocking has to run before the trackers load - that is the entire point. A good banner does however remove its interceptor once full consent is given, so it is not watching the document tree for the rest of the session.
CookieFox serves the script straight from the panel, with an ETag and asynchronously, and the banner is a fixed overlay that shifts nothing. Try it on your site, or read how to choose a CMP.