PubConsent CMP reduziert den INP-Wert seiner Kunden um bis zu 64% mit einer Ertragsstrategie, bei der mithilfe der Scheduler APIs des Browsers Reaktionsprobleme behoben werden, die mit den Chrome-Entwicklertools identifiziert wurden.
Plattformen zur Einwilligungsverwaltung (Consent Management Platforms, CMPs) sind Tools, die Websites dabei unterstützen, Datenschutzbestimmungen einzuhalten, indem sie die Nutzereinwilligung zur Verwendung von Cookies und Tracking-Technologien einholen. Zusätzlich zum Hauptziel der Einhaltung gesetzlicher Vorschriften müssen CMPs als Drittanbieterskripts auch minimale Auswirkungen auf die Leistung und die Nutzerfreundlichkeit haben.
PubConsent CMP ist das neueste Produkt von PubTech. PubConsent CMP wurde mit dem Schwerpunkt auf Leistung entwickelt und ist so schlank, dass eine optimale Nutzererfahrung und die Auswirkungen auf die Gesamtleistung der Website minimiert werden.
Mit der Einführung des Messwerts Interaction to Next Paint (INP) konnte PubTech Probleme mit der Reaktionsschnelligkeit unserer CMP erkennen. In dieser Fallstudie zeigt PubTech, wie es seine Probleme mit der Reaktionsschnelligkeit seiner PubConsent-CMP-Plattform gelöst hat und wie das INP verbessert wurde, bevor es im März 2024 zu einem der Core Web Vitals wurde. Das zeigt, dass das Unternehmen unerschütterlich bemüht ist, die bestmögliche Leistung in einem CMP-Produkt zu bieten.
Warum ist PubTech die Leistung wichtig?
Wie die meisten CMPs bietet PubConsent-CMP die Funktionen zur Einwilligungsverwaltung als Drittanbieterskript auf den Seiten der Website ein. Für eine erfolgreiche CMP-Integration ist es wichtig, die Auswirkungen unseres CMP-Angebots auf die Leistung zu minimieren, einschließlich der Reaktionszeit.
Indem Websiteinhaber die Leistung priorisieren und das CMP-Script von PubConsent schlank halten, können Websiteinhaber*innen ein ausgewogenes Verhältnis zwischen der Einbindung nützlicher Funktionen zur Einwilligungsverwaltung bei gleichzeitiger Wahrung der Nutzerfreundlichkeit finden.
Aufgrund der Bedeutung der Funktionalität und der möglichen Auswirkungen einer CMP auf die Leistung hat PubTech die folgenden Ziele festgelegt:
- Minimieren Sie die Auswirkungen des PubConsent-CMP-Produkts auf INP.
- Reduzieren Sie lange auf das CMP-Produkt zurückzuführende Aufgaben.
- Verringern Sie die Total Blocking Time (TBT), was sich negativ auf den INP einer Seite auswirken kann.
So wurde INP gemessen
PubTech führte eine erste Analyse mit den Chrome-Entwicklertools durch und diagnostizierte langsame Interaktionen manuell. Dieser Workflow ermöglichte es PubTech, spezifische Probleme zu ermitteln, die sich auf die Reaktionszeit von Seiten auswirkten. Eine Klickinteraktion innerhalb der CMP, bei der alle Cookies akzeptiert und anschließend der Dialog zur Cookie-Einwilligung geschlossen wird, verursachte eine lange Aufgabe, die ein Rendering-Update der Benutzeroberfläche verzögerte. Wie Sie in der folgenden Abbildung sehen können, wurde die Benutzeroberfläche erst aktualisiert, um anzuzeigen, dass das Dialogfeld erst geschlossen war, nachdem die lange Aufgabe abgeschlossen war.
Wie die Schaltfläche zum Akzeptieren aller Cookies folgt auch die Schaltfläche zum Ablehnen aller Cookies oder Anpassen der Cookie-Einstellungen dem gleichen Workflow in der PubConsent-CMP-Architektur. Aus diesem Grund wirkten sich die in dieser Fallstudie beschriebenen Verbesserungen auf eine Reihe von Nutzerinteraktionen in der CMP aus.
Diese Verzögerung führte dazu, dass das Panel während der Aufgabe visuell gesperrt war. Da das Rendering-Update für einen deutlich langen Zeitraum blockiert wurde, wirkte sich dies negativ auf die INP der Seite aus.
So hat PubTech INP für Schaltflächen und Links optimiert
Zur Verbesserung des INP wurden verschiedene Ertragsstrategien in die PubConsent-CMP eingeführt.
Ergeben von Aufgaben mit hoher Priorität
Die im folgenden Code-Snippet gezeigte Methode yieldToMainUiBlocking wurde entwickelt, um JavaScript-Aufgaben mit hoher Priorität zu optimieren. Dazu wird mit scheduler.yield (sofern verfügbar) zurückgegeben, aber bei Verfügbarkeit von postTask auf postTask mit der Priorität user-blocking (hohe Priorität) und schließlich auf nichts zurückgesetzt.
setTimeout wurde hier vermieden, weil die yieldToMainUiBlocking-Methode für interne CMP-Einstellungsvorgänge und Aufgaben mit hoher Priorität vorgesehen ist, die diese Priorität beim Ertrag beibehalten sollen. Das bedeutet, dass nur Browser mit diesen Planungs-APIs – die zum Zeitpunkt der Erstellung dieses Dokuments nur in Chromium-basierten Browsern verfügbar waren – von den in dieser Fallstudie beschriebenen Verbesserungen profitieren. Dennoch wurde dieser Ansatz als akzeptable progressive Verbesserung für diese Aufgaben mit hoher Priorität angesehen.
function yieldToMainUiBlocking () {
return new Promise((resolve) => {
if ('scheduler' in window) {
if ('yield' in window.scheduler) {
return window.scheduler.yield().then(() => resolve(true));
}
if ('postTask' in window.scheduler) {
return window.scheduler.postTask(() => resolve(true), { priority: 'user-blocking' });
}
}
resolve(false);
});
};
Erzielt bei Aufgaben mit mittlerer und im Hintergrund erledigter Aufgaben
Die im folgenden Code-Snippet gezeigte Methode yieldToMainBackground wird verwendet, um lange Aufgaben mit der Priorität user-visible (mittel) oder background aufzuteilen. Die Logik implementiert scheduler.yield(), wenn es verfügbar ist, unterscheidet sich jedoch dadurch, dass postTask mit mittlerer Priorität verwendet wird und schließlich in Nicht-Chromium-Browsern auf setTimeout zurückfällt.
function yieldToMainBackground () {
return new Promise((resolve) => {
if ('scheduler' in window) {
if ('yield' in window.scheduler) {
return window.scheduler.yield().then(() => resolve(true));
}
if ('postTask' in window.scheduler) {
return window.scheduler.postTask(() => resolve(true), { priority: 'user-visible' });
}
}
setTimeout(() => { resolve(true) }, 0);
});
};
yieldToMainBackground den nächsten Paint (in diesem Fall die CMP-UI schließen) schneller rendern kann.
Wie PubTech seine TBT durch Rendering-Layoutoptimierung weiter reduziert hat
Nach Anwendung der Ertragsstrategie stellte sich heraus, dass sich INP für die CMP deutlich verbessert hatte. Nachdem die Verarbeitungsdauer des Event-Handlers erheblich verkürzt wurde, gab es die Möglichkeit, das Rendering für das nächste Painting für die Aktion UI schließen weiter zu verbessern. Diese Aktion wurde ursprünglich zum Entfernen von Elementen aus dem DOM entwickelt. Dies stellte vor allem auf Websites mit einer großen Anzahl von DOM-Knoten Herausforderungen mit sich, was zu einem unerwarteten Anstieg der Rendering-Arbeit führte.
Um dem erhöhten Rendering-Arbeitsaufwand zum Entfernen von Elementen aus dem DOM entgegenzuwirken, wurde eine Lösung eingeführt, die das Team als „Lazy De-Rendering“ nannte. Bei diesem Ansatz wird zuerst die CSS-Regel display: none auf das Einwilligungsdialogfeld der CMP angewendet, nachdem der Nutzer seine Einwilligung zum Ausblenden erteilt hat. Dann werden die mit dem CMP-Dialogfeld verknüpften DOM-Knoten mithilfe von requestIdleCallback auf einen späteren Zeitpunkt verschoben, zu dem der Browser inaktiv ist. Dieser Ansatz erwies sich als viel schneller als das Entfernen von DOM-Knoten zu dem Zeitpunkt, an dem der Nutzer den Dialog zur Einholung von Einwilligungen geschlossen hat.
Wie PubTech den INP durch Verbesserung der IAB TCF-Bibliothek weiter reduziert hat
Nachdem die meisten Probleme im Zusammenhang mit der Reaktionszeit der CMP behoben wurden, wurden in einer der Hauptabhängigkeiten weitere Verbesserungsmöglichkeiten identifiziert: die Bibliothek des IAB Transparency and Consent Framework (TCF).
Die rechenintensivsten Komponenten dieser Bibliothek waren „Strings erstellen“ und „Einwilligung senden“. Diese Komponenten sind wesentliche Bestandteile der IAB TCF-Bibliothek. Die folgenden Optimierungen für diese Komponenten wurden in einer separaten Verzweigung speziell für die Anforderungen von PubTech angewendet:
- Wiederverwendung berechneter Ergebnisse für den Decodierungsprozess, der für jeden Drittanbieter-Callback ausgeführt wird, der die Einwilligung des Nutzers lesen muss
- Unnötige Schleifen im Codierungsprozess für Publisher-Einschränkungen, der ausgeführt wird, wenn der Nutzer seine Einwilligung erteilt, wurden vermieden und es werden unnötige Schleifen vermieden.
Mit der ersten dieser Optimierungen reduziert die CMP die Zeit, die die CMP für jeden Drittanbieter-Callback aufwendet, der in die IAB TCF-Bibliothek eingebunden wird. Durch die zweite Optimierung wurde die Verarbeitungsdauer für die Komponente zum Erstellen von Strings reduziert. Durch diese Optimierung konnten bis zu 60% der Schleifen reduziert werden, die jedes Mal ausgeführt werden, wenn ein Nutzer seine Einwilligung erteilt hat.
Ergebnisse
Mit den bisherigen Strategien und neuen Rendering-Layouts konnte der INP-Wert der CMP um bis zu 65%gesteigert werden. Das Ergebnis: Die Nutzerfreundlichkeit der PubConsent-CMP konnte erheblich verbessert werden.Bei einigen Anzeigen konnte die Sichtbarkeit sogar um 1,5% verbessert werden, indem bei der Anzeigenanforderung eine Optimierung vorgenommen wurde.
Zusätzlich zu diesen Verbesserungen konnte in der TCF-Bibliothek des IAB festgestellt werden, dass INP bei betroffenen Kunden um bis zu 77% verbessert wurde, da die durch das TCF ausgelösten langen Aufgaben um bis zu 85 % reduziert wurden. Dadurch konnte der Aufwand für Drittanbieter-Callbacks erheblich reduziert werden, die während des gesamten Lebenszyklus einer Seite ausgeführt werden.
Die Anzahl der Quellen, die INP bestehen, wenn sie PubConsent-CMP nutzten, verbesserte sich um mehr als 400%, von 13% auf 55% auf Mobilgeräten. Bei einigen Kunden konnte die Page INP durch die PubTech SDK-Optimierungen um mehr als die Hälfte reduziert werden – von 470 Millisekunden auf 230 Millisekunden.
Fazit
Die Kunden von PubTech haben schon schnell die positiven Ergebnisse der INP-Leistung und der Geschäftsmetriken erkannt, die sich aus unseren Optimierungsmaßnahmen ergeben haben. Weitere Leistungsverbesserungen für die PubConsent-CMP werden in Betracht gezogen und es werden wertvolle RUM-Daten (Real User Monitoring) ihrer Kunden genutzt. Diese Daten verfolgen sowohl Regressionen als auch Fortschritte genau und fördern die kontinuierlichen Verbesserungsmaßnahmen von PubTech.
Als Drittanbieter erkannte PubTech auch, dass es die Möglichkeit bietet, die Webleistung in großem Maßstab zu verbessern und schneller reagieren zu können, ohne negative Auswirkungen auf die geschäftlichen KPIs zu vermeiden. Für diese Verbesserungen ist es nie zu spät!
Unser besonderer Dank geht an Luca Coppola, CTO bei PubTech zur Unterstützung dieser Innovationsarbeit, sowie an Jeremy Wagner, Michal Mocny und Rick Viscomi von Google.