Die verpflichtenden Cookie-Hinweise wirken sich leider häufig negativ auf die Website-Performance und User Experience aus. Insbesondere ist dies in der Google PageSpeed Analyse ersichtlich. Allgemein lässt sich sagen, dass Cookie-Banner von Drittanbietern eine höhere negative Auswirkung auf Seiten-Ladezeit, Google PageSpeed und Core Web Vitals Metriken haben.
Auswirkungen auf die Core Web Vitals Metriken
Negative Auswirkungen hat eine Cookie Bar insbesondere in Bezug auf die folgenden Core Web Vitals:
- First Contentful Paint (FCP): Es kann zu einer verzögerten Darstellung und Bedienbarkeit der Seite kommen. Insbesondere dann, wenn das Blockieren der (meist externer) Skripte für die eine Cookie-Akzeptanz erforderlich ist nicht richtig eingestellt wurde.
- Largest Contentful Paint (LCP): Die Cookie Bar kann insbesondere auf Mobile-Screens das größte Element auf der Seite sein. Daher ist der LCP Score für mobile Endgeräte häufig schlechter bzw. die negative Auswirkung durch die Cookie Bar meist höher. Dies führt dann zu einem schlechten LCP-Wert.
- Cumulative Layout Shift (CLS): Ruckeln/Verschiebung der Seite beim Ladevorgang, wenn für die Cookie Bar keine festen Größen im Layout vorgehalten worden sind.
Auswirkungen auf die Ladezeit
Aber auch in Bezug auf die eigentlich Ladezeit kann es einen negativen Impact durch die folgenden Ursachen haben:
- zusätzliches JavaScript, CSS, Schriften, Bilder für den Cookie Hinweis
- Verbindung mit externem Dienst meist langsamer, als wenn man die Cookie Bar selbst hostet
- Banner wird nicht asynchron geladen
- Banner wird im Header geladen und blockiert ggf. das Rendering der Seite
Checkliste zur Optimierung einer Cookie Notice
- Animationen ausschalten (Slide, Fade, etc.)
- Bilder aus dem Banner entfernen
- Asynchrones Laden (Attribut „async“ oder „defer“) des JavaScripts für den Aufruf der Cookie Bar
- Verringerung der Pixel-Größe (so klein wie möglich, aber dabei berücksichtigen was legal zulässig ist)
- Feste Dimensionen (Platzhalter) für die Cookie Bar bzw. den Cookie-Banner vorhalten (wichtig für CLS)
- Prüfen, dass alle zu blockierenden Scripte auch wirklich blockiert werden
- den Banner/die Bar unten anzeigen, nicht oben
- keine gesonderten Schriftarten speziell für die Cookie Notice laden
- lokales Hosting aller benötigten Ressourcen
- Skripte für Cookie-Hinweise direkt laden durch Platzierung des Script-Tags im HTML-Code der Website, nicht durch bspw. einen Google Tag Manager oder durch ein anderes JavaScript – andernfalls kommt es zu Verzögerungen beim Laden des Cookie Hinweises
- Bei externen Cookie Skripten: Implementierung von DNS-Prefetch oder Preconnect für die exakten Domains bzw. Subdomains der zu ladenden Ressourcen
- Preloading für das zu ladende Cookie-Skript
- Website-Caching
