Unfortunately, the mandatory cookie notices often have a negative impact on website performance and user experience. This is particularly evident in the Google PageSpeed analysis. In general, it can be said that third-party cookie banners have a higher negative impact on page load time, Google PageSpeed and Core Web Vitals metrics.
Effects on the Core Web Vitals metrics
A cookie bar has negative effects in particular with regard to the following Core Web Vitals:
- First Contentful Paint (FCP): There may be a delay in the display and usability of the page. Especially if the blocking of (mostly external) scripts for which cookie acceptance is required has not been set correctly.
- Largest Contentful Paint (LCP): The cookie bar can be the largest element on the page, especially on mobile screens. As a result, the LCP score for mobile devices is often lower and the negative impact of the cookie bar is usually higher. This then leads to a poor LCP value.
- Cumulative Layout Shift (CLS): Jerking/shifting of the page during the loading process if no fixed sizes have been provided for the cookie bar in the layout.
Effects on the loading time
But it can also have a negative impact on the actual loading time due to the following causes:
- Additional JavaScript, CSS, fonts, images for the cookie notice
- Connection with external service usually slower than if you host the cookie bar yourself
- Banner is not loaded asynchronously
- Banner is loaded in the header and may block the rendering of the page
Checklist for optimizing a cookie notice
- Switch off animations (slide, fade, etc.)
- Remove images from the banner
- Asynchronous loading (attribute “async” or “defer”) of the JavaScript for calling the cookie bar
- Reducing the pixel size (as small as possible, but taking into account what is legally permissible)
- Provide fixed dimensions (placeholders) for the cookie bar or cookie banner (important for CLS)
- Check that all scripts to be blocked are actually blocked
- display the banner/bar at the bottom, not at the top
- Do not load separate fonts specifically for the cookie notice
- Local hosting of all required resources
- Load scripts for cookie notices directly by placing the script tag in the HTML code of the website, not by e.g. a Google Tag Manager or through another JavaScript – otherwise there will be delays in loading the cookie notice
- For external cookie scripts: Implementation of DNS prefetch or preconnect for the exact domains or subdomains of the resources to be loaded
- Preloading for the cookie script to be loaded
- Website caching
