Best Practices für Cookie-Hinweise

Optimieren Sie Cookie-Benachrichtigungen im Hinblick auf Leistung und Nutzerfreundlichkeit.

Katie Hempenius
Katie Hempenius
X
Barry Pollard

In diesem Dokument wird erläutert, wie sich Cookie-Benachrichtigungen auf die Leistung, die Leistungsmessung und die Nutzerfreundlichkeit auswirken können.

Leistung

Cookie-Benachrichtigungen können sich erheblich auf die Seitenleistung auswirken, da sie in der Regel schon früh im Seitenaufbau geladen werden, allen Nutzern angezeigt werden und das Laden von Anzeigen und anderen Seiteninhalten potenziell beeinträchtigen können.

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

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

  • Interaction to Next Paint (INP):Cookie-Benachrichtigungen können oft zu einem hohen INP führen, da sie in der Regel viele Drittanbieter-Scripts hinzufügen, wenn sie akzeptiert werden. Das Hauptproblem besteht oft darin, die Interaktion Akzeptieren auszuführen, da das Hinzufügen dieser Drittanbieter-Scripts auf einmal viel Verarbeitung erfordert. Im Abschnitt Best Practices finden Sie Informationen dazu, wie Sie dieses Problem vermeiden können.

  • Cumulative Layout Shift (CLS):Cookie-Einwilligungserklärungen sind eine sehr häufige Ursache für Layoutverschiebungen.

Im Allgemeinen kann eine Cookie-Erklärung von Drittanbietern eine größere Auswirkung auf die Leistung haben als eine von Ihnen erstellte Cookie-Erklärung. Dies ist kein Problem, das nur für Cookie-Benachrichtigungen gilt, sondern für Drittanbieter-Scripts im Allgemeinen.

Best Practices

Die Best Practices in diesem Abschnitt konzentrieren sich auf Hinweise zu Drittanbieter-Cookies. Einige, aber nicht alle dieser Best Practices gelten auch für Hinweise zu eigenen Cookies.

Auswirkungen von Cookie-Hinweisen auf die Nutzereinwilligung

Wie bereits erwähnt, ist die Schaltfläche Akzeptieren häufig eine besondere Ursache für INP-Probleme, da beim Klicken darauf eine große Menge an Verarbeitung stattfindet.

Das Chrome-Team hat mit einer Reihe von Plattformen zur Einwilligungsverwaltung (Consent Management Platforms, CMP) zusammengearbeitet, um die Einwilligung nach dem Klicken auf „Akzeptieren“ zu erteilen, damit der Browser diese Einwilligung beim nächsten Mal schnell bestätigen kann. Sehen Sie sich als Beispiel diese PubTech-Fallstudie an.

Wenn Ihre CMP davon betroffen ist, wenden Sie sich an den Anbieter, um zu erfahren, ob er ähnliche INP-Probleme für Websites vermeiden kann, auf denen die CMP eingebettet ist. Informationen zu ergiebigen Taktiken finden Sie im Artikel Lange Aufgaben optimieren.

Scripts für die Cookie-Mitteilung sollten asynchron geladen werden. Fügen Sie dazu das Attribut async zum Script-Tag hinzu.

<script src="https://example.com/script.js" async>

Nicht asynchrone Scripts blockieren den Browser-Parser. Dadurch wird das Laden der Seite und der LCP verzögert. Weitere Informationen finden Sie unter JavaScript von Drittanbietern effizient laden.

Scripts für die Cookie-Mitteilung sollten „direkt“ geladen werden, indem das Script-Tag in das HTML-Hauptdokument eingefügt wird. Sie dürfen nicht über ein Tag-Management-System oder ein anderes Script geladen werden. Wenn Sie ein Tag-Manager- oder ein sekundäres Script zum Einschleusen des Scripts für die Cookie-Mitteilung verwenden, wird das Laden des Scripts für die Cookie-Mitteilung verzögert: Das Script wird für den Vorschau-Parser des Browsers ausgeblendet und das Laden des Scripts wird verhindert, bevor JavaScript ausgeführt wird.

Alle Websites, die ihre Skripte für die Cookie-Erklärung von einem Drittanbieter-Speicherort laden, sollten entweder den Ressourcenhinweis dns-prefetch oder preconnect verwenden, um frühzeitig eine Verbindung zum Ursprung herzustellen, der die Ressourcen für die Cookie-Erklärung hostet. Weitere Informationen finden Sie unter Netzwerkverbindungen frühzeitig herstellen, um die wahrgenommene Seitengeschwindigkeit zu verbessern.

<link rel="preconnect" href="https://cdn.example.com/">

Für einige Websites ist es sinnvoll, den Ressourcenhinweis preload zu verwenden, um das Script für die Cookie-Benachrichtigung zu laden. Der preload-Ressourcenhinweis informiert den Browser, eine frühzeitige Anfrage für die angegebene Ressource zu starten.

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

preload ist am effektivsten, 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 Cookie-Erklärung von der Situation abhängig.

Die Anpassung des Erscheinungsbildes einer Drittanbieter-Cookie-Benachrichtigung kann zusätzliche Leistungskosten verursachen. So können beispielsweise bei Hinweisen zu Drittanbieter-Cookies nicht immer dieselben Ressourcen (z. B. Webschriften) wiederverwendet werden, die an anderer Stelle auf der Seite verwendet werden. Außerdem werden Hinweise zu Drittanbieter-Cookies in der Regel am Ende langer Anfrageketten geladen. Achten Sie darauf, wie Ihre Cookie-Erklärung geladen wird und wie Stil und zugehörige Ressourcen angewendet werden, um unerwartete Probleme zu vermeiden.

Layoutverschiebungen vermeiden

Im Folgenden finden Sie einige der häufigsten Probleme mit Layoutänderungen im Zusammenhang mit Cookie-Benachrichtigungen:

  • Cookie-Benachrichtigungen oben auf dem Bildschirm:Cookie-Benachrichtigungen oben auf dem Bildschirm sind eine sehr häufige Ursache für Layoutänderungen. Wenn eine Cookie-Erklärung in das DOM eingefügt wird, nachdem die umgebende Seite bereits gerendert wurde, werden die darunter liegenden Seitenelemente nach unten verschoben. Diese Art von Layout-Änderung kann vermieden werden, indem im DOM Platz für die Einwilligungserklärung reserviert wird. Wenn dies nicht möglich ist, z. B. wenn die Abmessungen Ihrer Cookie-Erklärung je nach Region variieren, können Sie eine fixierte Fußzeile oder ein modales Fenster verwenden, um die Cookie-Erklärung anzuzeigen. Da bei beiden alternativen Ansätzen die Cookie-Erklärung als Overlay über dem Rest der Seite angezeigt wird, sollte sie beim Laden keine Verschiebungen der Inhalte verursachen.
  • Animationen: Viele Cookie-Benachrichtigungen verwenden Animationen. Ein gängiges Designmuster ist beispielsweise das „Einblenden“ einer Cookie-Benachrichtigung. Je nachdem, wie diese Effekte implementiert sind, können sie zu Layoutverschiebungen führen. Weitere Informationen finden Sie unter Layoutverschiebungen beheben.
  • Schriftarten: Spät geladene Schriftarten können das Rendern blockieren und/oder zu Layoutverschiebungen führen. Dieses Phänomen ist bei langsamen Verbindungen stärker ausgeprägt.

Erweiterte Ladeoptimierungen

Diese Methoden sind mit mehr Aufwand verbunden, können aber das Laden von Scripts für die Cookie-Benachrichtigung weiter optimieren:

  • Wenn Sie Skripte für die Cookie-Mitteilung von Drittanbietern auf Ihren eigenen Servern zwischenspeichern und bereitstellen, kann die Auslieferungsgeschwindigkeit dieser Ressourcen verbessert werden.
  • Mit Dienstarbeitern haben Sie mehr Kontrolle über das Abrufen und Caching von Drittanbieter-Scripts, z. B. Scripts für die Cookie-Benachrichtigung.

Leistungsmessung

Cookie-Benachrichtigungen können sich auf Leistungsmessungen auswirken. In diesem Abschnitt werden einige dieser Auswirkungen und Methoden zur Abschwächung erläutert.

Real User Monitoring (RUM)

Einige Analyse- und RUM-Tools verwenden Cookies, um Leistungsdaten zu erheben. Wenn ein Nutzer die Verwendung von Cookies ablehnt, können mit diesen Tools keine Leistungsdaten erfasst werden.

Betreiber von Websites sollten sich dieses Phänomens bewusst sein. Außerdem ist es sinnvoll, die Mechanismen zu verstehen, mit denen Ihre RUM-Tools Daten erheben. Bei einer typischen Website ist diese Abweichung aufgrund der Richtung und Größe der Datenabweichung jedoch 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 auf Ihrer Website Cookies zur Erhebung von Leistungsdaten verwendet werden (d. h. ob die Cookies personenbezogene Daten enthalten) und je nach geltendem Recht unterliegt die Verwendung von Cookies zur Leistungsmessung möglicherweise nicht denselben gesetzlichen Anforderungen wie einige der Cookies, die auf Ihrer Website zu anderen Zwecken verwendet werden, z. B. Werbe-Cookies. Einige Websites trennen Leistungs-Cookies bei der Einwilligung der Nutzer als separate Cookie-Kategorie auf.

Synthetisches Monitoring

Ohne benutzerdefinierte Konfiguration messen die meisten synthetischen Tools (z. B. Lighthouse und WebPageTest) nur die Nutzererfahrung eines Erstnutzers, der nicht auf eine Cookie-Einwilligungserklärung reagiert hat. Bei der Erfassung von Leistungsdaten müssen jedoch nicht nur Abweichungen beim Cachestatus (z. B. bei einem ersten Besuch im Vergleich zu einem wiederholten Besuch) berücksichtigt werden, sondern auch Abweichungen beim Status der Cookie-Akzeptanz (akzeptiert, abgelehnt oder nicht beantwortet).

In den folgenden Abschnitten werden WebPageTest- und Lighthouse-Einstellungen beschrieben, die hilfreich sein können, um Cookie-Benachrichtigungen in Workflows zur Leistungsmessung einzubinden. Cookies und Cookie-Benachrichtigungen sind jedoch nur einer von vielen Faktoren, die in Lab-Umgebungen nur schwer perfekt simuliert werden können. Aus diesem Grund sollten Sie RUM-Daten anstelle von synthetischen Tools als Grundlage für Ihre Leistungsbewertung verwenden.

Scripting verwenden

Mithilfe von Scripts können Sie einen WebPageTest so konfigurieren, dass er beim Erfassen eines Protokolls auf das Banner zur Cookie-Einwilligung klickt.

Rufen Sie den Tab Script auf, um ein Script hinzuzufügen. Das folgende Script ruft die zu testende URL auf und klickt dann auf das DOM-Element mit der id=cookieButton.

combineSteps
navigate    %URL%
clickAndWait    id=cookieButton

Beachten Sie bei der Verwendung dieses Scripts Folgendes:

  • Mit combineSteps wird WebPageTest angewiesen, die Ergebnisse der folgenden Scripting-Schritte in einer einzigen Gruppe von Protokollen und Messungen zu „kombinieren“. Es kann auch nützlich sein, dieses Script ohne combineSteps auszuführen. Mit separaten Protokollen lässt sich leichter nachvollziehen, ob Ressourcen vor oder nach der Cookie-Akzeptanz geladen wurden.
  • %URL% ist eine WebPageTest-Konvention, die sich auf die getestete URL bezieht.
  • Mit clickAndWait wird WebPageTest angewiesen, auf das Element zu klicken, das durch attribute=value gekennzeichnet ist, und zu warten, bis die nachfolgende Browseraktivität abgeschlossen ist. Sie hat das Format clickAndWait attribute=Value.

Wenn Sie dieses Script richtig konfiguriert haben, sollte im Screenshot, der von WebPageTest aufgenommen wurde, keine Cookie-Benachrichtigung zu sehen sein (die Cookie-Benachrichtigung wurde akzeptiert).

Weitere Informationen zum Scripting in WebPageTest finden Sie in der WebPageTest-Dokumentation.

Cookies setzen

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

Das Feld „Benutzerdefinierte Header“ in WebPageTest

Testort ändern

Wenn Sie den von WebPageTest verwendeten Testort ändern möchten, klicken Sie auf dem Tab Erweiterte Tests auf das Drop-down-Menü Testort.