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

Thierno Thiam

La métrique Interaction to Next Paint (INP) évalue la réactivité d'un site Web aux entrées utilisateur. L'INP mesure le temps écoulé entre le début d'une interaction (par exemple, un clic, un appui ou une frappe) et le 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 décrit le parcours de Taboola pour améliorer l'INP en utilisant la nouvelle API Long Animation Frames (LoAF) afin de mesurer son impact sur la réactivité des pages sur le terrain, ainsi que les efforts ultérieurs visant à appliquer des optimisations spécifiques pour améliorer l'expérience utilisateur.

TBT en tant que 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 étude menée par Annie Sullivan sur la corrélation entre le TBT et l'INP sur les appareils mobiles indique que les sites sont plus susceptibles d'obtenir de bons scores INP lorsque le temps de blocage du thread principal est réduit au minimum.

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.

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. Il a commencé par effectuer les opérations suivantes:

• 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 constaté que l'analyse des données de trafic généré par les liens courts 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 pouvant entraîner un retard de rendu.

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 le défi le plus difficile a été d'améliorer l'INP sans compromettre les KPI Ads(indicateurs clés de performance) ni retarder les ressources de nos éditeurs.

Utiliser la méthode LoAF pour évaluer l'impact des INN

Un frame d'animation long se produit lorsqu'une mise à jour de 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. En observant les données sur les utilisateurs hors connexion, Taboola a pu:

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. Recueillir des données agrégées pour comparer différentes versions de code dans des tests A/B et générer des rapports sur les métriques clés de réussite

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 due à 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.

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) conserve le rendu côté client et le code JavaScript 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 les tâches bloquant le rendu identifiées à l'aide de LoAF, le "Performance Fader" peut les diviser avant de céder 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 qui peuvent occuper le thread principal.

Voici l'extrait JS du gestionnaire 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 génèrent des frames d'animation et des INP longs. 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 Performance Fader, Taboola a effectué un test A/B mesurant l'INP par rapport au moteur existant sans script sur 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.

Heureusement, les métriques commerciales, telles que le taux de clics sur les annonces et les revenus par mille impressions (RPM), n'ont pas été négativement impactés lorsque TRECS et le fader de performances ont été 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é.

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 de l'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.