How to optimize PageSpeed when using consentmanager?
If you are using (any) cookie banner on your website, the website speed will be lower due to the amount of additional scripts that need to be loaded. Here are some tips how you can improve your page speed:
Technical optimization
Use semi-automatic blocking code
The CMP offers you two code versions: Automatic and semi-automatic/manual blocking code. The semi-automatic blocking code is loading asynchronously and hence will have a lower impact in your page performance. We always recommend to us the semi-automatic blocking code.
Add the code directly in the page
It is always recommended to add the CMP code directly to your website code instead of adding the CMP code via a TagManager or similar. The use of a tag manager will delay the pageload by about 200-500ms and therefore negativly affect your CLS/LCP scores (see below).
Place the CMP-code as early as possible in your website
In order for the CMP to load quickly, you should add the CMP code as early as possible in your <body> or <head> tag.
Use preconnect
In order to reduce connection times, you can add the following code to your <head>:
<link rel="preconnect" href="https://delivery.consentmanager.net">
<link rel="preconnect" href="https://cdn.consentmanager.net">
Please note: Depending on your account settings, the URLs that your CMP is using might be different. Please ensure to always add the full subdomain (e.g. a.delivery.consentmanager.net) as a preconnect.
Design optimization
Cummulative Layout Shift (CLS)
For Google Search engine, the Cummulative Layout Shift (CLS) is relevant ranking factors. In order to reduce the impact of the CMP to your website we recommend the following:
- Do not use external Fonts (but only self-hosted font files if necessary) in your custom CSS of your consentmanager design
- Do not use external Images (or any images) in your custom HTML of your consentmanager design. If possible, use inline SVG images in order to avoid an additional download of the image file.
- Do not use external CSS (@import rules) in your custom CSS of your consentmanager design
- Do not use consentmanager Layout mode "Push down" (CMP => Designs => Box settings) which will appear at the top of the window
Largest Contentful Paint (LCP)
Similar to CLS (above), the LCP is another ranking factor. In order to reduce the impact of the CMP to your website we recommend the following:
- Follow the technical recommendations above (code placement, preconnect etc.)
- Use whitelabel proxy mode where possible
- Try designing the consent layer to use as little space as possible (usually only possible with Desktop layouts)
- Set the CMP settings to only show the consent layer in EU/EEA countries in order to reduce the LCP impact in other countries
- You can set Menu > Designs > Edit > Behavior so that the layer only appears after x seconds and/or on mouse move. This can help dealing with LCP.
