Best Practices für Cookie-Hinweise

Cookie-Hinweise im Hinblick auf Leistung und Nutzerfreundlichkeit optimieren

Katie Hempenius
Katie Hempenius
X

In diesem Artikel wird erläutert, wie sich Cookie-Hinweise auf die Leistung, Leistungsmessung und Nutzererfahrung auswirken können.

Leistung

Cookie-Hinweise können einen erheblichen Einfluss auf die Seitenleistung haben, da sie normalerweise zu Beginn des Seitenaufbaus geladen werden, allen Nutzern angezeigt werden und das Laden von Anzeigen und anderen Seiteninhalten beeinflussen können.

So können sich Cookie-Hinweise auf Web Vitals-Messwerte auswirken:

  • Largest Contentful Paint (LCP): Die meisten Mitteilungen zur Cookie-Einwilligung sind relativ klein und enthalten daher normalerweise kein LCP-Element einer Seite. Dies kann jedoch passieren, insbesondere auf Mobilgeräten. Auf Mobilgeräten nimmt ein Cookie-Hinweis in der Regel einen größeren Teil des Bildschirms ein. Das ist in der Regel der Fall, wenn eine Cookie-Mitteilung einen großen Textblock enthält (Textblöcke können auch LCP-Elemente sein).

  • First Input Delay (FID): Im Allgemeinen sollte Ihre Cookie-Einwilligungslösung an sich nur minimale Auswirkungen auf FID haben, da die Cookie-Einwilligung wenig JavaScript-Ausführungen erfordert. Die Technologien, die diese Cookies ermöglichen, nämlich Werbe- und Tracking-Skripts, können jedoch einen erheblichen Einfluss auf die Interaktivität von Seiten haben. Wenn Sie diese Skripts bis zur Annahme von Cookies verzögern, kann die First Input Delay (FID) reduziert werden.

  • Cumulative Layout Shift (CLS): Cookie-Einwilligungsmitteilungen sind eine häufige Ursache von Layoutverschiebungen.

Grundsätzlich können Sie davon ausgehen, dass ein Cookie-Hinweis von Drittanbietern einen größeren Einfluss auf die Leistung hat als ein selbst erstellter Cookie-Hinweis. Das ist kein spezielles Problem für Cookie-Hinweise, sondern eher die Art von Drittanbieter-Scripts im Allgemeinen.

Best Practices

Die Best Practices in diesem Abschnitt konzentrieren sich auf die Hinweise auf Drittanbieter-Cookies. Einige, aber nicht alle dieser Best Practices können auch für die Benachrichtigungen über eigene Cookies verwendet werden.

Skripts für Cookie-Hinweise sollten asynchron geladen werden. Fügen Sie dazu dem Script-Tag das Attribut async hinzu.

<script src="https://cookie-notice.com/script.js" async>

Nicht asynchrone Skripts blockieren den Browser-Parser. Dadurch wird der Seitenaufbau und der LCP-Wert verzögert. Weitere Informationen finden Sie unter Drittanbieter-JavaScript effizient laden.

Scripts für Cookie-Hinweise sollten „direkt“ geladen werden, indem das Script-Tag in den HTML-Code des Hauptdokuments eingefügt wird – nicht über einen Tag-Manager oder ein anderes Script. Wenn Sie das Skript für die Cookie-Benachrichtigung mithilfe eines Tag-Managers oder eines sekundären Skripts einfügen, wird das Laden des Skripts für die Cookie-Benachrichtigung verzögert: Das Skript wird vom Lookahead-Parser des Browsers verdeckt und verhindert, dass das Skript vor der JavaScript-Ausführung geladen wird.

Alle Websites, die ihre Scripts für Cookie-Hinweise von einem Drittanbieterstandort laden, sollten entweder die Ressourcenhinweise dns-prefetch oder preconnect verwenden, um eine frühzeitige Verbindung mit dem Ursprung herzustellen, der Ressourcen für Cookie-Hinweise hostet. Weitere Informationen finden Sie unter Netzwerkverbindungen frühzeitig herstellen, um die wahrgenommene Seitengeschwindigkeit zu verbessern.

<link rel="preconnect" href="https://cdn.cookie-notice.com/">

Einige Websites würden vom Ressourcenhinweis preload profitieren, um das Skript für die Cookie-Benachrichtigung zu laden. Mit dem Ressourcenhinweis preload wird der Browser angewiesen, eine frühe Anfrage für die angegebene Ressource zu initiieren.

<link rel="preload" href="https://www.cookie-notice.com/cookie-script.js">

preload ist am leistungsstärksten, wenn die Verwendung auf das Abrufen einiger wichtiger Ressourcen pro Seite beschränkt ist. Daher ist der Nutzen des Vorabladens des Scripts für die Benachrichtigung über Cookies je nach Situation unterschiedlich.

Wenn Sie das Design des Hinweises zu Drittanbieter-Cookies anpassen, können zusätzliche Leistungskosten anfallen. So können beispielsweise Hinweise zu Drittanbieter-Cookies nicht immer dieselben Ressourcen (z. B. Webschriftarten) wiederverwenden, die an anderer Stelle auf der Seite verwendet werden. Außerdem wird der Stil durch Hinweise zu Drittanbieter-Cookies oft am Ende langer Anfrageketten geladen. Um Überraschungen zu vermeiden, sollten Sie sich darüber im Klaren sein, wie der Cookie-Hinweis geladen wird und Stile und zugehörige Ressourcen angewendet werden.

Layoutverschiebungen vermeiden

Dies sind einige der häufigsten Probleme im Zusammenhang mit Layout Shifts im Zusammenhang mit Cookie-Hinweisen:

  • Hinweise zu Cookies oben auf dem Bildschirm:Diese Hinweise sind eine sehr häufige Ursache für Layoutverschiebungen. Wird ein Cookie-Hinweis im DOM eingefügt, nachdem die umgebende Seite bereits gerendert wurde, werden die darunterliegenden Seitenelemente auf der Seite weiter nach unten verschoben. Diese Art von Layout Shift kann vermieden werden, indem im DOM Platz für die Einwilligungserklärung reserviert wird. Sollte dies nicht praktikabel sein, sollten Sie eine fixierte Fußzeile oder ein modales Fenster verwenden, um den Cookie-Hinweis anzuzeigen, weil beispielsweise die Abmessungen der Cookie-Mitteilung je nach Region variieren. Da bei beiden alternativen Ansätzen der Cookiehinweis als „Overlay“ über dem Rest der Seite angezeigt wird, sollte er nicht zu einer Inhaltsverschiebung führen, wenn er geladen wird.
  • Animationen: In vielen Cookie-Hinweisen werden Animationen verwendet. Das „Einschieben“ eines Cookie-Hinweises ist ein gängiges Designmuster. Je nachdem, wie diese Effekte implementiert werden, können sie Layoutverschiebungen verursachen. Weitere Informationen finden Sie unter Fehlerbehebung bei Layout Shifts.
  • Schriftarten: Spät geladene Schriftarten können das Rendering blockieren und Layoutverschiebungen verursachen. Dieses Phänomen zeigt sich bei langsamen Verbindungen.

Erweiterte Ladeoptimierungen

Die Implementierung dieser Verfahren ist aufwendiger, kann aber das Laden von Scripts für Cookie-Hinweise weiter optimieren:

  • Wenn Sie Scripts für Hinweise auf Drittanbieter-Cookies von Ihren eigenen Servern zwischenspeichern und bereitstellen, kann dies die Liefergeschwindigkeit dieser Ressourcen verbessern.
  • Mit Service-Workern können Sie das Abrufen und Caching von Drittanbieterskripts, z. B. Skripts für Cookie-Hinweise, besser steuern.

Leistungsmessung

Cookie-Benachrichtigungen können sich auf die Leistungsmessung auswirken. In diesem Abschnitt werden einige dieser Auswirkungen und Techniken zu ihrer Minderung erläutert.

Echtes Nutzermonitoring (RUM)

Einige Analyse- und RUM-Tools verwenden Cookies zur Erfassung von Leistungsdaten. Wenn ein Nutzer die Verwendung von Cookies ablehnt, können diese Tools keine Leistungsdaten erfassen.

Websites sollten sich dieses Phänomens bewusst sein. Es lohnt sich auch, die Mechanismen zu verstehen, die Ihre RUM-Tools zur Datenerfassung verwenden. Für den typischen Standort ist diese Diskrepanz jedoch angesichts der Richtung und des Ausmaßes der Datenverzerrung wahrscheinlich kein Grund zur Sorge. Die Verwendung von Cookies ist keine technische Voraussetzung für die Leistungsmessung. Die JavaScript-Bibliothek web-vitals ist ein Beispiel für eine Bibliothek, die keine Cookies verwendet.

Je nachdem, wie Ihre Website Cookies zur Erhebung von Leistungsdaten verwendet (also ob die Cookies personenbezogene Daten enthalten) sowie die entsprechende Gesetzgebung, unterliegt die Verwendung von Cookies zur Leistungsmessung möglicherweise nicht den gleichen gesetzlichen Anforderungen wie einige der Cookies, die auf Ihrer Website für andere Zwecke verwendet werden (z. B. Werbecookies). Manche Websites gliedern Leistungs-Cookies als separate Cookie-Kategorie ein, wenn sie die Nutzereinwilligung einholen.

Synthetisches Monitoring

Ohne benutzerdefinierte Konfiguration messen die meisten synthetischen Tools (z. B. Lighthouse und WebPageTest) nur die Erfahrung eines Erstnutzers, der nicht auf eine Cookie-Einwilligungserklärung reagiert hat. Allerdings müssen beim Erfassen von Leistungsdaten nicht nur Schwankungen des Cache-Status (z. B. ein erster Besuch im Vergleich zu einem wiederholten Besuch) berücksichtigt werden, sondern auch Abweichungen beim Cookie-Akzeptanzstatus – akzeptiert, abgelehnt oder unbeantwortet.

In den folgenden Abschnitten werden die WebPageTest- und Lighthouse-Einstellungen erläutert, mit denen sich Cookie-Hinweise in Workflows zur Leistungsmessung einbinden lassen. Cookies und Cookie-Hinweise sind jedoch nur einer von vielen Faktoren, deren Simulation in Lab-Umgebungen schwierig sein kann. Aus diesem Grund ist es wichtig, RUM-Daten als Eckpfeiler Ihres Leistungs-Benchmarking zu verwenden und keine synthetischen Tools einzusetzen.

Skripting

Sie können mithilfe von Scripting einen WebPageTest dazu veranlassen, das Cookie-Einwilligungsbanner zu „klicken“, während Sie ein Trace erfassen.

Fügen Sie auf dem Tab Script ein Skript hinzu. Im folgenden Skript wird die zu testende URL aufgerufen und dann auf das DOM-Element mit der ID cookieButton geklickt.

combineSteps
navigate    %URL%
clickAndWait    id=cookieButton

Beachten Sie bei der Verwendung dieses Skripts Folgendes:

  • combineSteps weist WebPageTest an, die Ergebnisse der nachfolgenden Skriptschritte in einem einzigen Satz von Traces und Messungen zu "kombinieren". Auch die Ausführung dieses Skripts ohne combineSteps kann nützlich sein. Mithilfe separater Traces lässt sich leicht feststellen, ob Ressourcen vor oder nach Annahme von Cookies geladen wurden.
  • %URL% ist eine WebPageTest-Konvention, die auf die getestete URL verweist.
  • clickAndWait weist WebPageTest an, auf das durch attribute=value angegebene Element zu klicken und zu warten, bis die nachfolgende Browseraktivität abgeschlossen ist. Sie hat das Format clickAndWait attribute=Value.

Wenn Sie dieses Skript richtig konfiguriert haben, sollte auf dem von WebPageTest erstellten Screenshot kein Cookie-Hinweis zu sehen sein (der Cookie-Hinweis wurde akzeptiert).

Weitere Informationen zum Erstellen von WebPageTest-Skripts finden Sie in der Dokumentation zu WebPageTest.

Cookies setzen

Wenn Sie WebPageTest mit einem Cookie ausführen möchten, rufen Sie den Tab Erweitert auf und fügen Sie dem Feld Benutzerdefinierte Header den Cookie-Header hinzu:

Screenshot mit dem Feld „Benutzerdefinierte Header“ in WebPageTest

Testort ändern

Um den von WebPageTest verwendeten Testspeicherort zu ändern, klicken Sie auf dem Tab Erweiterte Tests auf das Drop-down-Menü Testort.

Screenshot des Drop-down-Menüs „Test Location“ (Teststandort) in WebPageTest

Das Setzen von Cookies bei einer Lighthouse-Ausführung kann dazu dienen, eine Seite in einen bestimmten Zustand für Tests in Lighthouse zu versetzen. Das Cookie-Verhalten von Lighthouse unterscheidet sich geringfügig je nach Kontext (Entwicklertools, Befehlszeile oder PageSpeed Insights).

DevTools

Cookies werden nicht gelöscht, wenn Lighthouse über die Entwicklertools ausgeführt wird. Andere Speichertypen werden jedoch standardmäßig gelöscht. Sie können dieses Verhalten ändern, indem Sie im Bereich Lighthouse die Option Speicherinhalt löschen verwenden.

Screenshot zur Hervorhebung der Lighthouse-Option „Speicherinhalt löschen“

CLI

Wenn Sie Lighthouse über die Befehlszeile ausführen, wird eine neue Chrome-Instanz verwendet. Daher werden standardmäßig keine Cookies gesetzt. Wenn Sie Lighthouse über die Befehlszeile mit einem bestimmten Cookie ausführen möchten, verwenden Sie den folgenden Befehl:

lighthouse <url> --extra-headers "{\"Cookie\":\"cookie1=abc; cookie2=def; \_id=foo\"}"

Weitere Informationen zum Festlegen benutzerdefinierter Anfrageheader in der Lighthouse-Befehlszeile finden Sie unter Lighthouse auf authentifizierten Seiten ausführen.

PageSpeed Insights

Wenn Sie Lighthouse über PageSpeed Insights ausführen, wird eine aktuelle Chrome-Instanz verwendet und es werden keine Cookies gesetzt. PageSeed Insights kann nicht zum Festlegen bestimmter Cookies konfiguriert werden.

Nutzererfahrung

Die Nutzererfahrung (UX) verschiedener Hinweise zur Cookie-Einwilligung beruht hauptsächlich auf zwei Entscheidungen: der Platzierung des Cookie-Hinweises auf der Seite und dem Umfang, in dem der Nutzer die Verwendung von Cookies auf einer Website anpassen kann. In diesem Abschnitt werden mögliche Ansätze für diese beiden Entscheidungen erläutert.

Wenn Sie potenzielle Designs für Ihre Cookie-Hinweise in Betracht ziehen, sollten Sie Folgendes bedenken:

  • UX: Ist das eine gute User Experience? Wie wirkt sich dieses spezielle Design auf bestehende Seitenelemente und User Flows aus?
  • Unternehmen: Wie sieht die Cookie-Strategie Ihrer Website aus? Was sind Ihre Ziele für den Cookie-Hinweis?
  • Rechtlicher Hinweis: Entspricht dies den rechtlichen Anforderungen?
  • Entwicklung: Wie viel Arbeit würde die Implementierung und Wartung kosten? Wie schwierig wäre es, sich zu ändern?

Placement

Cookie-Hinweise können als Kopfzeile, Inline-Element oder Fußzeile angezeigt werden. Sie können auch als modales Fenster oder Interstitial über dem Seiteninhalt eingeblendet werden.

Diagramm mit Beispielen für verschiedene Platzierungsoptionen für Cookie-Hinweise

Cookie-Hinweise werden üblicherweise in der Kopf- oder Fußzeile platziert. Von diesen beiden Optionen ist die Platzierung der Fußzeile im Allgemeinen die bessere Wahl, da sie unaufdringlich ist, nicht mit Banneranzeigen oder Benachrichtigungen um die Aufmerksamkeit konkurriert und normalerweise keine CLS verursacht. Darüber hinaus werden hier Datenschutzerklärungen und Nutzungsbedingungen angegeben.

Obwohl Inline-Cookie-Hinweise eine Option sind, kann es schwierig sein, sie in bestehende Benutzeroberflächen zu integrieren, und ist daher selten.

Modale Dialoge

Modale Elemente sind Cookie-Einwilligungserklärungen, die über dem Seiteninhalt eingeblendet werden. Modale Elemente können je nach Größe unterschiedlich aussehen und funktionieren.

Kleinere modale Anzeigen für einen Teil des Bildschirms können eine gute Alternative für Websites sein, auf denen Cookie-Hinweise nicht so implementiert werden können, dass sie nicht zu Layoutverschiebungen führen.

Große modale Elemente, die den Großteil der Seiteninhalte verdecken, sollten dagegen mit Bedacht verwendet werden. Insbesondere bei kleineren Websites kann es vorkommen, dass Nutzer abspringen, anstatt den Cookie-Hinweis einer unbekannten Website mit verborgenem Inhalt zu akzeptieren. Auch wenn es sich nicht unbedingt um Synonyme handelt, sollten Sie sich mit den gesetzlichen Bestimmungen zu Cookie-Sperrungen vertraut machen, wenn Sie die Verwendung eines Vollbild-Cookies für Cookies in Betracht ziehen.

Konfigurierbarkeit

Benutzeroberflächen für Cookie-Benachrichtigungen geben Nutzern unterschiedliche Kontrolle darüber, welche Cookies sie akzeptieren.

Keine Konfigurierbarkeit

Diese im Hinweisstil gestalteten Cookie-Banner bieten Nutzern keine Möglichkeit, Cookies direkt zu deaktivieren. Stattdessen enthalten sie in der Regel einen Link zur Cookie-Richtlinie der Website, über die Nutzer Informationen zur Verwaltung von Cookies über ihren Webbrowser erhalten. Diese Hinweise enthalten normalerweise entweder eine Schaltfläche „Schließen“ und/oder „Akzeptieren“.

Diagramm mit Beispielen für Cookie-Hinweise ohne Cookie-Konfigurierbarkeit

Einige Konfigurationsmöglichkeiten

Diese Cookie-Hinweise geben dem Nutzer die Möglichkeit, Cookies abzulehnen, unterstützen jedoch keine detaillierteren Kontrollen. Dieser Ansatz bei der Verwendung von Hinweise zu Cookies ist seltener.

Diagramm mit Beispielen für Cookie-Hinweise mit einer gewissen Cookie-Konfigurierbarkeit

Vollständige Konfigurierbarkeit

Diese Cookie-Hinweise bieten Nutzern genauere Kontrollen zur Konfiguration der Cookie-Verwendung, die sie akzeptieren.

Diagramm mit Beispielen für Chookie-Hinweise mit vollständiger Cookie-Konfigurierbarkeit

  • UX:Einstellungen zum Konfigurieren der Cookie-Nutzung werden in der Regel in einem separaten Dialogfenster angezeigt, wenn der Nutzer auf die ursprüngliche Einwilligungserklärung für Cookies reagiert. Wenn der Platz ausreicht, werden diese Steuerelemente auf einigen Websites jedoch direkt in der ursprünglichen Cookie-Einwilligungserklärung angezeigt.

  • Detaillierungsgrad:Der am häufigsten verwendete Ansatz zur Cookie-Konfiguration besteht darin, Nutzern die Aktivierung von Cookies nach der „Cookie-Kategorie“ zu ermöglichen. Zu gängigen Cookie-Kategorien gehören beispielsweise funktionale Cookies, Targeting-Cookies und Cookies für soziale Medien.

    Einige Websites gehen jedoch noch einen Schritt weiter und ermöglichen den Nutzern die Aktivierung pro Cookie. Alternativ können Sie Nutzern auch spezifischere Kontrollen geben, indem Sie Cookie-Kategorien wie „Werbung“ in bestimmte Anwendungsfälle unterteilen, z. B. die Möglichkeit, dass Nutzer „grundlegende Anzeigen“ und „personalisierte Anzeigen“ separat aktivieren können.

Diagramm mit Beispielen für Cookie-Hinweise mit vollständiger Cookie-Konfigurierbarkeit