Cómo la CMP de PubConsent redujo el INP de sus clientes hasta en un 64% mediante una estrategia de rendimiento que utiliza las APIs de Scheduler del navegador para solucionar problemas de capacidad de respuesta identificados con las Herramientas para desarrolladores de Chrome.
Las plataformas de administración de consentimiento (CMP) son herramientas que ayudan a los sitios web a cumplir con las reglamentaciones de privacidad mediante la obtención del consentimiento de los usuarios para el uso de cookies y tecnologías de seguimiento. Además del objetivo principal de garantizar el cumplimiento legal, las CMP, que son secuencias de comandos de terceros, también deben garantizar un impacto mínimo en el rendimiento y la experiencia del usuario.
La CMP de PubConsent es el producto más reciente de PubTech. Con un enfoque principal en el rendimiento, la CMP de PubConsent se diseñó para ser ligera, garantizar una experiencia del usuario óptima y lograr un impacto mínimo en el rendimiento general del sitio web.
La incorporación de la métrica Interacción a la siguiente pintura (INP) permitió que PubTech descubriera problemas relacionados con la capacidad de respuesta de nuestra CMP. En este caso de éxito, PubTech muestra cómo solucionaron sus problemas con la capacidad de respuesta en su plataforma de CMP de PubConsent y cómo mejoraron el INP antes de que se convirtiera en una de las Métricas web esenciales en marzo de 2024, lo que demuestra un compromiso inquebrantable por proporcionar el mejor rendimiento posible en un producto de CMP.
¿Por qué a PubTech le importa el rendimiento?
Al igual que la mayoría de las CMP, la CMP de PubConsent ofrece su funcionalidad de administración de consentimiento implementada como una secuencia de comandos de terceros en las páginas del sitio. Mitigar el impacto en el rendimiento de nuestra oferta de CMP, incluida la capacidad de respuesta, es fundamental para garantizar una integración exitosa de la CMP.
Cuando se prioriza el rendimiento y se utiliza una secuencia de comandos de la CMP de PubConsent ligera, los propietarios de los sitios web pueden lograr un delicado equilibrio entre incorporar funciones valiosas de la administración de consentimiento, a la vez que se preserva la calidad de la experiencia del usuario.
Dada la importancia de la funcionalidad que proporciona una CMP (y el impacto que puede tener en el rendimiento), PubTech estableció los siguientes objetivos:
- Minimiza el impacto del producto de la CMP de PubConsent en INP.
- Reduce las tareas largas atribuibles al producto de CMP.
- Reduce el Tiempo de bloqueo total (TBT), que puede tener un efecto negativo en el INP de una página.
Cómo se midió el INP
PubTech utilizó las Herramientas para desarrolladores de Chrome para realizar un análisis inicial y un diagnóstico manual de las interacciones lentas. Este flujo de trabajo permitió a PubTech detectar problemas específicos que afectan la capacidad de respuesta de la página. Por ejemplo, una interacción de clics dentro del producto de CMP para aceptar todas las cookies y, luego, descartar el cuadro de diálogo de consentimiento de cookies provocó una tarea larga que retrasó una actualización de renderización de la interfaz de usuario. Como puedes ver en la siguiente imagen, la interfaz de usuario no se actualizó para mostrar que el diálogo se cerró hasta que se completó la tarea larga.
Al igual que el botón para aceptar todas las cookies, el botón para rechazar todas las cookies o personalizar las preferencias de cookies siguen el mismo flujo de trabajo en la arquitectura de la CMP de PubConsent. Debido a esto, las mejoras detalladas en este caso de éxito afectaron una serie de interacciones del usuario en el producto de CMP.
Este retraso provocó la percepción visual del panel en un estado bloqueado durante la tarea. Dado que bloqueó la actualización de renderización durante un período perceptiblemente prolongado, el INP de la página se vio afectado negativamente.
Cómo PubTech optimizó INP para botones y vínculos
Para mejorar el INP, se adoptaron diferentes estrategias de rendimiento en la CMP de PubConsent.
Genera tareas de alta prioridad
El método yieldToMainUiBlocking que se muestra en el siguiente fragmento de código está diseñado para optimizar las tareas de JavaScript de prioridad alta generando con scheduler.yield si están disponibles, pero usando postTask con prioridad user-blocking (alta) si postTask está disponible y, finalmente, regresando a nada.
Se evitó setTimeout aquí porque el método yieldToMainUiBlocking está diseñado para controlar operaciones de configuración de CMP internas y el trabajo de alta prioridad que debe mantener esa prioridad mientras se produce. Esto sí significa que solo los navegadores que implementan estas APIs de programación, que actualmente solo están disponibles en navegadores basados en Chromium en el momento de la redacción de este documento, se benefician de las mejoras que se detallan en este caso de éxito. Aun así, este enfoque se consideró una mejora progresiva aceptable para estas tareas de alta prioridad.
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);
});
};
Rendimiento en tareas intermedias y en segundo plano
El método yieldToMainBackground que se muestra en el siguiente fragmento de código se usa para dividir las tareas largas que tienen prioridad user-visible (media) o background. La lógica implementa scheduler.yield() si está disponible, pero difiere usando postTask con prioridad media y, por último, regresa a setTimeout en navegadores que no son de 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);
});
};
yieldToMainBackground permite que el navegador renderice la siguiente pintura (que cierra la IU de la CMP en este caso) más rápido.
Cómo PubTech redujo aún más la TBT con la optimización del diseño de renderización
Después de aplicar la estrategia de rendimiento, se descubrió que el INP había mejorado significativamente para la CMP. De hecho, después de reducir significativamente la duración de procesamiento del controlador de eventos, se descubrió la oportunidad de realizar más mejoras de renderización para la siguiente pintura de la acción Close UI. Originalmente, esta acción se diseñó para quitar elementos del DOM. Esto planteaba desafíos, especialmente en los sitios web con una cantidad considerable de nodos del DOM, lo que daba como resultado un aumento inesperado del trabajo de renderización.
Con el objetivo de abordar el aumento en el trabajo de renderización necesario para quitar elementos del DOM, se presentó una solución que el equipo llamó "de-representación diferida". Este enfoque primero aplica una regla de CSS display: none al diálogo de consentimiento de la CMP después de que el usuario da su consentimiento para ocultarlo. Luego, la eliminación de los nodos del DOM asociados con el diálogo de la CMP se cambia a un momento posterior en el que el navegador está inactivo mediante requestIdleCallback. Este enfoque demostró ser mucho más rápido que quitar los nodos del DOM en el momento en que el usuario cerró el cuadro de diálogo de consentimiento.
Cómo PubTech redujo aún más el INP mejorando la biblioteca del MTC de IAB
Después de resolver con éxito la mayoría de los problemas de capacidad de respuesta de la CMP, se identificaron más oportunidades de mejora en una de sus dependencias principales: la biblioteca del Marco de trabajo de transparencia y consentimiento (MTC) de IAB.
Los componentes más costosos en términos de procesamiento de esta biblioteca fueron "cadenas de compilación" y "consentimiento de despacho". Estos componentes son partes integrales de la biblioteca del MTC de IAB. Las siguientes optimizaciones a estos componentes se aplicaron en una bifurcación independiente, específicamente para las necesidades de PubTech:
- Reutilización de los resultados calculados para el proceso de decodificación, que se ejecuta para cada devolución de llamada de terceros que necesita leer el consentimiento del usuario.
- Se evitan y reducen los bucles innecesarios en el proceso de codificación de restricciones para publicadores, que se ejecuta cuando el usuario da su consentimiento.
La primera de estas optimizaciones redujo el tiempo que dedicaba la CMP en cada devolución de llamada de terceros que se conecta a la biblioteca del MTC de IAB. La segunda optimización redujo la duración de procesamiento incurrida por el componente de "cadenas de compilación". De hecho, esta optimización permitió reducir hasta un 60% de los bucles que se ejecutaban cada vez que un usuario expresaba su consentimiento.
Resultados
Con las estrategias de rendimiento anteriores y las nuevas optimizaciones del diseño de renderización implementadas, el INP de la CMP mejoró hasta un 65%. Como resultado, se mejoró considerablemente la capacidad de respuesta de la experiencia del usuario de la CMP de PubConsent y, en el caso de algunos anuncios, la visibilidad mejoró un 1.5% a través de la optimización cuando se solicitan anuncios.
Además de estas mejoras, en la biblioteca del MTC de IAB se observó que INP mejoró hasta un 77% en dispositivos móviles para los clientes afectados como resultado de la reducción de las tareas largas inducidas por el MTC en hasta un 85%. Esto ayudó a reducir significativamente la sobrecarga de cada devolución de llamada de terceros ejecutada durante todo el ciclo de vida de una página.
La cantidad de orígenes que pasan el INP cuando se utiliza la CMP de PubConsent mejoró más del 400%, con un aumento del 13 al 55% en los dispositivos móviles. Para algunos clientes, el INP de la página se redujo a más de la mitad (de 470 a 230 milisegundos) debido a las optimizaciones del SDK de PubTech que se realizaron.
Conclusión
Los clientes de PubTech reconocieron rápidamente el rendimiento positivo del INP y los resultados de las métricas comerciales que obtuviste a partir de nuestros esfuerzos de optimización. Se están considerando mejoras adicionales en el rendimiento de la CMP de PubConsent para aprovechar los invaluables datos de supervisión de usuarios reales (RUM) de sus clientes. Estos datos hacen un seguimiento de cerca de las regresiones y los avances, lo que impulsa los esfuerzos de mejora continua de PubTech.
Como socio externo, PubTech también se dio cuenta de que tenía la oportunidad de mejorar el rendimiento de la Web a gran escala y proporcionar una mejor capacidad de respuesta, al mismo tiempo que evita los impactos negativos en los KPI comerciales. Nunca es demasiado tarde para comenzar a implementar este tipo de mejoras.
Un agradecimiento especial a Luca Coppola, director de tecnología de PubTech por apoyar este trabajo de innovación, y a Jeremy Wagner, Michal Mocny y Rick Viscomi de Google.