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 les performances la réactivité de votre site Web sans compromettre les performances des annonces.

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, jusqu'au retour visuel qui en résulte. INP va remplacer le First Input Delay (FID) comme métrique Core Web Vitals en mars 2024.

Taboola est la première plate-forme de découverte de contenu au monde, avec 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 considérablement investi dans la réduction de la taille de ses fichiers JavaScript et de la durée d'exécution. Taboola a remanié l'ensemble de son moteur de rendu et utilisé les API de navigateur directement sans abstraction pour minimiser son impact sur INP.

Cette étude de cas présente le parcours de Taboola pour améliorer INP en utilisant la nouvelle API LoAF (Long Animation Frames) 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 temps de blocage total (TBT, Total Blocking Time) est une métrique basée sur un atelier 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 TTC é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, combinée à celle des éditeurs de Taboola s'inquiétant d'un volume de données différentiel élevé, Taboola s'est concentré sur la minimisation de sa contribution à cette métrique.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

L'utilisation de la technique de ciblage par contournement comme métrique proxy pour INP a permis à Taboola de surveiller et d'optimiser la durée d'exécution de JavaScript afin de limiter son impact potentiel sur les métriques Core Web Vitals. Elle 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 du nombre de contributions du compteur de données à l'aide de l'API PageSpeed Insights, qui évalue entre 10 000 et 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 ou à un script particulier, ce qui rend plus difficile l'identification des sources des longues tâches.
• 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 la phase d'évaluation de l'API LoAF (Long Animation Frames) afin de mieux comprendre son impact réel sur la réactivité des entrées utilisateur. Les phases d'évaluation permettent aux développeurs d'accéder à des fonctionnalités nouvelles ou expérimentales. Ils peuvent ainsi tester des fonctionnalités émergentes que leurs utilisateurs peuvent tester pendant une durée limitée.

Il est essentiel de souligner que l'aspect le plus difficile de ce défi a été d'améliorer INP sans compromettre aucun indicateur clé de performance publicitaire ni retarder les ressources de nos éditeurs.

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

Une longue image d'animation se produit lorsqu'une mise à jour de rendu est retardée de plus de 50 millisecondes. En identifiant les causes de la lenteur des mises à jour de l'interface utilisateur, plutôt que les longues tâches seules, Taboola a pu analyser son 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 de 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 JavaScript suivant est une version simplifiée utilisée en production pour collecter la 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 });

• 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'une longue image d'animation. 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 Taboola INP.

Les données collectées avec la 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.

<ph type="x-smartling-placeholder">

TRECS Engine: la nouvelle stratégie de rendement

En plus d'utiliser le 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 de blocage et l'exécution 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 les tâches bloquant l'affichage identifiées à l'aide du LoAF, le "Fondu de performances" pouvez diviser ces tâches avant de céder au thread principal à l'aide de scheduler.postTask(). Cette conception garantit que les tâches essentielles visibles par l'utilisateur, telles que les mises à jour du 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 du "Performance Fader" exécuteur de tâches:

/**
* 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 INP. L'outil a également mis en évidence des opportunités d'optimisation des scripts qui pourraient être utilisées avec 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 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 centile de quatre éditeurs anonymes du réseau Taboola.

Heureusement, les métriques métier, telles que le taux de clics sur les annonces et le revenu pour 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. Grâce à cette amélioration positive de l'INP sans résultat négatif au niveau des KPI Ads, Taboola va améliorer progressivement les performances à propos de son produit.

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

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Cela démontre que l'utilisation du LoAF pour identifier les causes de l'INP et le déploiement des techniques de rendement ultérieures avec le fondueur Performance permet aux partenaires de Taboola d'atteindre un succès maximal en termes de 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 ne puisse commencer, l'attribution d'INP à des scripts spécifiques élimine toute supposition 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 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 éliminant les interférences des autres technologies présentes sur la page.

Lorsqu'il est utilisé avec une bonne stratégie de rendement, comme scheduler.postTask(), le LoAF peut vous aider à observer et à comprendre la cause d'une mauvaise réactivité de la page, ce qui vous fournit les informations nécessaires 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.