Optimieren Sie Cookie-Hinweise für Leistung und Nutzerfreundlichkeit.
In diesem Dokument wird erläutert, wie sich Cookie-Hinweise auf die Leistung, Leistungsmessung und Nutzererfahrung auswirken können.
Leistung
Cookie-Hinweise können erhebliche Auswirkungen auf die Seitenleistung haben, da sie in der Regel früh beim Seitenaufbau 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 Einwilligungserklärungen für Cookies sind ziemlich klein und enthalten daher normalerweise kein LCP-Element einer Seite. Dies kann jedoch passieren, insbesondere auf Mobilgeräten. Auf Mobilgeräten nimmt ein Cookiehinweis in der Regel einen größeren Teil des Bildschirms ein. Dies geschieht normalerweise, wenn ein Cookie-Hinweis einen großen Textblock enthält (Textblöcke können auch LCP-Elemente sein).
Interaction to Next Paint (INP):Cookie-Hinweise können häufig eine Ursache für einen hohen INP-Wert sein, da in der Regel viele Skripts von Drittanbietern hinzugefügt werden, wenn sie akzeptiert werden. Das Hauptproblem ist oft die Interaktion Accept (Akzeptieren), da dies einen hohen Verarbeitungsaufwand zur Folge hat, um alle Drittanbieter-Skripts auf einmal hinzuzufügen. Im Abschnitt Best Practices unten erfahren Sie, wie Sie dieses Problem beheben können.
Cumulative Layout Shift (CLS):Einwilligungserklärungen für Cookies sind eine häufige Ursache von Layout Shifts.
Grundsätzlich gilt, dass sich ein Cookie-Hinweis von Drittanbietern stärker auf die Leistung auswirkt als ein selbst erstellter Cookie-Hinweis. Dies ist kein spezielles Problem für Cookie-Hinweise, sondern allgemein für Drittanbieter-Skripts.
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 Benachrichtigungen von Erstanbieter-Cookies.
INP-Auswirkungen von Cookie-Hinweisen
Wie bereits erwähnt, ist die Schaltfläche Akzeptieren eine häufige Ursache für INP-Probleme, da beim Anklicken sehr viel Verarbeitung erforderlich ist.
Das Chrome-Team hat mit einer Reihe von Plattformen zur Einwilligungsverwaltung (Consent Management Platforms, CMPs) zusammengearbeitet, um nach dem Klick auf „Akzeptieren“ nachzugeben, dass der Browser die Akzeptanz beim nächsten Mal schnell bestätigen kann. Sehen Sie sich als Beispiel diese PubTech-Fallstudie an.
Wenn Ihre CMP davon betroffen ist, fragen Sie nach, ob sie INP-Probleme auf Websites mit eingebetteten Websites vermeiden können. Im Artikel Lange Aufgaben optimieren finden Sie Informationen zur Umsetzung von Strategien.
Skripts für Cookie-Hinweise asynchron laden
Skripts für Cookie-Hinweise sollten asynchron geladen werden. Fügen Sie dazu das Attribut async in das Skript-Tag ein.
<script src="https://cookie-notice.com/script.js" async>
Nicht asynchrone Skripts blockieren den Browser-Parser. Dies verzögert das Laden der Seite und den LCP. Weitere Informationen finden Sie unter Effizientes Laden von Drittanbieter-JavaScript.
Skripts für Cookie-Hinweise direkt laden
Skripts für Cookie-Hinweise sollten "direkt" geladen werden, indem das Skript-Tag in den HTML-Code des Hauptdokuments eingefügt und nicht über einen Tag-Manager oder ein anderes Skript geladen wird. Wenn Sie einen Tag Manager oder ein sekundäres Skript verwenden, um das Skript für Cookie-Hinweise einzufügen, verzögert sich das Laden des Skripts für Cookie-Hinweise: Es verdeckt das Skript vom Lookahead-Parser des Browsers und verhindert, dass das Skript vor der JavaScript-Ausführung geladen wird.
Frühzeitige Verbindung zum Ursprung der Cookie-Benachrichtigungen herstellen
Alle Websites, die ihre Cookie-Hinweis-Skripts von einem Drittanbieterstandort laden, sollten entweder den Ressourcenhinweis dns-prefetch oder preconnect verwenden, um eine frühzeitige Verbindung zu dem Ursprung herzustellen, der Cookie-Hinweisressourcen 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/">
Cookie-Hinweise gegebenenfalls vorab laden
Einige Websites könnten vom Ressourcenhinweis preload profitieren, um ihr Cookie-Hinweisskript zu laden. Der Ressourcenhinweis preload informiert den Browser, eine frühe Anfrage für die angegebene Ressource zu starten.
<link rel="preload" href="https://www.cookie-notice.com/cookie-script.js">
preload ist am leistungsstärksten, wenn die Nutzung auf das Abrufen einiger Schlüsselressourcen pro Seite beschränkt ist. Ob das Skript für Cookie-Hinweise vorab geladen wird, hängt also von der jeweiligen Situation ab.
Leistungseinbußen beim Gestalten von Cookie-Hinweisen beachten
Das Anpassen des Designs von Drittanbieter-Cookie-Hinweisen kann zusätzliche Leistungskosten verursachen. So können beispielsweise Hinweise von Drittanbieter-Cookies nicht immer dieselben Ressourcen (z. B. Webschriftarten) verwenden, die an anderer Stelle auf der Seite verwendet werden. Außerdem werden Benachrichtigungen über Drittanbieter-Cookies eher zu einem Stil am Ende langer Anfrageketten. Um Überraschungen zu vermeiden, achten Sie darauf, wie die Cookie-Benachrichtigung geladen wird und Stile und zugehörige Ressourcen angewendet werden.
Layout Shifts vermeiden
Dies sind einige der häufigsten Probleme mit Layout Shifts im Zusammenhang mit Cookie-Hinweisen:
- Top-of-Screen-Cookie-Hinweise:Top-of-Screen-Cookie-Hinweise sind eine sehr häufige Ursache von Layout Shifts. Wenn ein Cookie-Hinweis in das DOM eingefügt wird, nachdem die umgebende Seite bereits gerendert wurde, werden die darunter liegenden Seitenelemente weiter nach unten verschoben. Diese Art von Layout Shift kann vermieden werden, indem Sie Platz im DOM für die Einwilligungserklärung reservieren. Wenn dies keine praktikable Lösung ist, z. B. wenn die Abmessungen Ihres Cookie-Hinweises je nach Region variieren, können Sie eine fixierte Fußzeile oder ein modales Fenster verwenden, um den Cookie-Hinweis anzuzeigen. Da bei beiden alternativen Ansätzen der Cookie-Hinweis als "Overlay" über dem Rest der Seite angezeigt wird, sollte der Cookie-Hinweis beim Laden keine Inhaltsverschiebungen verursachen.
- Animationen: Viele Cookie-Hinweise verwenden Animationen. Ein gängiges Designmuster ist beispielsweise das Einschieben eines Cookie-Hinweises. Je nachdem, wie diese Effekte implementiert werden, können sie Layout Shifts verursachen. Weitere Informationen finden Sie unter Layout Shifts beheben.
- Schriftarten: Zu spät geladene Schriftarten können das Rendern blockieren oder Layoutverschiebungen verursachen. Dieses Phänomen tritt bei langsamen Verbindungen deutlicher hervor.
Erweiterte Ladeoptimierungen
Die Implementierung dieser Techniken ist aufwendiger, kann aber das Laden von Skripts für Cookie-Hinweise weiter optimieren:
- Durch das Caching und Bereitstellen von Drittanbieter-Cookie-Hinweisskripts von Ihren eigenen Servern kann die Übermittlungsgeschwindigkeit dieser Ressourcen verbessert werden.
- Mit Dienst-Workern haben Sie mehr Kontrolle über das Abrufen und Caching von Skripts von Drittanbietern, z. B. Skripts für Cookie-Hinweise.
Leistungsmessung
Cookie-Hinweise können sich auf Leistungsmessungen auswirken. In diesem Abschnitt werden einige dieser Auswirkungen und Techniken zu ihrer Minderung erläutert.
Monitoring von echten Nutzern (Real User Monitoring, RUM)
Einige Analyse- und RUM-Tools verwenden Cookies, um Leistungsdaten zu erfassen. Falls 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 kennen, mit denen Ihre RUM-Tools Daten erfassen. Aufgrund der Richtung und des Ausmaßes der Datenverzerrung ist diese Abweichung bei einer typischen Website jedoch wahrscheinlich kein Grund zur Beunruhigung. 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 verwendet, um Leistungsdaten zu erheben (d. h., ob die Cookies personenbezogene Daten enthalten), und der betreffenden Gesetzgebung unterliegt die Verwendung von Cookies zur Leistungsmessung möglicherweise nicht denselben gesetzlichen Anforderungen wie einige der Cookies, die auf Ihrer Website für andere Zwecke verwendet werden, z. B. für Cookies für Anzeigenvorgaben. Manche Websites nutzen Performance-Cookies als separate Kategorie von Cookies, wenn sie die Nutzereinwilligung einholen.
Synthetisches Monitoring
Ohne benutzerdefinierte Konfiguration messen die meisten synthetischen Tools (z. B. Lighthouse und WebPageTest) nur die Erfahrung von Erstnutzern, die nicht auf eine Einwilligungserklärung für Cookies geantwortet haben. Beim Erfassen von Leistungsdaten müssen jedoch nicht nur Variationen des Cache-Status (z. B. ein erster Besuch im Vergleich zu einem wiederholten Besuch) berücksichtigt werden, sondern auch Variationen des Cookie-Akzeptanzstatus (akzeptiert, abgelehnt oder nicht beantwortet).
Cookie-Hinweise mit WebPageTest testen
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, die sich in Lab-Umgebungen nur schwer perfekt simulieren lassen. Aus diesem Grund ist es wichtig, RUM-Daten anstelle von synthetischen Tools zum Eckpfeiler Ihres Leistungs-Benchmarkings zu machen.
Scripting verwenden
Mithilfe von Skripts können Sie veranlassen, dass WebPageTest beim Erfassen eines Trace auf das Cookie-Einwilligungsbanner klickt.
Rufen Sie den Tab Skript auf, um ein Skript hinzuzufügen. Das folgende Skript ruft die URL auf, die getestet werden soll, und klickt dann auf das DOM-Element mit dem id=cookieButton.
combineSteps
navigate %URL%
clickAndWait id=cookieButton
Beachten Sie bei der Verwendung dieses Skripts Folgendes:
combineStepsweist WebPageTest an, die Ergebnisse der folgenden Skriptschritte in einem einzelnen Satz von Traces und Messungen zu "kombinieren". Es kann auch nützlich sein, dieses Skript ohnecombineStepsauszuführen. Durch separate Traces lässt sich leichter feststellen, ob Ressourcen vor oder nach der Annahme des Cookies geladen wurden.%URL%ist eine WebPageTest-Konvention, die auf die URL verweist, die getestet wird.clickAndWaitweist WebPageTest an, auf das mitattribute=valueangegebene Element zu klicken und zu warten, bis die nachfolgende Browseraktivität abgeschlossen ist. Sie hat das FormatclickAndWait attribute=Value.
Wenn Sie dieses Skript richtig konfiguriert haben, sollte der von WebPageTest aufgenommene Screenshot keinen Cookie-Hinweis enthalten (der Cookie-Hinweis wurde akzeptiert).
Weitere Informationen zum Erstellen von WebPageTest-Skripts finden Sie in der WebPageTest-Dokumentation.
Cookies setzen
Wenn Sie WebPageTest mit einem gesetzten Cookie ausführen möchten, rufen Sie den Tab Advanced (Erweitert) auf und fügen Sie den Cookie-Header dem Feld Custom header (Benutzerdefinierte Header) hinzu:
Testort ändern
Um den von WebPageTest verwendeten Testort zu ändern, klicken Sie auf dem Tab Erweiterte Tests auf das Drop-down-Menü Testort.
Cookie-Hinweise mit Lighthouse testen
Das Festlegen von Cookies bei einer Lighthouse-Ausführung kann als Mechanismus dienen, um eine Seite zum Testen durch Lighthouse in einen bestimmten Status zu bringen. Das Cookie-Verhalten von Lighthouse variiert je nach Kontext (Entwicklertools, Befehlszeile oder PageSpeed Insights) geringfügig.
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 Einstellungsbereich von Lighthouse die Option Speicher löschen verwenden.
CLI
Wenn Sie Lighthouse über die Befehlszeile ausführen, wird eine aktuelle Chrome-Instanz verwendet. Daher werden standardmäßig keine Cookies festgelegt. Verwenden Sie den folgenden Befehl, um Lighthouse über die Befehlszeile mit einer bestimmten Cookie-Gruppe auszuführen:
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 platziert. PageSeed Insights kann nicht zum Speichern bestimmter Cookies konfiguriert werden.
Nutzererfahrung
Die Nutzererfahrung mit verschiedenen Cookie-Einwilligungshinweisen beruht hauptsächlich auf zwei Entscheidungen: der Position 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.
Bei der Planung potenzieller Designs für Ihre Cookie-Benachrichtigung sollten Sie Folgendes bedenken:
- UX: Ist das eine gute User Experience? Wie wirkt sich dieses spezielle Design auf vorhandene Seitenelemente und User Flows
- Unternehmen: Wie sieht die Cookie-Strategie Ihrer Website aus? Was sind Ihre Ziele für den Cookie-Hinweis?
- Rechtlicher Hinweis: Entspricht dies den rechtlichen Erfordernissen?
- Ingenieurwesen: Wie viel Arbeit würde die Implementierung und Wartung erfordern? 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 mithilfe eines modalen Fensters oder als Interstitial auch über dem Seiteninhalt eingeblendet werden.
Hinweise zu Kopf- und Fußzeilen sowie zu Inline-Cookies
Cookie-Hinweise werden üblicherweise in der Kopf- oder Fußzeile platziert. Von diesen beiden Optionen ist die Platzierung der Fußzeile in der Regel die bessere Wahl, da sie unauffällig ist, nicht mit Banneranzeigen oder Benachrichtigungen um Aufmerksamkeit konkurriert und in der Regel keinen CLS verursacht. Darüber hinaus wird er häufig zum Platzieren von Datenschutzerklärungen und Nutzungsbedingungen verwendet.
Auch wenn Inline-Cookie-Hinweise eine Option sind, kann es schwierig sein, sie in bestehende Benutzeroberflächen zu integrieren, und daher eher selten sind.
Modale Dialoge
Modal sind eine Mitteilung zur Einwilligung der Nutzer in der EU, die über dem Seiteninhalt angezeigt wird. Modaler können je nach Größe sehr unterschiedlich aussehen und funktionieren.
Kleinere modale Fenster für den Teilbildschirm können eine gute Alternative für Websites sein, die Probleme damit haben, Cookie-Hinweise so zu implementieren, dass keine Layoutverschiebungen verursacht werden.
Große modale Fenster, die den Großteil des Seiteninhalts verdecken, sollten hingegen mit Bedacht eingesetzt werden. Insbesondere bei kleineren Websites kann es vorkommen, dass Nutzer abspringen, statt den Cookie-Hinweis einer unbekannten Website mit verborgenem Inhalt zu akzeptieren. Auch wenn es sich nicht unbedingt um Synonyme handelt, sollten Sie sich über die Gesetzgebung zu Cookie-Blockierungen informieren, wenn Sie ein Vollbild-Modaldialogfeld für die Cookie-Einwilligung verwenden möchten.
Konfigurierbarkeit
Benutzeroberflächen für Cookies können auf unterschiedliche Weise steuern, welche Cookies sie akzeptieren.
Keine Konfigurierbarkeit
Diese Cookie-Banner im Hinweisstil bieten Nutzern keine direkte UX-Steuerung zum Deaktivieren von Cookies. Stattdessen enthalten sie in der Regel einen Link zur Cookierichtlinie der Website, über die Nutzer Informationen zur Verwaltung von Cookies über ihren Webbrowser erhalten können. Diese Hinweise umfassen in der Regel die Schaltflächen "Schließen" und "Akzeptieren".
Eine gewisse Konfigurierbarkeit
Mit diesen Cookie-Hinweisen kann der Nutzer Cookies ablehnen, es werden jedoch keine detaillierteren Steuerungsmöglichkeiten unterstützt. Dieser Ansatz für Cookie-Hinweise ist weniger üblich.
Vollständige Konfiguration
Diese Cookie-Hinweise bieten Nutzern genauere Kontrollen zur Konfiguration der Cookie-Nutzung, die sie akzeptieren.
UX: Steuerelemente zum Konfigurieren der Cookie-Nutzung werden in der Regel mit einem separaten modalen Fenster angezeigt, das gestartet wird, wenn der Nutzer auf die ursprüngliche Cookie-Einwilligungserklärung antwortet. Sofern der Platz es zulässt, werden auf einigen Websites diese Einstellungen jedoch inline in der ersten Cookie-Einwilligungserklärung angezeigt.
Detaillierungsgrad:Der gängigste Ansatz zur Konfiguration von Cookies besteht darin, Nutzern das Aktivieren von Cookies nach Cookie-Kategorie zu ermöglichen. Beispiele für gängige Cookie-Kategorien sind Cookies für Funktionalität, Ausrichtung und soziale Medien.
Einige Websites gehen jedoch noch einen Schritt weiter und ermöglichen Nutzern die Aktivierung pro Cookie. Alternativ können Sie Nutzern auch spezifischere Steuerungsmöglichkeiten zur Verfügung stellen, indem Sie Cookie-Kategorien wie „Werbung“ in bestimmte Anwendungsfälle unterteilen. So können Nutzer beispielsweise „grundlegende Anzeigen“ und „personalisierte Anzeigen“ separat aktivieren.
