Wie Taboola die Long Animation Frames API (LoAF) und eine intelligente Ertragsstrategie nutzte, um Publisher die die Reaktionszeit Ihrer Website verbessern können, ohne die Anzeigenleistung zu beeinträchtigen.
Interaction to Next Paint (INP) ist ein Messwert, mit dem bewertet wird, wie gut eine Website auf Nutzereingaben reagiert. INP misst die Zeit von dem Beginn einer Interaktion, z. B. durch Klicken, Tippen oder Tippen, bis zum visuellen Feedback. INP wird First Input Delay (FID) im März 2024 als Core Web Vital ersetzen.
Taboola ist die weltweit führende Plattform für die Suche nach Inhalten. Sie bietet jede Sekunde 500.000 Empfehlungen im offenen Web. Dank dieser Empfehlungen können die 9.000 exklusiven Publisher-Partner von Taboola Einnahmen erzielen und ihre Zielgruppen begeistern. Publisher rendern Empfehlungen auf ihren Seiten mithilfe von JavaScript.
Da JavaScript von Drittanbietern die Reaktionsfähigkeit einer Seite auf Nutzereingaben beeinträchtigen kann, hat Taboola viel in die Reduzierung der Größe der JavaScript-Dateien und der Ausführungszeit investiert. Taboola hat sein gesamtes Rendering-Modul neu gestaltet und Browser-APIs direkt und ohne Abstraktionen verwendet, um die Auswirkungen auf INP zu minimieren.
Diese Fallstudie befasst sich mit dem Einsatz von Taboola zur Verbesserung von INP durch den Einsatz der neuen Long Animation Frames (LoAF) API, um die Auswirkungen auf die Seitenreaktionsfähigkeit vor Ort zu messen, und zeigt weitere Bemühungen zur Durchführung spezifischer Optimierungen zur Verbesserung der Nutzererfahrung.
TBT als Proxy von INP
Total Blocking Time (TBT) (Gesamtblockierungszeit) ist ein laborbasierter Messwert, mit dem ermittelt wird, wo der Hauptthread lange genug blockiert war, um die Reaktionszeit der Seite wahrscheinlich zu beeinträchtigen. Feldmesswerte, die die Reaktionsfähigkeit messen, z. B. INP, können durch eine hohe TBT beeinflusst werden. Eine Untersuchung von Annie Sullivan zur Korrelation zwischen TBT und INP auf Mobilgeräten deutet darauf hin, dass Websites eher gute INP-Werte erzielen, wenn die Blockierzeit des Hauptthreads minimiert wird.
Diese Korrelation, in Kombination mit den Ergebnissen der besorgte sich Taboola, um den hohen TBT-Wert zu minimieren.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">RELEASE.js den Hauptthread 691 Millisekunden lang.
Mithilfe von TBT als Proxy-Messwert für INP begann Taboola damit, die JavaScript-Ausführungszeit zu überwachen und zu optimieren, um die möglichen Auswirkungen auf Core Web Vitals zu begrenzen. Dazu ging es zunächst so vor:
- Problematische Skripts im Feld mithilfe der Long Tasks API identifizieren und optimieren
- Schätzen Sie den TBT-Beitrag mithilfe der PageSpeed Insights API ein, um täglich 10.000 bis 15.000 URLs zu bewerten.
Taboola stellte jedoch fest, dass die Analyse von TBT mit diesen Tools einige Einschränkungen aufwies:
- Die Long Tasks API kann die Aufgabe nicht der Ursprungsdomain oder einem bestimmten Skript zuordnen, was die Identifizierung der Quellen langer Aufgaben erschwert.
- Die Long Tasks API erkennt nur lange Aufgaben und nicht eine Kombination aus Aufgaben und Layoutänderungen, die zu einer Rendering-Verzögerung führen könnte.
Taboola nahm am Ursprungstest der Long Animation Frames (LoAF) API teil, um die tatsächlichen Auswirkungen auf die Reaktionszeit von Nutzereingaben besser zu verstehen. Ursprungstests bieten Zugriff auf neue oder experimentelle Funktionen, mit denen Entwickler neue Funktionen testen können, die ihre Nutzer für eine begrenzte Zeit testen können.
Dabei muss unbedingt betont werden, dass der schwierigste Aspekt dieser Herausforderung darin bestand, INP erfolgreich zu verbessern, ohne einen Anzeigen-KPI(Key Performance Indicator) zu kompromittieren oder Ressourcenverzögerungen für unsere Publisher zu verursachen.
Mit LoAF zur Bewertung der INP-Auswirkungen
Ein langer Animationsframe tritt auf, wenn eine Rendering-Aktualisierung über 50 Millisekunden verzögert wird. Statt nur lange Aufgaben zu identifizieren, konnte Taboola die Ursachen für langsame Updates der Benutzeroberfläche ermitteln und die Auswirkungen auf die Reaktionszeit von Seiten in der Praxis analysieren. Die Beobachtung der LoAF hat Taboola ermöglicht:
- Weisen Sie Einträge bestimmten Taboola-Aufgaben zu.
- Beobachten Sie Leistungsprobleme bestimmter Funktionen, bevor diese für die Produktion bereitgestellt werden.
- Sie können aggregierte Daten sammeln, um verschiedene Codeversionen in A/B-Tests zu vergleichen, und Berichte zu wichtigen Erfolgsmesswerten erstellen.
Das folgende JavaScript ist eine vereinfachte Version, die in der Produktion zum Erfassen von LoAF verwendet wird, um die Auswirkungen von Taboola zu isolieren.
function loafEntryAnalysis (entry) {
if (entry.blockingDuration === 0) {
return;
}
let taboolaIsMajor = false;
const hasInteraction = entry.firstUIEventTimestamp > 0;
let taboolaDuration = 0;
const nonTaboolaLoafReport = {};
const taboolaLoafReport = {};
entry.scripts.forEach((script) => {
const taboolaScriptBlockingDuration = handleLongAnimationFrameScript(script, taboolaLoafReport, nonTaboolaLoafReport);
taboolaDuration += taboolaScriptBlockingDuration;
if (taboolaScriptBlockingDuration > 0 || taboolaDuration > entry.duration / 2) {
taboolaIsMajor = true;
}
});
generateToboolaLoafReport(taboolaLoafReport, nonTaboolaLoafReport, hasInteraction, taboolaIsMajor);
if (hasInteraction) {
const global = _longAnimationFramesReport.global;
global.inpBlockingDuration = Math.max(global.inpBlockingDuration, entry.blockingDuration);
if (taboolaIsMajor) {
global.taboolaInpBlockingDuration = Math.max(global.taboolaInpBlockingDuration, entry.blockingDuration);
}
}
}
const observer = new PerformanceObserver(list => {
for (const entry of list.getEntries()) {
loafEntryAnalysis(entry);
}
});
observer.observe({ type: 'long-animation-frame', buffered: true });
- Mithilfe der
loafEntryAnalysis-Funktion konnte Taboola Einträge identifizieren, zu denen es eine wichtige Rolle spielt. - Taboola gilt als wichtiger Mitwirkender, wenn mehr als die Hälfte der gesamten Skriptdauer durch Taboola verursacht wird oder die Ausführung eines Taboola-Skripts mehr als 50 Millisekunden dauert.
- Ein
firstUIEventTimeStampwird generiert, wenn die Nutzerinteraktion aufgrund eines langen Animationsframes verzögert ist. Die längste Blockierungsdauer wird als INP-Gesamtwert betrachtet. Wir können auch erkennen, wenn Taboola einenfirstUIEventTimeStampausgelöst hat, um einen Taboola-INP-Wert zu berechnen.
Mithilfe der mit LoAF gesammelten Daten konnte Taboola die folgende Zuordnungstabelle erstellen, in der Bereiche identifiziert werden, in denen Renditechancen genutzt werden können.
<ph type="x-smartling-placeholder">TRECS Engine: die neue Ertragsstrategie
Taboola nutzte LoAF zum besseren Verständnis der Möglichkeiten zur Skriptoptimierung und hat sein gesamtes Rendering-Modul neu gestaltet, um die Ausführung von JavaScript und die Blockierzeit deutlich zu minimieren.
TRECS (Taboola Recommendations Extensible Client Service) behält das clientseitige Rendering und den aktuellen JS-Code des Verlags oder Webpublishers bei und reduziert gleichzeitig die Anzahl und Größe der obligatorischen Dateien, die zum Laden der Empfehlungen von Taboola erforderlich sind.
Sobald diese Aufgaben
mithilfe von LoAF identifiziert wurden, kann diese Aufgaben aufteilen, bevor sie mit scheduler.postTask() dem Hauptthread übergeben werden. Dieses Design sorgt dafür, dass wichtige nutzerseitige Aufgaben – wie das Rendern von Aktualisierungen – so schnell wie möglich ausgeführt werden können, unabhängig von vorhandenen Aufgaben, die den Hauptthread belegen könnten.
Hier ist das JS-Snippet von „Performance Fader“. Task-Runner:
/**
* Send a task to run using the Fader. The task will run using the browser Scheduler, by the configuration settings, or immediately.
* @param task
* @param isBlocker
*/
function sendTaskToFader (task, isBlocker = true) {
const publisherFaderChoice = fillOptimizationGlobals(); // Loading publisher choice
const applyYielding = publisherFaderChoice === OptimizationFaderType.Responsiveness;
if (applyYielding) {
return runAsPostTask(task, isBlocker);
}
return runImmediately(task);
}
/**
* Yielding method using scheduler.postTask and falling back to setTimeout when it's not availabe based on the publisher choice
*/
function runAsPostTask (task, isBlocker = true) {
if ('scheduler' in window && 'postTask' in scheduler) {
const priority = isBlocker ? 'user-blocking': 'background';
return window?.scheduler?.postTask(task, { priority });
}
const publisherChoiceEnableFallback = fillPublisherChoices();
if (publisherChoiceEnableFallback) {
return new Promise(resolve => {
window.setTimeout(() => {
resolve(task());
}, 0);
});
}
return runImmediately(task);
}
Die sendTaskToFader-Funktion:
- Verwendet
runAsPostTask, was im Hintergrundscheduler.postTask()verwendet (falls die API verfügbar ist) oder aufsetTimeoutzurückgreift. - Diese Funktion fügt Funktionsaufrufe in Codeabschnitten ein, die lange Animationsframes und INP verursachen. Diese Codeabschnitte werden in kürzere Aufgaben aufgeteilt, wodurch INP reduziert wird.
Geschäftsmetriken
Dank LoAF konnte Taboola den Einfluss auf INP besser nachvollziehen. Das Tool zeigte auch Möglichkeiten zur Skriptoptimierung auf, die im Rahmen der neuen TRECS-Engine genutzt werden konnten.
Um die Auswirkungen von TRECS und dem Performance Fader zu ermitteln, führte Taboola einen A/B-Test durch, bei dem der INP-Wert mit der vorhandenen Suchmaschine verglichen wurde, ohne dass ein Skript für eine Gruppe von Publisher-Partnern führte.
Die folgende Tabelle zeigt die INP-Ergebnisse in Millisekunden für das 75. Perzentil von vier anonymen Publishern im Taboola-Werbenetzwerk.
Glücklicherweise wirkten sich Geschäftsmesswerte wie die Anzeigenklickrate und der Umsatz pro 1.000 Impressionen (RPM) nicht negativ aus, als TRECS und die Funktion „Performance Fader“ im Testbereich aktiviert wurden. Aufgrund dieser positiven Verbesserung des INP ohne wie erwartete negative Ergebnisse bei den Anzeigen-KPIs wird Taboola nach und nach die Leistung seiner Publisher Wahrnehmung des Produkts.
Ein anderer Lighthouse-Test desselben Kunden, der zuvor erwähnt wurde, zeigt eine erhebliche Verbesserung der Blockierzeit des Hauptthreads durch Taboola bei Verwendung des neuen Moduls.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">RELEASE.js die TBT-Zeit um 485 ms (-70%) reduzieren.
Dies zeigt, dass die Partner von Taboola durch die Verwendung von LoAF zur Identifizierung von INP-Ursachen und die Anwendung der nachfolgenden Ausbeutetechniken mit dem Performance Fader einen maximalen Erfolg bei der Anzeigen- und Seitenleistung erzielen können.
Fazit
Die Optimierung von INP ist ein komplexer Prozess, insbesondere wenn auf Partnerwebsites Skripts von Drittanbietern verwendet werden. Bevor die Optimierung beginnen kann, werden durch die Zuordnung von INP bestimmte Skripts und mögliche Schäden an anderen Leistungsmesswerten der Website vermieden. Die LoAF API hat sich als wertvolles Tool zur Identifizierung und Behebung von INP-Problemen erwiesen, insbesondere für eingebettete Drittanbieter. Sie ermöglicht es ihnen, ihre spezifischen Verbesserungsmöglichkeiten für das SDK zu ermitteln und Störungen durch andere auf der Seite vorhandene Technologien zu vermeiden.
Wenn LoAF in Verbindung mit einer guten Ertragsstrategie wie scheduler.postTask() verwendet wird, kannst du die Ursache einer schlechten Reaktionszeit von Seiten beobachten und verstehen. Dadurch erhältst du die Informationen, die du zur Verbesserung des INP deiner Website benötigst.
Unser besonderer Dank gilt Gilberto Cocchi, Noam Rosenthal und Rick Viscomi von Google sowie Dedi Hakak, Anat Dagan und Omri Ariav vom Engineering- und Produktteam von Taboola für ihren Beitrag zu dieser Arbeit.