Die drei Arten, wie ein Banner Sie kostet
Core Web Vitals sind drei Zahlen: Largest Contentful Paint, wie lange es dauert, bis das größte Element auf dem Bildschirm gezeichnet ist; Cumulative Layout Shift, wie stark sich die Seite beim Laden bewegt; Interaction to Next Paint, wie lange die Seite braucht, um auf einen Klick zu reagieren. Ein Consent-Banner kann jede davon verschlechtern, aber über drei verschiedene Mechanismen, und die Volksweisheit („Banner sind langsam“) verbirgt, welcher bei Ihnen zuschlägt.
LCP: das blockierende Bundle
Der erste Mechanismus ist der, über den Performance-Ingenieure am meisten schreiben. Viele Consent-Manager liefern ein großes Skript, synchron im Head geladen, das heruntergeladen und ausgeführt werden muss, bevor der Browser die Seite weiter parst. DebugBears Analyse beliebter CMPs zeigt Fälle, in denen das Banner-Skript LCP von etwa 1,4 Sekunden auf 3,6 treibt und Zehntausende DOM-Knoten einfügt. Ein zweites, leiseres LCP-Problem: Ist das Banner das größte Element im Viewport eines Mobilbildschirms, wird es zum LCP-Element, und seine eigene Renderzeit ist Ihr Score.
Die Lösung für das Erste ist architektonisch: Die Runtime muss klein sein und darf das Parsen nicht blockieren. Die Lösung für das Zweite ist Design: ein Banner, das eine Leiste oder eine Eckkarte ist statt eines Vollbild-Modals, beim ersten Besuch, auf dem Handy.
CLS: das späte Banner
Der zweite Mechanismus ist Layout-Verschiebung, und sie ist fast immer selbst verschuldet. Ein Banner, das nach dem ersten Paint eingefügt wird und den Seiteninhalt nach unten drückt, erzeugt eine Verschiebung in Höhe seiner eigenen Höhe, was auf dem Handy den Großteil des CLS-Budgets von 0,1 ausmacht. Banner, die über den Inhalt hereingleiten, verschieben nichts; Banner, die sich in den Fluss einfügen, schon. Die Lösung ist, den Platz vor dem Paint zu reservieren oder zu überlagern statt einzufügen.
INP: der Schub beim Klick
Der dritte Mechanismus ist der neueste und am wenigsten diskutierte. INP misst die Verzögerung zwischen einer Interaktion und dem nächsten Frame. Der Klick, der auf einer consent-verwalteten Website am meisten wehtut, ist „Alle akzeptieren“: In diesem Moment gibt das Banner jedes gesperrte Skript auf einmal frei, und ein Dutzend Tags kämpfen um den Main-Thread, während die Seite versucht, das Schließen des Banners zu zeichnen. SpeedCurves Bericht über Consent-Manager nennt das als die häufigste INP-Regression, die sie sehen. Das Banner hat sie nicht verursacht; die Tags haben es, aber das Banner hat sie eingeplant.
Die Lösung ist Scheduling. Freigegebene Skripte sollten in Dokumentreihenfolge laufen, mit Pausen dazwischen, abseits des kritischen Pfads der Interaktion, damit das Banner zuerst schließt und die Tracker folgen.
Wie die CookieCrumbs-Runtime gebaut ist
- 21 kB gzippt, eine Datei. Asynchron geladen mit langer Cache-Lebensdauer, von unserer eigenen Domain. Sie installiert ihren Interceptor synchron in ein paar hundert Bytes Inline-Logik und holt alles Weitere danach, sodass nichts das Parsen blockiert und nichts läuft, bevor der Interceptor existiert.
- Keine eigenen Drittanfragen. Kein Webfont, kein Icon-Set, keine Analyse des Banners. Die Schrift kommt vom System oder von Ihrer Seite.
- Platz vor dem Paint reserviert. Die Leisten- und Ribbon-Layouts polstern das Dokument um ihre eigene Höhe, solange sie sichtbar sind, an welcher Kante auch immer sie sitzen, sodass sich nichts bewegt. Gemessener CLS-Beitrag: 0,00.
- Freigabe der Reihe nach, mit Pausen. Bei Einwilligung werden gesperrte Skripte in Dokumentreihenfolge mit einer Pause dazwischen neu erzeugt, sodass der Klick abgeschlossen ist, bevor die Tracker laufen.
- Nicht das LCP-Element. Die Standard-Layouts sind so dimensioniert, dass Ihr Inhalt, nicht das Banner, der größte Paint auf dem Handy ist.
Wie Sie Ihr eigenes messen
- Lassen Sie PageSpeed Insights auf einer Seite mit sichtbarem Banner laufen (frisches Profil, kein Consent-Cookie). Lesen Sie die Felddaten, falls vorhanden; Labordaten reichen für den Anfang.
- Prüfen Sie in der LCP-Diagnose, welches Element das LCP-Element ist. Ist es das Banner, ändern Sie das Layout.
- Suchen Sie in der CLS-Diagnose nach einer Verschiebung im Moment des Banner-Erscheinens. Gibt es eine, fügt sich das Banner in den Fluss ein.
- Zeichnen Sie einen Performance-Trace auf, klicken Sie auf „Alle akzeptieren“ und lesen Sie die folgenden Long Tasks. Das sind Ihre INP-Kosten, und sie gehören den Tags, die Sie freigegeben haben.
- Vergleichen Sie im Netzwerk-Panel die Übertragungsgröße des Banner-Skripts und ob es render-blockierend ist. Unter 30 kB und asynchron ist das Ziel.
Dann starten Sie den kostenlosen Scan: Er sagt Ihnen, wie viele Tracker bei diesem Klick freigegeben werden, und das ist die Zahl, die INP interessiert.
Quellen
- DebugBear, „Cookie consent banners, page speed, and Core Web Vitals“
- SpeedCurve, „Five ways cookie consent managers hurt web performance (and how to fix them)“
- Termly, „How to optimize your cookie banner for Core Web Vitals“
- Google, web.dev Core-Web-Vitals-Schwellenwerte (LCP 2,5 s, CLS 0,1, INP 200 ms)
- CookieCrumbs, Banner-Abschnitt (21 kB, CLS 0,00)