PubConsent CMP konnte den INP-Wert seiner Kunden um bis zu 64% reduzieren, indem er eine Ertragsstrategie nutzte, bei der mithilfe der Scheduler APIs des Browsers Reaktionsprobleme behoben werden, die mithilfe der 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. Neben dem primären Ziel, die Einhaltung von Rechtsvorschriften sicherzustellen, müssen CMPs wie Drittanbieter-Skripts auch dafür sorgen, dass die Auswirkungen auf Leistung und Nutzerfreundlichkeit minimal sind.
PubConsent CMP ist das neueste Produkt von PubTech. PubConsent CMP wurde mit Schwerpunkt auf Leistung entwickelt und ist schlank, sodass eine optimale Nutzererfahrung und minimale Auswirkungen auf die Gesamtleistung der Website gewährleistet werden können.
Durch die Einführung des Messwerts Interaction to Next Paint (INP) konnte PubTech Probleme mit der Reaktionsfähigkeit unserer CMP ermitteln. In dieser Fallstudie zeigt PubTech, wie das Unternehmen seine Probleme mit der Reaktionsfähigkeit in der CMP-Plattform PubConsent gelöst und INP verbessert hat, bevor es im März 2024 zu einem der Core Web Vitals wurde. Dies zeigt ein unermüdliches Engagement für die bestmögliche Leistung in einem CMP-Produkt.
Warum ist PubTech die Leistung wichtig?
Wie bei den meisten CMPs bietet auch die PubConsent-CMP ihre Funktionen zur Einwilligungsverwaltung als Drittanbieter-Script auf den Seiten der Website an. Für eine erfolgreiche CMP-Integration ist es entscheidend, die Auswirkungen auf die Leistung unseres CMP-Angebots zu minimieren, einschließlich der Reaktionszeiten.
Wenn Websiteinhaber die Leistung priorisieren und das CMP-Script „PubConsent“ beibehalten, können Websiteinhaber wertvolle Funktionen zur Einwilligungsverwaltung einbinden und gleichzeitig die Qualität der Nutzererfahrung wahren.
<ph type="x-smartling-placeholder">Aufgrund der Bedeutung der Funktionen, die eine CMP bietet, und der möglichen Auswirkungen auf die Leistung, setzte PubTech folgende Ziele:
- Auswirkungen des CMP-Produkts „PubConsent“ auf INP minimieren.
- Reduzieren Sie lange Aufgaben, die auf das CMP-Produkt zurückzuführen sind.
- Reduzieren Sie die Total Blocking Time (TBT), die sich negativ auf den INP einer Seite auswirken kann.
So wurde INP gemessen
PubTech verwendete die Chrome-Entwicklertools, um eine erste Analyse durchzuführen und langsame Interaktionen manuell zu diagnostizieren. Dieser Workflow ermöglichte es PubTech, bestimmte Probleme zu ermitteln, die sich auf die Reaktionsfähigkeit von Seiten auswirken. Beispielsweise führte eine Klickinteraktion in der CMP zum Akzeptieren aller Cookies und anschließendes Schließen des Dialogfelds zur Cookie-Einwilligung zu einer langen Aufgabe, die eine Aktualisierung der Benutzeroberfläche verzögerte. Wie Sie in der folgenden Abbildung sehen können, wurde die Benutzeroberfläche nicht aktualisiert und zeigt an, dass das Dialogfeld erst geschlossen wurde, nachdem die lange Aufgabe abgeschlossen war.
Wie die Schaltfläche zum Akzeptieren aller Cookies folgt auch die Schaltfläche zum Ablehnen aller Cookies oder zum Anpassen der Cookie-Einstellungen demselben Workflow in der CMP-Architektur von PubConsent. Aus diesem Grund haben sich die in dieser Fallstudie beschriebenen Verbesserungen auf eine Reihe von Nutzerinteraktionen im CMP-Produkt ausgewirkt.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Diese Verzögerung führte dazu, dass das Steuerfeld während der Aufgabe visuell gesperrt war. Da das Rendering-Update für einen deutlich langen Zeitraum blockiert wurde, wurde der INP der Seite negativ beeinflusst.
<ph type="x-smartling-placeholder">So optimierte PubTech INP für Schaltflächen und Links
Zur Verbesserung des INP wurden in der CMP „PubConsent“ verschiedene Ertragsstrategien eingeführt.
Aufgaben mit hoher Priorität bereitstellen
Die im folgenden Code-Snippet gezeigte yieldToMainUiBlocking-Methode wurde entwickelt, um JavaScript-Aufgaben mit hoher Priorität zu optimieren, indem nach Möglichkeit scheduler.yield zurückgegeben wird, aber auf postTask mit der Priorität user-blocking (hohe Priorität) zurückgegriffen wird, wenn postTask verfügbar ist. Schließlich wird kein Wert angegeben.
setTimeout wurde hier vermieden, da die yieldToMainUiBlocking-Methode darauf ausgelegt ist, interne CMP-Einstellungsvorgänge und Arbeiten mit hoher Priorität zu verarbeiten, die diese Priorität beim Ertrag beibehalten sollten. Das bedeutet, dass nur Browser, die diese Planungs-APIs implementieren, die derzeit nur in Chromium-basierten Browsern verfügbar waren, von den in dieser Fallstudie beschriebenen Verbesserungen profitieren. Dennoch wurde dieser Ansatz als akzeptable schrittweise Verbesserung für diese Aufgaben mit hoher Priorität erachtet.
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);
});
};
Mittlere und Hintergrundaufgaben erledigen
Die im folgenden Code-Snippet gezeigte Methode yieldToMainBackground wird verwendet, um lange Aufgaben aufzuteilen, die die Priorität user-visible (mittel) oder background haben. Die Logik implementiert scheduler.yield(), sofern verfügbar, unterscheidet sich jedoch dadurch, dass postTask mit mittlerer Priorität verwendet wird und schließlich in Nicht-Chromium-Browsern auf setTimeout zurückgegriffen wird.
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);
});
};
<ph type="x-smartling-placeholder">yieldToMainBackground es dem Browser ermöglicht, den nächsten Paint – in diesem Fall die CMP-UI zu schließen – früher zu rendern.
Wie PubTech die TBT mit Rendering-Layouts weiter reduziert
Nach der Anwendung der Ertragsstrategie stellte sich heraus, dass sich der INP-Wert für die CMP deutlich verbessert hatte. Nachdem die Verarbeitungsdauer des Event-Handlers deutlich verkürzt wurde, war nun eine Gelegenheit für weitere Rendering-Verbesserungen für die nächste Paint-Aktion für die Aktion UI schließen gefunden. Diese Aktion wurde ursprünglich entwickelt, um Elemente aus dem DOM zu entfernen. Dies stellte sich vor Herausforderungen, insbesondere auf Websites mit einer großen Anzahl von DOM-Knoten, was zu einem unerwarteten Anstieg der Rendering-Arbeit führte.
Um den erhöhten Rendering-Aufwand zum Entfernen von Elementen aus dem DOM zu begegnen, wurde eine Lösung eingeführt, die das Team als „Lazy De-Rendering“ bezeichnete. Bei diesem Ansatz wird zuerst die CSS-Regel display: none auf den CMP-Einwilligungsdialog angewendet, nachdem der Nutzer dem Ausblenden zugestimmt hat. Anschließend werden mit requestIdleCallback die DOM-Knoten, die mit dem CMP-Dialogfeld verknüpft sind, zu einem späteren Zeitpunkt entfernt, an dem der Browser inaktiv ist. Dieser Ansatz erwies sich als viel schneller als das Entfernen von DOM-Knoten in dem Moment, in dem der Nutzer den Dialog zur Einholung von Einwilligungen geschlossen hat.
<ph type="x-smartling-placeholder">Wie PubTech INP durch Verbesserung der IAB TCF-Bibliothek weiter reduziert hat
Nachdem die meisten Probleme bei der Reaktionszeit der CMP behoben wurden, wurden weitere Verbesserungsmöglichkeiten in einer der Hauptabhängigkeiten identifiziert: der TCF (IAB Transparency and Consent Framework).
Die rechenintensivsten Komponenten dieser Bibliothek waren „Build-Strings“. und „Einwilligung an die E-Mail-Adresse senden“. Diese Komponenten sind wesentliche Bestandteile der IAB TCF-Bibliothek. Die folgenden Optimierungen auf diese Komponenten wurden in einer separaten Verzweigung speziell für die Anforderungen von PubTech angewendet:
- Sie können berechnete Ergebnisse für den Decodierungsprozess wiederverwenden, der für jeden Drittanbieter-Callback ausgeführt wird, der die Einwilligung des Nutzers lesen muss.
- Vermeidung und Reduzierung unnötiger Schleifen im Codierungsprozess der Einschränkungen für Publisher, der ausgeführt wird, wenn der Nutzer seine Einwilligung erteilt.
Die erste dieser Optimierungen reduzierte die Zeit, die die CMP für jeden Drittanbieter-Callback benötigt, der in die IAB TCF-Bibliothek eingebunden wird. Die zweite Optimierung reduzierte die Verarbeitungsdauer, die durch die "Build-Strings" entsteht. Komponente. Durch diese Optimierung konnten bis zu 60% der Schleifen reduziert werden, die jedes Mal ausgeführt wurden, wenn ein Nutzer seine Einwilligung erteilt hat.
Ergebnisse
Mit den bisher erzielten Strategien und neuen Optimierungen des Rendering-Layouts stieg der INP-Wert der CMP um bis zu 65%. Dadurch konnte die PubConsent CMP die Nutzerfreundlichkeit erheblich verbessern.Bei einigen Anzeigen verbesserte sich die Sichtbarkeit sogar um 1,5 %, indem bei der Anzeigenanforderung optimiert wurde.
Darüber hinaus wurde in der TCF-Bibliothek des IAB festgestellt, dass sich der INP bei den betroffenen Kunden um bis zu 77% auf Mobilgeräten verbesserte, da die durch das TCF generierten langen Aufgaben um bis zu 85 % reduziert wurden. Dadurch konnte der Aufwand für jeden Drittanbieter-Callback erheblich reduziert werden, der während des gesamten Lebenszyklus einer Seite ausgeführt wurde.
Bei Verwendung der CMP „PubConsent“ ist die Anzahl der Ursprünge, die INP bestanden haben, um mehr als 400 % gestiegen – von 13% auf 55% auf Mobilgeräten. Bei einigen Kunden konnte der Seiten-INP-Wert durch die Optimierungen des PubTech SDK um mehr als die Hälfte reduziert werden – von 470 Millisekunden auf 230 Millisekunden.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Fazit
Die Kunden von PubTech haben schnell die positiven Ergebnisse der INP-Leistung und der Geschäftsmesswerte erkannt, die sich aus unseren Optimierungsmaßnahmen ergeben haben. Es werden weitere Leistungsverbesserungen für die CMP „PubConsent“ in Betracht gezogen, die auf wertvolle RUM-Daten (Real User Monitoring) ihrer Kunden basieren. Anhand dieser Daten lassen sich sowohl Regressionen als auch Fortschritte genau verfolgen, was die Bemühungen von PubTech zur kontinuierlichen Verbesserung vorantreibt.
Als Drittanbieter erkannte PubTech auch, die Webleistung in großem Maßstab zu verbessern, eine bessere Reaktionsfähigkeit zu bieten und gleichzeitig negative Auswirkungen auf die Geschäfts-KPIs zu vermeiden. Es ist nie zu spät, diese Art von Verbesserungen umzusetzen.
Ein besonderer Dank geht an Luca Coppola, CTO bei PubTech, der diese Innovationsarbeit unterstützt, sowie an Jeremy Wagner, Michal Mocny und Rick Viscomi von Google.