Wie der Anbieter von Inhaltsempfehlungen Taboola mithilfe von LoAF die INP-Leistung für seine Publisher-Partnerwebsites um bis zu 36% verbesserte.

Durch die Nutzung der Long Animation Frames API (LoAF) und die Einführung einer intelligenten Ertragsstrategie konnte Taboola die Reaktionsfähigkeit der Websites von Publishern verbessern, ohne die Anzeigenleistung zu beeinträchtigen.

David Belford

Thierno Thiam

Interaction to Next Paint (INP) ist ein Messwert, mit dem die Reaktionsfähigkeit einer Website auf Nutzereingaben bewertet wird. INP misst die Zeit von dem Moment an, in dem ein Nutzer eine Interaktion beginnt, z. B. durch Klicken, Tippen oder Eingeben von Text, bis zum visuellen Feedback, das sich daraus ergibt. INP soll im März 2024 FID (First Input Delay) als Core Web Vital ersetzen.

Taboola ist die weltweit führende Plattform für die Entdeckung von Inhalten und liefert jede Sekunde 500.000 Empfehlungen im offenen Web. Mit diesen Empfehlungen können die 9.000 exklusiven Publisher-Partner von Taboola ihre Zielgruppen monetarisieren und mit ihnen interagieren. Publisher rendern Empfehlungen auf ihren Seiten mithilfe von JavaScript.

Da Drittanbieter-JavaScript die Fähigkeit einer Seite beeinträchtigen kann, schnell auf Nutzereingaben zu reagieren, hat Taboola viel in die Reduzierung der JavaScript-Dateigrößen und der Ausführungszeit investiert. Taboola hat seine gesamte Rendering-Engine neu gestaltet und verwendet Browser-APIs direkt ohne Abstraktionen, um die Auswirkungen auf INP zu minimieren.

In dieser Fallstudie wird beschrieben, wie Taboola den INP-Wert verbessert hat. Dazu wurde die neue Long Animation Frames (LoAF) API verwendet, um die Auswirkungen auf die Reaktionsfähigkeit von Seiten zu messen. Anschließend wurden spezifische Optimierungen vorgenommen, um die Nutzerfreundlichkeit zu verbessern.

TBT als Proxy für INP

Die gesamte Blockierzeit ist ein labbasierter Messwert, der angibt, wann der Hauptthread lange genug blockiert wurde, um die Reaktionsfähigkeit der Seite zu beeinträchtigen. Feldmesswerte, mit denen die Reaktionsfähigkeit gemessen wird, z. B. INP, können durch einen hohen TBT-Wert beeinträchtigt werden. Eine Untersuchung von Annie Sullivan zum Zusammenhang zwischen TBT und INP auf Mobilgeräten hat ergeben, dass Websites mit größerer Wahrscheinlichkeit gute INP-Werte erzielen, wenn die Blockierungszeit des Haupt-Threads minimiert wird.

Diese Korrelation in Verbindung mit den Bedenken der Publisher von Taboola hinsichtlich eines hohen TBT veranlasste Taboola, sich darauf zu konzentrieren, den eigenen Beitrag zu diesem Messwert zu minimieren.

Taboola verwendete TBT als Proxy-Messwert für INP und begann, die JavaScript-Ausführungszeit zu überwachen und zu optimieren, um die potenziellen Auswirkungen auf Core Web Vitals zu begrenzen. Sie haben so begonnen:

• Problematische Skripts im Feld mithilfe der Long Tasks API identifizieren und optimieren.
• Schätzung der TBT-Beiträge mithilfe der PageSpeed Insights API zur täglichen Auswertung von 10.000 bis 15.000 URLs.

Taboola stellte jedoch fest, dass die Analyse von TBT mit diesen Tools einige Einschränkungen aufwies:

• Mit der Long Tasks API kann die Aufgabe nicht der Ursprungsdomain oder einem bestimmten Skript zugeordnet werden. Das erschwert die Identifizierung von Quellen für lange Aufgaben.
• Die Long Tasks API identifiziert nur Long Tasks und nicht eine Kombination aus Aufgaben und Layoutänderungen, die zu einer Rendering-Verzögerung führen könnten.

Um diese Herausforderungen zu meistern, nahm Taboola am LoAF-API-Origin-Trial (Long Animation Frames) teil, um die tatsächlichen Auswirkungen auf die Reaktionsfähigkeit von Nutzereingaben besser zu verstehen. Ursprungstests ermöglichen den Zugriff auf neue oder experimentelle Funktionen. So können Entwickler neue Funktionen testen, die ihre Nutzer für einen begrenzten Zeitraum ausprobieren können.

Es ist wichtig zu betonen, dass die größte Herausforderung darin bestand, INP zu verbessern, ohne die Anzeigen-KPIs zu beeinträchtigen oder Ressourcenverzögerungen für unsere Publisher zu verursachen.

Mit LoAF die Auswirkungen von INP bewerten

Ein langer Animationsframe tritt auf, wenn ein Rendering-Update um mehr als 50 Millisekunden verzögert wird. Durch die Ermittlung der Ursachen für langsame Aktualisierungen der Benutzeroberfläche anstelle von langen Aufgaben allein konnte Taboola die Auswirkungen auf die Reaktionsfähigkeit der Seite in der Praxis analysieren. Durch die Beobachtung von LoAF konnte Taboola Folgendes erreichen:

1. Einträge bestimmten Taboola-Aufgaben zuordnen
2. Leistungsprobleme in bestimmten Funktionen beobachten, bevor sie in der Produktion bereitgestellt werden.
3. Sie können aggregierte Daten erfassen, um verschiedene Codeversionen in A/B-Tests zu vergleichen, und Berichte zu wichtigen Erfolgsmesswerten erstellen.

Der folgende JavaScript-Code ist eine vereinfachte Version, die in der Produktion verwendet wird, um LoAF zu erfassen und 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 Funktion loafEntryAnalysis konnte Taboola Einträge identifizieren, bei denen das Unternehmen einen wichtigen Beitrag leistet.
• Taboola gilt als Hauptursache, wenn mehr als die Hälfte der Gesamtdauer des Skripts auf Taboola zurückzuführen ist oder die Ausführung eines Taboola-Skripts mehr als 50 Millisekunden dauert.
• Ein firstUIEventTimeStamp wird generiert, wenn die Nutzerinteraktion aufgrund eines Long Animation Frame verzögert wird. Die längste Blockierungsdauer wird als INP-Gesamtpunktzahl betrachtet. Wir können auch erkennen, wann Taboola ein firstUIEventTimeStamp ausgelöst hat, um einen INP-Wert für Taboola zu berechnen.

Anhand der mit LoAF erhobenen Daten konnte Taboola die folgende Attributionstabelle erstellen, in der Bereiche identifiziert werden, in denen sich die Ertragsoptimierung anwenden lässt.

TRECS Engine: die neue Ertragsstrategie

Taboola nutzt LoAF nicht nur, um Möglichkeiten zur Script-Optimierung besser zu verstehen, sondern hat auch die gesamte Rendering-Engine neu gestaltet, um die JavaScript-Ausführungs- und Blockierungszeit deutlich zu minimieren.

TRECS (Taboola Recommendations Extensible Client Service) sorgt für das clientseitige Rendern und den aktuellen JS-Code des Publishers und reduziert gleichzeitig die Anzahl und Größe der obligatorischen Dateien, die zum Laden der Empfehlungen von Taboola erforderlich sind.

Sobald renderblockierende Aufgaben mit LoAF identifiziert wurden, kann der „Performance Fader“ diese Aufgaben aufteilen, bevor er den Hauptthread mit scheduler.postTask() freigibt. Dieses Design sorgt dafür, dass wichtige nutzerorientierte Aufgaben wie das Rendern von Updates so schnell wie möglich ausgeführt werden können, unabhängig von vorhandenen Aufgaben, die den Hauptthread möglicherweise belegen.

Hier ist der JS-Snippet des Task-Runners „Performance Fader“:

/**
* 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, das intern scheduler.postTask() verwendet (sofern die API verfügbar ist), oder greift auf setTimeout zurück.
• Diese Funktion umschließt Funktionsaufrufe in Codeabschnitten, die lange Animations-Frames und INP verursachen. Dabei werden diese Codeabschnitte in kürzere Aufgaben unterteilt, wodurch der INP-Wert sinkt.

Geschäftsmesswerte

Dank LoAF konnte Taboola die Auswirkungen auf INP besser nachvollziehen. Das Tool hat auch Möglichkeiten zur Skriptoptimierung aufgezeigt, die im Rahmen der neuen TRECS-Engine genutzt werden könnten.

Um die Auswirkungen von TRECS und dem Performance Fader zu ermitteln, hat Taboola einen A/B-Test durchgeführt, bei dem INP mit der bestehenden Engine ohne Script Yielding bei einer Gruppe von Verlagspartnern verglichen wurde.

In der folgenden Tabelle sehen Sie INP-Ergebnisse in Millisekunden beim 75. Perzentil von vier anonymen Publishern im Taboola-Netzwerk.

Glücklicherweise wurden geschäftliche Messwerte wie die Klickrate von Anzeigen und der Umsatz pro 1.000 Impressionen (RPM) nicht negativ beeinflusst, als TRECS und der Performance Fader in der Testgruppe aktiviert wurden. Durch diese positive Verbesserung des INP ohne erwartete negative Auswirkungen auf die Anzeigen-KPIs wird Taboola die Wahrnehmung seines Produkts durch die Publisher nach und nach verbessern.

Ein weiterer Lighthouse-Lauf für denselben Kunden, der bereits erwähnt wurde, zeigt eine deutliche Verbesserung der Blockierungszeit des Hauptthreads durch Taboola bei Verwendung der neuen Engine.

Dies zeigt, dass die Verwendung von LoAF zur Ermittlung der Ursachen von INP und die anschließende Anwendung der Yielding-Techniken mit dem Performance Fader es Taboola-Partnern ermöglicht, maximale Erfolge bei der Anzeigen- und Seitenleistung zu erzielen.

Fazit

Die Optimierung von INP ist ein komplexer Prozess, insbesondere wenn auf Partnerwebsites Drittanbieterskripts verwendet werden. Bevor die Optimierung beginnen kann, wird INP bestimmten Skripts zugeordnet. So werden Vermutungen und potenzielle Schäden an anderen Website-Leistungsmesswerten vermieden.Die LoAF API hat sich als wertvolles Tool zum Erkennen und Beheben von INP-Problemen erwiesen, insbesondere für eingebettete Drittanbieter. Sie ermöglicht es ihnen, ihre spezifischen SDK-Optimierungsmöglichkeiten zu ermitteln und gleichzeitig Störungen durch andere Technologien auf der Seite zu vermeiden.

In Kombination mit einer guten Yielding-Strategie, z. B. mit scheduler.postTask(), können Sie mit LoAF die Ursache für eine schlechte Seitenreaktionsfähigkeit ermitteln und nachvollziehen. So erhalten Sie die Informationen, die Sie benötigen, um den INP Ihrer Website zu verbessern.

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.