Comment Taboola, fournisseur de recommandations de contenus, a utilisé LoAF pour améliorer l'INP jusqu'à 36% sur les sites Web de ses éditeurs partenaires.

Comment l'exploitation de l'API Long Animation Frames (LoAF) et l'adoption d'une stratégie de rendement intelligente ont permis à Taboola d'améliorer la réactivité des sites Web des éditeurs sans compromettre les performances des annonces.

David Belford
David Belford

La métrique Interaction to Next Paint (INP) évalue la réactivité d'un site Web aux entrées utilisateur. INP mesure le temps écoulé entre le moment où un utilisateur commence une interaction, par exemple en cliquant, en appuyant ou en saisissant du texte, jusqu'au retour visuel qui en résulte. L'INP devrait remplacer le délai avant la première entrée (FID) en tant que métrique Core Web Vitals en mars 2024.

Taboola est la première plate-forme de découverte de contenus au monde, qui génère 500 000 recommandations par seconde sur le Web ouvert. Ces recommandations permettent aux 9 000 éditeurs partenaires exclusifs de Taboola de monétiser et d'engager leurs audiences. Les éditeurs affichent les recommandations sur leurs pages à l'aide de JavaScript.

Étant donné que le code JavaScript tiers peut affecter la capacité d'une page à répondre rapidement aux entrées utilisateur, Taboola a investi massivement dans la réduction de la taille et du temps d'exécution de ses fichiers JavaScript. Taboola a repensé l'intégralité de son moteur de rendu, et utilise directement les API du navigateur sans abstractions pour minimiser son impact sur l'INP.

Cette étude de cas couvre le parcours de Taboola pour améliorer INP en utilisant la nouvelle API Long Animation Frames (LoAF) pour mesurer son impact sur la réactivité de la page sur le terrain, et les efforts qui en découlent pour appliquer des optimisations spécifiques afin d'améliorer l'expérience utilisateur.

TOT comme proxy de l'INP

Le Total Blocking Time (TBT) est une métrique basée sur des tests en laboratoire qui identifie les cas où le thread principal a été bloqué suffisamment longtemps pour affecter probablement la réactivité de la page. Les métriques de champ qui mesurent la réactivité (telles que l'INP) peuvent être affectées par un TBT élevé. Une enquête d'Annie Sullivan portant sur la corrélation entre la TA et l'INP sur les appareils mobiles montre que les sites sont plus susceptibles d'obtenir de bons scores INP lorsque le temps de blocage du thread principal est réduit.

Cette corrélation, ainsi que les préoccupations des éditeurs de Taboola concernant un TBT élevé, ont conduit Taboola à s'attacher à réduire sa contribution à cette métrique.

Capture d'écran d'un audit Lighthouse pour la durée de blocage du thread principal. Le thread principal a été bloqué au total par plusieurs scripts pendant 2 630 millisecondes, dont 712 millisecondes par le code JavaScript tiers. Le script RELEASE.js de Taboola est responsable de la majeure partie du temps de blocage des tiers, soit 691 millisecondes.
Avec l'ancien moteur de Taboola, les scripts tels que RELEASE.js bloquent le thread principal pendant 691 millisecondes.

En utilisant TBT comme métrique proxy pour INP, Taboola a commencé à surveiller et à optimiser le temps d'exécution JavaScript pour limiter son impact potentiel sur les Core Web Vitals. Elle a commencé par:

  • Identifier et optimiser les scripts problématiques sur le terrain à l'aide de l'API Long Tasks.
  • Évaluer les contributions de la fonctionnalité TBT à l'aide de l'API PageSpeed Insights pour évaluer 10 000 à 15 000 URL par jour.

Toutefois, Taboola a remarqué que l’analyse de la TAO avec ces outils présentait certaines limites:

  • L'API Long Tasks ne peut pas attribuer la tâche au domaine d'origine ni à un script particulier, ce qui rend plus difficile l'identification des sources de tâches longues.
  • L'API Long Tasks n'identifie que les tâches longues, et non une combinaison de tâches et de modifications de mise en page susceptibles de retarder l'affichage.

Pour relever ces défis, Taboola a rejoint le test de l'origine de l'API Long Animation Frames (LoAF) afin de mieux comprendre son impact réel sur la réactivité des entrées utilisateur. Les essais Origin donnent accès à des fonctionnalités nouvelles ou expérimentales. Ils permettent aux développeurs de tester des fonctionnalités émergentes que leurs utilisateurs peuvent essayer pendant une durée limitée.

Il est essentiel de souligner que l'aspect le plus difficile de ce défi était d'améliorer l'INP sans compromettre les KPI Ads(indicateurs clés de performance) ni entraîner de retards de ressources pour nos éditeurs.

Utiliser la méthode LoAF pour évaluer l'impact de l'INP

Une longue image d'animation se produit lorsqu'une mise à jour du rendu est retardée de plus de 50 millisecondes. En identifiant les causes des mises à jour lentes de l'interface utilisateur (et non seulement les tâches longues), Taboola a pu analyser leur impact sur la réactivité des pages sur le terrain. L'observation de LoAF a permis à Taboola de:

  1. Attribuez des entrées à des tâches Taboola spécifiques.
  2. Observer les problèmes de performances dans des fonctionnalités spécifiques avant leur déploiement en production
  3. Collectez des données globales pour comparer différentes versions de code lors de tests A/B et générer des rapports sur les métriques de réussite clés.

Le code JavaScript suivant est une version simplifiée utilisée en production pour collecter les données LoAF afin d'isoler l'impact de Taboola.

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 });
  • L'utilisation de la fonction loafEntryAnalysis a permis à Taboola d'identifier les entrées pour lesquelles elle est un contributeur majeur.
  • Taboola est considéré comme un contributeur majeur si plus de la moitié de la durée totale du script est causée par Taboola, ou si l'exécution d'un script Taboola prend plus de 50 millisecondes.
  • Un firstUIEventTimeStamp est généré si l'interaction de l'utilisateur est retardée en raison d'un frame d'animation long. La durée de blocage la plus longue est considérée comme le score INP global. Nous pouvons également identifier quand Taboola a déclenché un firstUIEventTimeStamp pour calculer un score INP Taboola.

Les données collectées avec LoAF ont aidé Taboola à créer le tableau d'attribution suivant, qui identifie les zones où il peut appliquer des opportunités de rendement.

Script Durée (millisecondes)
vpaid/units/33_6_8/infra/cmTagINLINE_INSTREAM.js:106517 997
vpaid/units/33_6_8/infra/cmTagFEED_MANAGER.js:496662 561
vpaid/vPlayer/player/v15.8.6/OvaMediaPlayer.js:44631 336
libtrc/impl.20231212-23-RELEASE.js:821090 857
publisher_name/pmk-20220605.5.js:7728 336
libtrc/card-interference-detector.20231219-7-RELEASE.es6.js:183 239
Entrées de script LoAF capturées par le RUM Taboola

Moteur TRECS: la nouvelle stratégie de rendement

En plus d'utiliser LoAF pour mieux comprendre les opportunités d'optimisation des scripts, Taboola a repensé l'intégralité de son moteur de rendu afin de réduire considérablement le temps d'exécution et de blocage de JavaScript.

TRECS (Taboola Recommendations Extensible Client Service) gère l'affichage côté client et le code JS actuel de l'éditeur, tout en réduisant le nombre et la taille des fichiers obligatoires pour charger les recommandations de Taboola.

Une fois que les tâches bloquant l'affichage ont été identifiées à l'aide du LoAF, le "Fondu de performances" peut les diviser avant de générer le thread principal à l'aide de scheduler.postTask(). Cette conception garantit que les tâches essentielles visibles par l'utilisateur, telles que les mises à jour de rendu, peuvent être exécutées dès que possible, quelles que soient les tâches existantes susceptibles d'occuper le thread principal.

Voici l'extrait JS de l'exécuteur de tâches "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);
}

Fonction sendTaskToFader :

  • Utilise runAsPostTask, qui utilise scheduler.postTask() en arrière-plan (si l'API est disponible) ou utilise setTimeout.
  • Cette fonction encapsule les appels de fonction dans des sections de code qui entraînent de longues images d'animation et l'INP. Il divise ces sections de code en tâches plus courtes, ce qui réduit l'INP.

Métriques métier

Grâce à LoAF, Taboola a pu mieux comprendre son impact sur l'INP. L'outil a également mis en évidence les opportunités d'optimisation des scripts qui pourraient être utilisées dans le nouveau moteur TRECS.

Pour déterminer l'impact du TRECS et du fondu de performances, Taboola a effectué un test A/B en mesurant l'INP par rapport au moteur existant, sans générer de script auprès d'un panel d'éditeurs partenaires.

Le tableau suivant présente les résultats de l'INP en millisecondes au 75e percentile de quatre éditeurs anonymes du réseau Taboola.

Éditeurs INP avec TRECS + Performance Fader INP avec le moteur existant Baisse de l'INP (%)
Éditeur A 48 75 36 %
Éditeur B 153 163 6 %
Éditeur C 92 135 33 %
Éditeur D 37 52 29 %

Heureusement, les métriques métier, telles que le taux de clics sur les annonces et le revenu par mille impressions (RPM), n'ont pas subi d'impact négatif lorsque TRECS et le fondu de performances étaient activés dans le panneau de test. Avec cette amélioration positive de l'INP sans aucun résultat négatif comme prévu sur les KPI Ads, Taboola améliorera progressivement la perception de son produit par ses éditeurs.

Une autre analyse Lighthouse effectuée sur le même client que celui mentionné précédemment montre une amélioration significative du temps de blocage du thread principal par Taboola lorsque le nouveau moteur est utilisé.

Capture d'écran d'un audit Lighthouse pour le temps de blocage du thread principal après l'application des nouveaux moteurs TRECS et Performance Fader afin d'améliorer le temps de blocage du thread principal. L'audit a été réduit à seulement 206 millisecondes, contre 712 millisecondes avant les optimisations.
Le nouveau moteur de Taboola a permis à des scripts comme RELEASE.js de réduire le temps de latence de 485 ms (-70%).

Cela montre que l'utilisation de LoAF pour identifier les causes de l'INP et le déploiement des techniques de rendement ultérieures avec le Performance Fader permettent aux partenaires de Taboola d'optimiser les performances des annonces et des pages.

Conclusion

L'optimisation d'INP est un processus complexe, en particulier lorsque des scripts tiers sont utilisés sur les sites Web partenaires. Avant que l'optimisation puisse commencer, l'attribution des problèmes d'INP à des scripts spécifiques élimine toute conjecture et tout dommage potentiel sur d'autres métriques de performances du site.L'API LoAF s'est avérée être un outil précieux pour identifier et résoudre les problèmes d'INP, en particulier pour les tiers intégrés, en leur permettant de cibler leurs opportunités d'amélioration spécifiques du SDK tout en éliminant les interférences d'autres technologies présentes sur la page.

Lorsqu'il est utilisé en conjonction avec une bonne stratégie de rendement (par exemple, en utilisant scheduler.postTask()), LoAF peut vous aider à observer et à comprendre la cause de la mauvaise réactivité des pages, ce qui vous fournit les informations dont vous avez besoin pour améliorer l'INP de votre site Web.

Un merci tout particulier à Gilberto Cocchi, Noam Rosenthal et Rick Viscomi de Google, ainsi qu'à Dedi Hakak, Anat Dagan et Omri Ariav de l'équipe technique et produit de Taboola pour leur contribution à ce travail.