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'utilisation 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é du site Web des éditeurs sans compromettre les performances des annonces.

David Belford

Thierno Thiam

La métrique Interaction to Next Paint (INP) est une métrique qui évalue la réactivité d'un site Web face aux entrées utilisateur. L'INP mesure le temps écoulé entre le moment où un utilisateur commence une interaction (par exemple, lorsqu'il clique, appuie ou tape) et le retour visuel qui en résulte. L'INP doit remplacer First Input Delay (FID) comme Core Web Vitals en mars 2024.

Taboola est la première plate-forme de découverte de contenu au monde. Elle fournit 500 000 recommandations chaque 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 des 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 beaucoup investi pour réduire la taille et le temps d'exécution de ses fichiers JavaScript. Taboola a repensé l'ensemble de son moteur de rendu, tout en utilisant les API de navigateur directement, sans abstraction, afin de minimiser son impact sur l'INP.

Cette étude de cas présente le parcours de Taboola pour améliorer INP à l'aide de la nouvelle API Long Animation Frames (LoAF) pour mesurer son impact sur la réactivité de la page sur le terrain. Elle aborde également les efforts ultérieurs pour appliquer des optimisations spécifiques afin d'améliorer l'expérience utilisateur.

VTC en tant que proxy d'INP

Le temps de blocage total est une métrique basée sur des fonctionnalités expérimentales qui identifie l'endroit où le thread principal a été bloqué suffisamment longtemps pour affecter 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 TVB élevé. Une étude d'Annie Sullivan portant sur la corrélation entre la requête large et l'INP sur les appareils mobiles indique que les sites sont plus susceptibles d'atteindre de bons scores INP lorsque le temps de blocage du thread principal est réduit.

Cette corrélation, combinée aux inquiétudes des éditeurs de Taboola concernant la valeur de TVB élevée, a conduit l'équipe à se concentrer sur la réduction de sa contribution à cette métrique.

En utilisant la requête "TBT" comme métrique proxy pour INP, Taboola a commencé à surveiller et à optimiser le temps d'exécution de JavaScript afin de 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.
• Estimer les contributions à l'aide de l'API PageSpeed Insights afin d'évaluer entre 10 000 et 15 000 URL par jour

Cependant, Taboola a remarqué que l'analyse de la navigation détaillée avec ces outils présentait certaines limites:

• L'API Long Tasks ne peut pas attribuer la tâche au domaine d'origine ou à un script particulier, ce qui complique l'identification des sources de longues tâches.
• L'API Long Tasks n'identifie que les tâches longues, plutôt qu'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 la phase d'évaluation de l'API Long Animation Frames (LoAF) afin de mieux comprendre son impact réel sur la réactivité des entrées utilisateur. Les phases d'évaluation permettent d'accéder à des fonctionnalités nouvelles ou expérimentales, ce qui permet 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 consistait à améliorer l'INP sans compromettre les KPI(indicateur clé de performance) des annonces ni causer des retards au niveau des ressources pour nos éditeurs.

Utiliser le LoAF pour évaluer l'impact de l'INP

Une image d'animation longue se produit lorsqu'une mise à jour du rendu est retardée au-delà de 50 millisecondes. En identifiant les causes de la lenteur des mises à jour de l'interface utilisateur, plutôt que de longues tâches à elle seule, Taboola a pu analyser son impact sur la réactivité des pages dans le domaine. L'observation du LoAF a permis à Taboola de:

1. Attribuer les entrées à des tâches Taboola spécifiques.
2. Observer les problèmes de performances dans des fonctionnalités spécifiques avant qu'elles ne soient déployées en production
3. Recueillez des données globales pour comparer différentes versions de code dans les tests A/B et créez 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 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 il était 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.
• Une firstUIEventTimeStamp est générée 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 déterminer quand Taboola a déclenché un firstUIEventTimeStamp pour calculer un score INP de Taboola.

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

TRECS Engine: 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'ensemble de son moteur de rendu afin de réduire considérablement le temps d'exécution et de blocage de JavaScript.

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

Une fois que les tâches bloquantes de l'affichage ont été identifiées à l'aide du LoAF, le "fader Performance" peut répartir ces tâches avant de les renvoyer au thread principal à l'aide de scheduler.postTask(). Cette conception garantit que les tâches essentielles destinées aux utilisateurs, 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 bascule sur setTimeout.
• Cette fonction encapsule les appels de fonction dans des sections de code qui génèrent de longues images d'animation et INP. Il divise ces sections de code en tâches plus courtes, ce qui réduit les INP.

Métriques commerciales

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

Pour déterminer l'impact des TRECS et du fondu des performances, Taboola a effectué un test A/B mesurant l'INP par rapport au moteur existant, sans aucun script ne générant le résultat auprès d'un panel d'éditeurs partenaires.

Le tableau suivant présente les résultats INP en millisecondes pour le 75e centile de quatre éditeurs anonymes du réseau Taboola.

Heureusement, les métriques métier, telles que le taux de clics des annonces et le revenu pour 1 000 impressions (RPM), n'ont pas eu d'impact négatif lorsque les indicateurs TRECS et le fondu des performances étaient activés dans le panneau de test. Grâce à cette amélioration positive de l'INP sans aucun résultat négatif comme prévu sur les KPI des annonces, Taboola va progressivement améliorer la perception de ses éditeurs vis-à-vis de son produit.

Une autre exécution de Lighthouse sur le même client que nous avons évoquée précédemment montre une amélioration significative du temps de blocage du thread principal par Taboola lors de l'utilisation du nouveau moteur.

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

Conclusion

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

Lorsqu'il est utilisé conjointement avec une bonne stratégie de rendement, telle que scheduler.postTask(), cet outil peut vous aider à observer et à comprendre la cause d'une mauvaise réactivité de la page. Vous obtiendrez ainsi les informations dont vous avez besoin pour améliorer l'INP de votre site Web.

Nous remercions Gilberto Cocchi, Noam Rosenthal et Rick Viscomi de Google, ainsi que Dedi Hakak, Anat Dagan et Omri Ariav de l'équipe Ingénierie et Produit de Taboola pour leur contribution à ce travail.