Découvrez comment la CMP PubConsent a réduit l'INP de ses clients jusqu'à 64% grâce à une stratégie de rendement qui utilise les API Scheduler du navigateur pour corriger les problèmes de réactivité identifiés à l'aide des outils pour les développeurs Chrome.
Les plates-formes de gestion du consentement (CMP) sont des outils qui aident les sites Web à respecter les réglementations sur la confidentialité en obtenant le consentement des utilisateurs concernant l'utilisation des cookies et des technologies de suivi. Outre l'objectif principal d'assurer la conformité légale, les CMP, en tant que scripts tiers, doivent également garantir un impact minimal sur les performances et l'expérience utilisateur.
La CMP PubConsent est le dernier produit de PubTech. Conçue principalement pour les performances, la CMP PubConsent est conçue pour être légère, garantir une expérience utilisateur optimale et minimiser l'impact sur les performances globales du site Web.
L'introduction de la métrique Interaction to Next Paint (INP) a permis à PubTech d'identifier les problèmes de réactivité de notre CMP. Dans cette étude de cas, PubTech montre comment elle a résolu ses problèmes de réactivité sur sa plate-forme CMP PubConsent et comment elle a amélioré INP avant qu'il ne devienne l'un des Core Web Vitals en mars 2024, démontrant ainsi son engagement indéfectible à fournir les meilleures performances possibles pour un produit de CMP.
Pourquoi PubTech se soucie-t-il des performances ?
La CMP PubConsent, comme la plupart des CMP, propose sa fonctionnalité de gestion du consentement implémentée en tant que script tiers sur les pages de votre site. Il est essentiel de limiter l'impact sur les performances de notre offre de CMP, y compris sur la réactivité, pour garantir une intégration réussie des CMP.
En priorisant les performances et en allégeant le script de la CMP PubConsent, les propriétaires de sites Web peuvent trouver un équilibre délicat entre intégrer des fonctionnalités utiles de gestion du consentement tout en préservant la qualité de l'expérience utilisateur.
<ph type="x-smartling-placeholder">Compte tenu de l'importance des fonctionnalités d'une CMP et de l'impact qu'elles peuvent avoir sur les performances, PubTech a défini les objectifs suivants:
- Réduisez l'impact du produit de la CMP PubConsent sur l'INP.
- Réduisez les longues tâches attribuables au produit de la CMP.
- Réduisez le temps de blocage total (TBT), qui peut avoir un effet négatif sur l'INP d'une page.
Comment l'INP a-t-elle été mesurée ?
PubTech a utilisé les outils pour les développeurs Chrome pour effectuer une analyse initiale et diagnostique manuellement les interactions lentes. Ce workflow a permis à PubTech d'identifier les problèmes spécifiques affectant la réactivité de la page. Par exemple, une interaction avec un clic dans le produit de la CMP pour accepter tous les cookies, puis ignorer la boîte de dialogue de recueil du consentement pour les cookies a entraîné une longue tâche qui a retardé la mise à jour de l'affichage dans l'interface utilisateur. Comme vous pouvez le voir sur l'image suivante, l'interface utilisateur n'a pas été mise à jour pour indiquer que la boîte de dialogue avait été fermée avant la fin de la longue tâche.
Tout comme le bouton permettant d'accepter tous les cookies, celui permettant de refuser tous les cookies ou de personnaliser les préférences de cookies suit tous le même workflow dans l'architecture de la CMP PubConsent. Pour cette raison, les améliorations détaillées dans cette étude de cas ont eu une incidence sur une série d'interactions utilisateur dans le produit de la CMP.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Ce délai a donné l'impression visuelle que le panneau était verrouillé pendant la tâche. Comme elle a bloqué la mise à jour de l'affichage pendant une période potentiellement longue, l'INP de la page a été affecté négativement.
<ph type="x-smartling-placeholder">Comment PubTech a optimisé INP pour les boutons et les liens
Pour améliorer l'INP, différentes stratégies de rendement ont été adoptées dans la CMP PubConsent.
Rendement des tâches à priorité élevée
La méthode yieldToMainUiBlocking présentée dans l'extrait de code suivant est conçue pour optimiser les tâches JavaScript à priorité élevée en générant avec scheduler.yield si disponible, mais en revenant à postTask avec une priorité user-blocking (élevée) si postTask est disponible, puis en retombant à rien.
setTimeout a été évité ici, car la méthode yieldToMainUiBlocking est conçue pour gérer les opérations de paramètres internes de la CMP et les tâches à priorité élevée qui doivent conserver cette priorité tout en générant un rendement. Cela signifie que seuls les navigateurs qui implémentent ces API de planification, qui ne sont actuellement disponibles que dans les navigateurs basés sur Chromium au moment de la rédaction de cet article, bénéficient des améliorations détaillées dans cette étude de cas. Malgré tout, cette approche a été considérée comme une amélioration progressive acceptable pour ces tâches à priorité élevée.
function yieldToMainUiBlocking () {
return new Promise((resolve) => {
if ('scheduler' in window) {
if ('yield' in window.scheduler) {
return window.scheduler.yield().then(() => resolve(true));
}
if ('postTask' in window.scheduler) {
return window.scheduler.postTask(() => resolve(true), { priority: 'user-blocking' });
}
}
resolve(false);
});
};
Exploitez les tâches moyennes et en arrière-plan
La méthode yieldToMainBackground présentée dans l'extrait de code suivant permet de décomposer les longues tâches ayant une priorité user-visible (moyenne) ou background. La logique implémente scheduler.yield() s'il est disponible, mais il diffère selon l'utilisation de postTask avec une priorité moyenne, puis le retour à setTimeout dans les navigateurs autres que Chromium.
function yieldToMainBackground () {
return new Promise((resolve) => {
if ('scheduler' in window) {
if ('yield' in window.scheduler) {
return window.scheduler.yield().then(() => resolve(true));
}
if ('postTask' in window.scheduler) {
return window.scheduler.postTask(() => resolve(true), { priority: 'user-visible' });
}
}
setTimeout(() => { resolve(true) }, 0);
});
};
<ph type="x-smartling-placeholder">yieldToMainBackground permet au navigateur d'afficher plus tôt le rendu suivant (fermeture de l'interface utilisateur de la CMP dans ce cas).
Comment PubTech a-t-il encore amélioré le TLN grâce à l'optimisation de la mise en page du rendu ?
Après avoir appliqué la stratégie de rendement, l'INP s'est considérablement améliorée pour la CMP. En fait, après avoir considérablement réduit la durée de traitement du gestionnaire d'événements, nous avons découvert qu'il était possible d'apporter d'autres améliorations au rendu du prochain paint pour l'action Close UI (Fermer l'interface utilisateur). À l'origine, cette action a été conçue pour supprimer des éléments du DOM. Cela posait des difficultés, en particulier sur les sites Web comportant un nombre important de nœuds DOM, entraînant une augmentation inattendue du travail d'affichage.
Pour faire face à l'augmentation des tâches de rendu nécessaires pour supprimer des éléments du DOM, l'équipe a introduit une solution appelée "dérendu différé". Cette approche applique d'abord une règle CSS display: none à la boîte de dialogue de recueil du consentement de la CMP une fois que l'utilisateur a accepté de la masquer. Ensuite, la suppression des nœuds DOM associés à la boîte de dialogue de la CMP sera décalée à un moment ultérieur (lorsque le navigateur sera inactif) à l'aide de requestIdleCallback. Cette approche s'est avérée beaucoup plus rapide que la suppression des nœuds DOM au moment où l'utilisateur ferme la boîte de dialogue de recueil du consentement.
<ph type="x-smartling-placeholder">Comment PubTech a réduit davantage son INP en améliorant la bibliothèque TCF de l'IAB
Après avoir résolu la plupart des problèmes de réactivité de la CMP, d'autres possibilités d'amélioration ont été identifiées dans l'une de ses principales dépendances: la bibliothèque du Transparency and Consent Framework (TCF) de l'IAB.
Les composants les plus coûteux en calcul de cette bibliothèque étaient des "build string" (chaînes de compilation) et "consentement pour l'envoi". Ces composants font partie intégrante de la bibliothèque TCF de l'IAB. Les optimisations suivantes apportées à ces composants ont été appliquées dans une section distincte spécialement pour les besoins de PubTech:
- Réutilisation des résultats calculés pour le processus de décodage, qui est exécuté pour chaque rappel tiers devant lire le consentement de l'utilisateur.
- Évitez et réduit les boucles inutiles dans le processus d'encodage des restrictions applicables aux éditeurs, qui s'exécute lorsque l'utilisateur donne son consentement.
La première de ces optimisations a réduit le temps passé par la CMP sur chaque rappel tiers qui s'ancre dans la bibliothèque TCF de l'IAB. La deuxième optimisation a permis de réduire la durée de traitement engendrée par les "chaînes de compilation" . D'ailleurs, cette optimisation a permis de réduire jusqu'à 60% des boucles exécutées chaque fois qu'un utilisateur a donné son consentement.
Résultats
Grâce aux stratégies auparavant efficaces et aux nouvelles optimisations de la mise en page de rendu, l'INP de la CMP a augmenté de 65%. Cela a permis d'améliorer considérablement la réactivité de l'expérience utilisateur de la CMP PubConsent.Pour certaines annonces, la visibilité a même augmenté de 1,5% en optimisant le moment où les annonces sont demandées.
En plus de ces améliorations, dans la bibliothèque TCF de l'IAB, il a été observé que l'INP a augmenté de 77% sur mobile pour les clients concernés, en réduisant de 85 % les longues tâches induites par le TCF. Cela a permis de réduire considérablement les frais généraux liés à chaque rappel tiers exécuté pendant l'ensemble du cycle de vie d'une page.
Le nombre d'origines ayant réussi l'INP lors de l'utilisation de la CMP PubConsent a augmenté de plus de 400%, passant de 13% à 55% sur mobile. Pour certains clients, l'INP de la page a été réduit de plus de moitié (de 470 à 230 millisecondes) en raison des optimisations apportées au SDK PubTech.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Conclusion
Les clients de PubTech ont rapidement compris que nos efforts d'optimisation ont permis d'améliorer les performances INP et les métriques commerciales. Nous envisageons donc d'améliorer les performances de la CMP PubConsent et d'exploiter les données RUM (Real User Monitoring) inestimables de leurs clients. Ces données suivent de près les régressions et les progrès, ce qui stimule les efforts d'amélioration continue de PubTech.
En tant que tiers, PubTech a également compris qu'elle pouvait améliorer les performances Web à grande échelle et la réactivité, tout en évitant les impacts négatifs sur les KPI de l'entreprise. Il n'est jamais trop tard pour commencer à mettre en œuvre ce type d'améliorations.
Nous remercions tout particulièrement Luca Coppola, CTO de PubTech pour avoir soutenu ce travail d'innovation, ainsi que Jeremy Wagner, Michal Mocny et Rick Viscomi de Google.