Cookie-Leisten und Webgeschwindigkeit

Cookie-Leisten, die ohne Geschwindigkeitsoptimierungen implementiert werden, stellen eine ernsthafte Bedrohung für die Geschwindigkeit und somit auch für die Web Vitals-Metriken dar. In diesem Artikel teilen wir die Erfahrungen, die wir bei der Arbeit mit unseren Kunden gesammelt haben.

Sie wissen wahrscheinlich, dass Cookie-Leisten (auch „CMP-Leisten“ genannt) aufgrund gesetzlicher Änderungen auf den meisten Websites Pflicht sein werden. Wir werden uns nicht mit der Gesetzgebung (das hat Petra Dolejšová behandelt) oder dem Design (das hat Ondřej Ilinčev analysiert) befassen, sondern uns darauf konzentrieren, wie Sie die Geschwindigkeit nicht durch die Implementierung ruinieren.

Zuerst zeigen wir Ihnen den Champion. Die schlechteste mögliche Cookie-Leiste, die Ihre Metriken garantiert zerstören wird.

Das ist er, der Champion der Webgeschwindigkeitszerstörung! Fünf Sekunden passiert nichts. Dann beginnt die Leiste sehr langsam den Inhalt zu verschieben. Und dann noch mehr, weil ein wirklich großes Bild darin gerendert wird.

Warum ist das aus Geschwindigkeitssicht sehr schlecht? Denken Sie einen Moment nach, Sie werden sicher darauf kommen.

Haben Sie es?

Dies sind die wichtigsten Probleme, die diese Leiste verursacht:

1. Sie wird zu spät geladen, wenn der Nutzer bereits den Seiteninhalt konsumieren kann.
2. Die Verschiebung verschlechtert die CLS-Metrik und das in diesem Fall sehr drastisch. Die Metrik würde allein durch die Cookie-Leiste auf mehr als das Fünffache des maximal zulässigen Werts steigen.
3. Im letzten Schritt wird in der Cookie-Leiste ein Bild gerendert. Idealerweise etwas später als die Leiste selbst, schlecht optimiert und größer als jedes andere Element auf der Seite. Wir haben hier also ideale Bedingungen, um die LCP-Metrik zu zerstören.

Diese Meister der Geschwindigkeitszerstörung sind im Web zahlreich. Und wie Sie richtig vermutet haben, müssen es nicht unbedingt Cookie-Leisten sein...

Schauen wir uns nun die spezifischen Schmerzen an, die Cookie-Leisten den Metriken zufügen können.

LCP-Metrik: So schnell wie möglich rendern#

Unter Entwicklern hat sich der Mythos verbreitet, dass das Rendern von Inhalten wie Cookie-Leisten so weit wie möglich verschoben werden sollte. Schließlich handelt es sich nicht um den Hauptinhalt der Seite.

Das ist einer der großen Fehler, die Sie bei der Implementierung von Leisten machen können. Die Cookie-Leiste ist aus Sicht des Nutzers der Haupt- und wichtigste Inhalt. Im Idealfall sollte er sie zuerst lesen, akzeptieren und dann erst auf Ihre Website zugreifen.

Und außerdem – wenn es Ihnen gelungen ist, die Leiste so zu gestalten, dass sie große Elemente (lange Texte oder Bilder) enthält, kann sie zum LCP-Element werden, nach dessen Rendern die Largest Contentful Paint-Metrik berechnet wird.

Durch das Verschieben der Leiste können Sie also auch die LCP-Metrik verschieben.

Schauen Sie sich das Bild unten an, dort sind zwei Websites. Beide sind groß und technisch komplex. Für ihre Entwickler ist es problematisch, die Cookie-Leiste rechtzeitig zu rendern, obwohl sie einiges dafür getan haben. Wie sieht das aus der Sicht eines Nutzers mit langsamer Verbindung aus?

In beiden Fällen wird die LCP-Metrik aus dem Inhalt der Leiste berechnet. Im ersten Fall erscheint die Leiste später als das Layout der Website und dann muss leider noch auf das Herunterladen des Bildes gewartet werden.

Die zweite Variante ist etwas besser. Bevor die Leiste geladen wird, ist bei langsamen Verbindungen ein Skeleton zu sehen, das Platz für das Rendern des Leisteninhalts freihält.

Mehr Informationen dazu, wie Sie Platz für Komponenten freihalten, finden Sie in diesem Artikel.

CLS-Metrik: Nichts verschieben, nichts animieren#

Sie wissen vermutlich bereits, dass die Cumulative Layout Shift-Metrik durch unerwünschte Verschiebungen des Inhalts verschlechtert wird. Im eingangs erwähnten Beispiel einer wirklich schlechten Leiste haben wir die größten Probleme gesehen, die Sie der CLS-Metrik (und den Nutzern) durch schlechtes Design oder Implementierung zufügen können.

Im Kontext von CLS sollten Sie auch auf spezielle Lösungen achten. Bei einem unserer Kunden verschlechterte die Implementierung von Google Funding Choices beispielsweise diese Metrik um das Dreifache:

Wir haben überprüft, dass dies auf den Benutzerdaten (Web Vitals aus dem Chrome UX-Report) nicht so große Auswirkungen hatte. Dennoch ist es definitiv eine Warnung vor der blinden Implementierung fremder Lösungen.

Testen Sie. Und messen Sie, messen Sie und messen Sie. Zum Beispiel in unserem Webgeschwindigkeitstest.

Bei CLS sollten Sie auch auf Animationen achten. Sie wissen wahrscheinlich, dass richtig animiert werden muss, also mit CSS-Eigenschaften wie Transform. Allerdings – wenn in einigen Lösungen die Animationen aktiviert bleiben, sind sie schlecht gemacht und verschlechtern Ihr CLS. Hier könnten wir als schlechtes Beispiel die Lösung OneTrust (früher Optanon) nennen.

INP/TBT: Messen Sie die Auswirkungen auf die Browserleistung#

Die „JavaScript“-Metrik Interaction to Next Paint (oder Total Blocking Time bei synthetischen Messungen) wird durch Cookie-Leisten selten verschlechtert. Aber selbst hier finden wir Ausnahmen.

Achten Sie in dieser Hinsicht auf die Lösung Didomi, die auf einem langsameren Mobilgerät den Hauptprozessor des Browsers auf das Vierfache des Werts von Google Analytics blockieren kann. Bei normalen Websites ist das nur etwas ärgerlich, aber bei Websites, bei denen die Rendering-Auslastung bereits durch fremde JS größer ist (Inhaltsseiten mit Werbung), kann dies für die Nutzer eine Verschlechterung der INP darstellen.

Hinweise zur Messung#

Wir stoßen oft auf die Meinung, dass Drittanbieter-Komponenten nicht in die Geschwindigkeitsmessung einbezogen werden sollten, da die Entwickler dafür nicht verantwortlich sind.

Doch der Nutzer sieht die Website nicht ohne Third-Party-Komponenten und web.dev über Third-Party-JS. Es bleibt nichts anderes übrig, als sich mit der Cookie-Leiste und anderen Drittanbietern abzufinden und einfach den realen Zustand zu messen.

Bei der Cookie-Leiste gibt es jedoch eine spezielle Situation: Ein Teil der Nutzer sieht die Website mit ihr und ein Teil ohne sie. Daher empfehlen wir, beide Varianten zu testen.

Im Bild ist die SpeedCurve-Einstellung für Livesport zu sehen, wo wir nur die Startseite mit Cookie-Leiste testen. Technisch wird dies mit WebpageTest-Scripting gelöst. Sie können ein ähnliches Setup z.B. mit Lighthouse User Flows erstellen.

Empfehlungen für Ihre Implementierung#

Fassen wir zusammen:

1. Laden Sie die Cookie-Leiste so früh wie möglich.
2. Vermeiden Sie, wenn möglich, große Elemente darin, die LCP-Elemente sein könnten.
3. Achten Sie auf Animationen und das Herunterfahren der Leiste von oben.
4. Testen Sie die Geschwindigkeitsauswirkungen der ausgewählten Lösungen.
5. Messen Sie die Auswirkungen auf die Geschwindigkeit mit oder ohne Cookie-Leiste.

Video zum Abschluss#

Wenn Sie das gesprochene Wort bevorzugen, ist eine Aufzeichnung des Webinars von Pavel Ungr über Cookie-Leisten verfügbar.

Selbstverständlich können wir Ihnen mit der Implementierung und Optimierung im Rahmen einiger Stunden Beratung helfen, kontaktieren Sie uns bei Bedarf unter: martin.michalek@pagespeed.cz.

Wir wünschen Ihnen schnelle Websites! Auch mit Cookie-Leiste.