Cookie-Hinweise können sich erheblich auf die Seitenleistung auswirken, da sie in der Regel zu einem frühen Zeitpunkt des Seitenladevorgangs geladen werden, allen Benutzern angezeigt werden und möglicherweise das Laden von Anzeigen und anderen Seiteninhalten beeinflussen.
Hier erfahren Sie, wie sich Cookie-Hinweise auf Web Vitals-Metriken auswirken können:
Die bewährten Praktiken in diesem Abschnitt konzentrieren sich auf Cookie-Hinweise für Dritte. Einige, aber nicht alle dieser bewährten Verfahren sind auch auf Cookie-Hinweise für Erstanbieter anwendbar.
Wie bereits erwähnt, ist die Schaltfläche "Akzeptieren" häufig eine besondere Ursache für INP-Probleme, da beim Anklicken dieser Schaltfläche eine große Menge an Datenverarbeitung stattfindet.
Das Chrome-Team hat mit einer Reihe von Consent Management Platforms (CMP) zusammengearbeitet, um nach dem Anklicken der Schaltfläche Akzeptieren eine schnelle Bestätigung durch den Browser zu ermöglichen. Sehen Sie sich diese PubTech-Fallstudie als Beispiel an.
Wenn Ihre CMP davon betroffen ist, sollten Sie sich mit ihr in Verbindung setzen, um herauszufinden, ob sie auf ähnliche Weise INP-Probleme für Websites vermeiden kann, die sie einbetten. Im Artikel Optimize Long Tasks finden Sie eine Anleitung zur Ausbeutungstaktik.
Skripte für Cookie-Hinweise sollten asynchron geladen werden. Fügen Sie dazu das Attribut async zum Skript-Tag hinzu. Skripte, die nicht asynchron sind, blockieren den Browser-Parser.
<script src="https://cookie-notice.com/script.js" async>Hinweis: Wenn Sie synchrone Skripte verwenden müssen (z. B. sind einige Cookie-Hinweise auf synchrone Skripte angewiesen, um das Blockieren von Cookies zu implementieren), sollten Sie sicherstellen, dass diese Anfrage so schnell wie möglich geladen wird. Eine Möglichkeit, dies zu erreichen, ist die Verwendung von Ressourcen-Hinweisen.
Skripte für Cookie-Hinweise sollten "direkt" geladen werden, indem das Skript-Tag in den HTML-Code des Hauptdokuments eingefügt wird - und nicht durch einen Tag-Manager oder ein anderes Skript geladen werden. Die Verwendung eines Tag-Managers oder eines sekundären Skripts zum Einfügen des Skripts für den Cookie-Hinweis verzögert das Laden des Skripts für den Cookie-Hinweis: Es verdeckt das Skript vor dem Lookahead-Parser des Browsers und verhindert, dass das Skript vor der Ausführung von JavaScript geladen wird.
Alle Websites, die ihre Skripte für Cookie-Hinweise von einem Drittanbieter laden, sollten entweder die Ressourcenhinweise dns-prefetch oder preconnect verwenden, um eine frühzeitige Verbindung mit dem Ursprung herzustellen, der die Ressourcen für Cookie-Hinweise hostet.
<link rel="preconnect" href="https://cdn.cookie-notice.com/">Hinweis: Es ist üblich, dass Cookie-Hinweise Ressourcen von mehreren Ursprüngen laden, z. B. Ressourcen von www.cookie-notice.com und cdn.cookie-notice.com. Getrennte Ursprünge erfordern getrennte Verbindungen und daher getrennte Ressourcenhinweise.
Für einige Websites wäre es von Vorteil, wenn sie ihr Skript für Cookie-Hinweise mit dem Hinweis preload laden könnten. Der Preload-Hinweis informiert den Browser, eine frühzeitige Anfrage für die angegebene Ressource zu initiieren.
<link rel="preload" href="https://www.cookie-notice.com/cookie-script.js">
preload ist am leistungsfähigsten, wenn seine Verwendung auf den Abruf einiger wichtiger Ressourcen pro Seite beschränkt ist. Die Nützlichkeit des Vorladens des Skripts für den Cookie-Hinweis hängt also von der jeweiligen Situation ab.
Die Anpassung des Aussehens eines Cookie-Hinweises eines Drittanbieters kann zusätzliche Kosten für die Leistung mit sich bringen. Beispielsweise können Cookie-Hinweise von Drittanbietern nicht immer dieselben Ressourcen (z. B. Web-Schriftarten) wiederverwenden, die an anderer Stelle auf der Seite verwendet werden. Außerdem neigen die Cookie-Hinweise von Drittanbietern dazu, das Styling am Ende langer Anfrageketten zu laden. Um Überraschungen zu vermeiden, sollten Sie darauf achten, wie Ihr Cookie-Hinweis das Styling und die zugehörigen Ressourcen lädt und anwendet.
Dies sind einige der häufigsten Probleme mit Layoutverschiebungen im Zusammenhang mit Cookie-Hinweisen:
Diese Techniken sind aufwändiger zu implementieren, können aber das Laden von Skripten für Cookie-Hinweise weiter optimieren:
Cookie-Hinweise können sich auf Leistungsmessungen auswirken. In diesem Abschnitt werden einige dieser Auswirkungen und Techniken zu deren Abmilderung erörtert.
Einige Analyse- und RUM-Tools verwenden Cookies, um Leistungsdaten zu erfassen. Wenn ein Benutzer die Verwendung von Cookies ablehnt, können diese Tools keine Leistungsdaten erfassen.
Sites sollten sich dieses Phänomens bewusst sein; es lohnt sich auch, die Mechanismen zu verstehen, die Ihr RUM-Tooling zur Datenerfassung verwendet. Für die typische Website ist diese Diskrepanz jedoch wahrscheinlich kein Grund zur Beunruhigung, wenn man die Richtung und das Ausmaß der Datenverschiebung bedenkt. 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 Erfassung von Leistungsdaten verwendet (d. h. ob die Cookies personenbezogene Daten enthalten), und je nach 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. Werbe-Cookies. Einige Websites entscheiden sich dafür, Leistungs-Cookies als separate Cookie-Kategorie auszuweisen, wenn sie die Zustimmung der Nutzer einholen.
Ohne benutzerdefinierte Konfiguration messen die meisten synthetischen Tools (wie z. B. Lighthouse und WebPageTest) nur die Erfahrung eines Erstbenutzers, der nicht auf eine Cookie-Zustimmungsmeldung reagiert hat. Bei der Erfassung von Leistungsdaten müssen jedoch nicht nur Variationen im Cache-Zustand (z. B. ein Erstbesuch gegenüber einem wiederholten Besuch) berücksichtigt werden, sondern auch Variationen im Cookie-Zustand - akzeptiert, abgelehnt oder nicht beantwortet.
In den folgenden Abschnitten werden WebPageTest- und Lighthouse-Einstellungen besprochen, die bei der Einbeziehung von Cookie-Hinweisen in Leistungsmessungs-Workflows hilfreich sein können. Cookies und Cookie-Hinweise sind jedoch nur einer von vielen Faktoren, die sich in Laborumgebungen nur schwer perfekt simulieren lassen. Aus diesem Grund ist es wichtig, RUM-Daten zum Eckpfeiler Ihres Leistungs-Benchmarkings zu machen, anstatt synthetische Tools zu verwenden.
Sie können Skripte verwenden, damit ein WebPageTest das Cookie-Einwilligungsbanner "anklickt", während er eine Aufzeichnung erfasst.
Fügen Sie ein Skript hinzu, indem Sie auf die Registerkarte Skript gehen. Das folgende Skript navigiert zu der zu testenden URL und klickt dann auf das DOM-Element mit der id=cookieButton.
combineSteps
navigate %URL%
clickAndWait id=cookieButton
Wenn Sie dieses Skript verwenden, beachten Sie bitte Folgendes:
combineSteps weist WebPageTest an, die Ergebnisse der folgenden Skriptschritte in einem einzigen Satz von Spuren und Messungen zu "kombinieren". Die Ausführung dieses Skripts ohne combineSteps kann ebenfalls nützlich sein - getrennte Spuren machen es einfacher zu sehen, ob Ressourcen vor oder nach der Cookie-Akzeptanz geladen wurden.%URL% ist eine WebPageTest-Konvention, die sich auf die URL bezieht, die getestet wird.clickAndWait weist WebPageTest an, auf das durch attribute=value angegebene Element zu klicken und auf den Abschluss der anschließenden Browseraktivität zu warten. Es folgt das Format clickAndWait attribute=Value.
Wenn Sie dieses Skript richtig konfiguriert haben, sollte der von WebPageTest aufgenommene Screenshot keinen Cookie-Hinweis zeigen (der Cookie-Hinweis wurde akzeptiert).
Weitere Informationen über WebPageTest-Skripte finden Sie in der WebPageTest-Dokumentation.
Um WebPageTest mit einem gesetzten Cookie auszuführen, gehen Sie auf die Registerkarte Erweitert und fügen Sie die Cookie-Kopfzeile in das Feld Benutzerdefinierte Kopfzeilen ein:
Um den von WebPageTest verwendeten Testort zu ändern, klicken Sie auf der Registerkarte Erweiterte Tests auf die Dropdown-Liste Testort.
Das Setzen von Cookies bei einem Lighthouse-Lauf kann als Mechanismus dienen, um eine Seite in einen bestimmten Zustand zu versetzen, damit sie von Lighthouse getestet werden kann. Das Cookie-Verhalten von Lighthouse variiert leicht je nach Kontext (DevTools, CLI oder PageSpeed Insights).
Cookies werden nicht gelöscht, wenn Lighthouse von DevTools aus gestartet wird. Andere Speichertypen werden jedoch standardmäßig gelöscht. Dieses Verhalten kann mit der Option Speicher löschen im Lighthouse-Einstellungsfenster geändert werden.
Die Ausführung von Lighthouse über die Befehlszeilenschnittstelle verwendet eine neue Chrome-Instanz, so dass standardmäßig keine Cookies gesetzt sind. Um Lighthouse über die CLI mit einem bestimmten Cookie zu starten, verwenden Sie den folgenden Befehl:
lighthouse <url> --extra-headers "{\"Cookie\":\"cookie1=abc; cookie2=def; \_id=foo\"}"
Weitere Informationen zum Setzen von benutzerdefinierten Anfrage-Headern in Lighthouse CLI finden Sie unter Lighthouse auf authentifizierten Seiten ausführen.
Die Ausführung von Lighthouse über PageSpeed Insights verwendet eine neue Chrome-Instanz und setzt keine Cookies. PageSeed Insights kann nicht so konfiguriert werden, dass bestimmte Cookies gesetzt werden.
Die Benutzererfahrung (UX) verschiedener Cookie-Zustimmungshinweise ist in erster Linie das Ergebnis von zwei Entscheidungen: die Position des Cookie-Hinweises innerhalb der Seite und das Ausmaß, in dem der Benutzer die Verwendung von Cookies durch eine Website anpassen kann. In diesem Abschnitt werden mögliche Ansätze für diese beiden Entscheidungen erörtert.
Achtung! Die Benutzerfreundlichkeit von Cookie-Hinweisen wird oft stark von der Gesetzgebung beeinflusst, die je nach Land sehr unterschiedlich sein kann. Daher kann es sein, dass einige der in diesem Abschnitt erörterten Entwurfsmuster für Ihre spezielle Situation nicht relevant sind. Dieses Dokument sollte nicht als Ersatz für eine Rechtsberatung angesehen werden.
Wenn Sie über mögliche Designs für Ihren Cookie-Hinweis nachdenken, sollten Sie einige Dinge bedenken:
Cookie-Hinweise können als Kopfzeile, Inline-Element oder Fußzeile angezeigt werden. Sie können auch über dem Seiteninhalt in einem Modal angezeigt werden oder als Interstitial dienen.
Cookie-Hinweise werden in der Regel in der Kopf- oder Fußzeile platziert. Von diesen beiden Optionen ist die Platzierung in der Fußzeile im Allgemeinen vorzuziehen, da sie unaufdringlich ist, nicht mit Werbebannern oder Benachrichtigungen um Aufmerksamkeit konkurriert und in der Regel keine CLS verursacht. Darüber hinaus ist dies ein üblicher Ort für die Platzierung von Datenschutzrichtlinien und Nutzungsbedingungen.
Inline-Cookie-Hinweise sind zwar eine Option, lassen sich aber nur schwer in bestehende Benutzeroberflächen integrieren und sind daher unüblich.
Modals sind Cookie-Zustimmungshinweise, die oben auf dem Seiteninhalt angezeigt werden. Modals können je nach ihrer Größe ganz unterschiedlich aussehen und funktionieren.
Kleinere Modals, die nur teilweise auf dem Bildschirm angezeigt werden, können eine gute Alternative für Websites sein, die Schwierigkeiten haben, Cookie-Hinweise so zu implementieren, dass das Layout nicht verändert wird.
Andererseits sollten große Modals, die den Großteil des Seiteninhalts verdecken, mit Vorsicht eingesetzt werden. Insbesondere bei kleineren Websites kann es vorkommen, dass die Benutzer eher abspringen, als den Cookie-Hinweis einer unbekannten Website mit verdecktem Inhalt zu akzeptieren. Obwohl es sich nicht unbedingt um synonyme Konzepte handelt, sollten Sie, wenn Sie die Verwendung eines bildschirmfüllenden Modals zur Cookie-Zustimmung in Erwägung ziehen, die Gesetzgebung zu Cookie-Walls kennen.
Die Schnittstellen für den Cookie-Hinweis geben den Nutzern in unterschiedlichem Maße die Kontrolle darüber, welche Cookies sie akzeptieren.
Diese Cookie-Banner im Stil eines Hinweises bieten den Nutzern keine direkten UX-Kontrollen für die Ablehnung von Cookies. Stattdessen enthalten sie in der Regel einen Link zu den Cookie-Richtlinien der Website, der den Nutzern Informationen zur Verwaltung von Cookies über ihren Webbrowser bietet. Diese Hinweise enthalten in der Regel die Schaltflächen "Ablehnen" und "Akzeptieren".
Diese Cookie-Hinweise geben dem Nutzer die Möglichkeit, Cookies abzulehnen, unterstützen aber keine detaillierteren Kontrollen. Dieser Ansatz für Cookie-Hinweise ist weniger verbreitet.
Diese Cookie-Hinweise bieten den Nutzern eine genauere Kontrolle, um die von ihnen akzeptierte Cookie-Nutzung zu konfigurieren.
Einige Websites gehen jedoch noch einen Schritt weiter und erlauben es den Benutzern, sich für jedes einzelne Cookie zu entscheiden. Eine andere Möglichkeit, den Nutzern spezifischere Kontrollmöglichkeiten zu bieten, besteht darin, Cookie-Kategorien wie "Werbung" in spezifische Anwendungsfälle aufzuteilen, z. B. indem den Nutzern die Möglichkeit gegeben wird, sich separat für "einfache Werbung" und "personalisierte Werbung" zu entscheiden.
