04/22/2026

Optimize Cookiebot performance on your website

I was recently working on optimizing a client's website, when I stumbled across Cookiebot showing up in Lighthouse's render blocking requests. It showed a 300ms delay for desktop and even more than 1s delay for the mobile test. I wondered why and if there is a better solution.

I found out, that Cookiebot had auto-blocking mode enabled. That requires it to load synchronously as the first JavaScript on the page to be able to block other JavaScripts that might require the user's consent to load.

<script id="Cookiebot"
   src="https://consent.cookiebot.com/uc.js"
   data-cbid="your-cookie-bot-id"
   data-blockingmode="auto"
   type="text/javascript"></script>

<script type="application/javascript">
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','your-gtm-id');
</script>

Fortunately Cookiebot can also run in manual blocking mode, which require a little bit more work from the developer or integrator but saves you big time on the rendering speed of your website. Remove the `data-blockingmode="auto"` form the Cookiebot script tag and add `async` instead. For script tags, that require consent, change the type to `text/plain` to avoid execution by the browser. Add `data-cookieconsent="…"` to the script tags to make Cookiebot find them and enable them, if consent for all mentioned categories is given.

<script id="Cookiebot"
   src="https://consent.cookiebot.com/uc.js"
   data-cbid="your-cookie-bot-id"
   async
   type="text/javascript"></script>

<script type="text/plain" data-cookieconsent="statistics,marketing">
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','your-gtm-id');
</script>

Feel free to contact me, if you have any questions or need help improving your website's performance.