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.

Découvrez 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é des sites Web des éditeurs sans compromettre les performances des annonces.

David Belford

Thierno Thiam

L'Interaction to Next Paint (INP) est une métrique qui évalue la réactivité d'un site Web aux entrées utilisateur. L'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) et le retour visuel qui en résulte. L'INP remplacera le First Input Delay (FID) en tant que métrique Core Web Vitals en mars 2024.

Taboola est la première plate-forme de découverte de contenu au monde. Elle génère 500 000 recommandations par seconde sur le Web ouvert. Ces recommandations permettent aux 9 000 partenaires éditeurs exclusifs de Taboola de monétiser leurs audiences et de les engager. 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 s'est fortement investi dans la réduction de la taille de ses fichiers JavaScript et de leur temps d'exécution. 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 déployés par la suite pour appliquer des optimisations spécifiques afin d'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. Elle identifie les moments 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é, comme 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 minimisé.

Cette corrélation, associée aux préoccupations des éditeurs Taboola concernant le TBT élevé, a conduit Taboola à se concentrer sur la réduction de 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 de JavaScript afin de 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.
• Estimation des contributions du TBT à l'aide de l'API PageSpeed Insights pour évaluer entre 10 000 et 15 000 URL chaque jour.

Toutefois, Taboola a constaté que l'analyse du TBT 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 identifie uniquement les tâches longues, et non une combinaison de tâches et de modifications de la mise en page qui pourraient entraîner un retard d'affichage.

Pour relever ces défis, Taboola a participé à l'origin trial de l'API Long Animation Frames (LoAF) afin de mieux comprendre son impact réel sur la réactivité aux saisies utilisateur. Les essais Origin Trial donnent accès à 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 était d'améliorer l'INP sans compromettre aucun KPI(indicateur clé de performance) lié aux annonces ni entraîner de retard dans les ressources pour nos éditeurs.

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

Une longue frame 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 (plutôt que les tâches longues uniquement), Taboola a pu analyser son impact sur la réactivité des pages sur le terrain. L'observation de LoAF a permis à Taboola :

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 agrégées pour comparer différentes versions de code dans les 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 le temps d'inactivité de l'application au premier plan 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 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 un script Taboola met plus de 50 millisecondes à s'exécuter.
• Un firstUIEventTimeStamp est généré si l'interaction de l'utilisateur est retardée en raison d'un Long Animation Frame. 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 domaines dans lesquels des opportunités de rendement peuvent être appliquées.

Moteur TRECS : la nouvelle stratégie de rendement

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

TRECS (Taboola Recommendations Extensible Client Service) maintient 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 nécessaires au chargement des recommandations Taboola.

Une fois les tâches bloquantes identifiées à l'aide de LoAF, le "Performance Fader" peut les fractionner avant de céder la place au thread principal à l'aide de scheduler.postTask(). Cette conception garantit que les tâches cruciales pour 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 qui peuvent occuper le thread principal.

Voici l'extrait JS du task runner "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 revient à setTimeout.
• Cette fonction encapsule les appels de fonction dans des sections de code qui entraînent de longues frames d'animation et un INP élevé. Il divise ces sections de code en tâches plus courtes, ce qui réduit l'INP.

Métriques commerciales

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

Pour déterminer l'impact de 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 de partenaires éditeurs.

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

Heureusement, les métriques commerciales, comme le taux de clics sur les annonces et le revenu pour mille impressions (RPM), n'ont pas été affectées négativement lorsque TRECS et le fader de performances ont été 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 Ads, Taboola améliorera progressivement la perception de ses éditeurs concernant son produit.

Une autre exécution de Lighthouse sur le même client que 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 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'obtenir un succès maximal en termes de 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 des partenaires. Avant de commencer l'optimisation, l'attribution de l'INP à des scripts spécifiques élimine toute incertitude et tout risque de détérioration 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 d'identifier 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é conjointement avec une bonne stratégie de rendement (par exemple, en utilisant scheduler.postTask()), LoAF peut vous aider à observer et à comprendre la cause d'une mauvaise réactivité des pages. Vous obtenez ainsi les informations dont vous avez besoin pour améliorer l'INP de votre site Web.

Nous remercions tout particulièrement 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.