Cómo la CMP de PubConsent redujo el INP para sus clientes hasta en un 64% con una estrategia de rendimiento que usa las APIs de Scheduler del navegador para corregir los problemas de capacidad de respuesta que se identificaron con las Herramientas para desarrolladores de Chrome.
Las plataformas de administración de consentimiento (CMP) son herramientas que ayudan a los sitios web a satisfacer 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, como 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. La CMP de PubConsent se diseñó con un enfoque principal en el rendimiento, por lo que es liviana, garantiza una experiencia del usuario óptima y 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ó a PubTech descubrir problemas con la capacidad de respuesta de nuestra CMP. En este caso de éxito, PubTech muestra cómo resolvieron sus problemas de capacidad de respuesta en su plataforma de CMP de PubConsent y cómo mejoraron INP antes de que se convirtiera en una de las Métricas web esenciales en marzo de 2024, lo que demuestra un compromiso inquebrantable de proporcionar el mejor rendimiento posible en un producto de CMP.
¿Por qué a PubTech le importa el rendimiento?
La CMP de PubConsent, al igual que la mayoría de las CMP, 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.
Al priorizar el rendimiento y mantener la ligereza de la secuencia de comandos de la CMP de PubConsent, los propietarios de sitios web pueden lograr un delicado equilibrio entre la incorporación de funciones valiosas de administración de consentimiento y, al mismo tiempo, preservar 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 CMP de PubConsent para la INP.
- Reduce las tareas largas atribuibles al producto de CMP.
- Reduce el Tiempo de bloqueo total (TBT), lo que puede tener un efecto negativo en el INP de una página.
Cómo se midió el INP
PubTech usó las Herramientas para desarrolladores de Chrome para realizar un análisis inicial y diagnosticar interacciones lentas de forma manual. Este flujo de trabajo permitió a PubTech identificar problemas específicos que afectaban la capacidad de respuesta de las páginas. Por ejemplo, una interacción de clic en el producto de la CMP para aceptar todas las cookies y, luego, descartar el cuadro de diálogo de consentimiento de cookies, generó una tarea larga que retrasó la actualización del procesamiento 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 había cerrado hasta después de que se hubiera completado la larga tarea.
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 sigue el mismo flujo de trabajo en la arquitectura de la CMP de PubConsent. Por este motivo, las mejoras detalladas en este caso de éxito afectaron una serie de interacciones de los usuarios en el producto de la CMP.
Esta demora provocó que la percepción visual del panel estuviera bloqueado durante la tarea. Debido a que bloqueó la actualización de renderización durante un período perceptiblemente largo, el INP de la página se vio afectado de manera negativa.
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.
Entrega 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 rindiendo con scheduler.yield si está disponible, pero recurre a postTask con prioridad user-blocking (alta) si postTask está disponible y, finalmente, recurre a la nada.
En este caso, se evitó setTimeout porque el método yieldToMainUiBlocking está diseñado para controlar operaciones internas de configuración de CMP y trabajo de alta prioridad que debería conservar esa prioridad mientras se produce el rendimiento. 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 al momento de la redacción, se benefician de las mejoras detalladas 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 medianas y en segundo plano
El método yieldToMainBackground que se muestra en el siguiente fragmento de código se usa para dividir tareas largas que tienen prioridad user-visible (media) o background. La lógica implementa scheduler.yield() si está disponible, pero difiere cuando usa postTask con prioridad media y, finalmente, recurre 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 (en este caso, cierra la IU de la CMP) antes.
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 INP había mejorado significativamente para la CMP. De hecho, después de reducir significativamente la duración del procesamiento del controlador de eventos, se descubrió una oportunidad para 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 planteó desafíos, especialmente en sitios web con una cantidad considerable de nodos del DOM, lo que generó un aumento inesperado en el trabajo de representación.
A fin de abordar la mayor cantidad de trabajo de renderización necesario para quitar elementos del DOM, se presentó una solución que el equipo denominó "eliminación diferida de la representación". Este enfoque primero aplica una regla de CSS display: none al cuadro de diálogo de consentimiento de la CMP después de que el usuario otorga su consentimiento para ocultarla. Luego, la eliminación de los nodos del DOM asociados con el diálogo de la CMP se desplaza a un momento posterior, en el que el navegador está inactivo, mediante requestIdleCallback. Este enfoque demostró ser mucho más rápido que quitar 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 la INP mediante la mejora de la biblioteca del MTC de IAB
Después de resolver correctamente la mayoría de los problemas de capacidad de respuesta de la CMP, se identificaron más oportunidades de mejora en una de sus principales dependencias: la biblioteca del Marco de trabajo de transparencia y consentimiento (TCF) de IAB.
Los componentes más costosos en términos de procesamiento de esta biblioteca eran las "cadenas de compilación" y el "consentimiento de envío". Estos componentes son partes integrales de la biblioteca del MTC de IAB. Las siguientes optimizaciones a estos componentes se aplicaron en una bifurcación separada específicamente para las necesidades de PubTech:
- Reutilizar 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 evitaron y redujeron los bucles innecesarios en el proceso de codificación de restricciones para publicadores, que se ejecuta cuando el usuario otorga su consentimiento.
La primera de estas optimizaciones redujo el tiempo que dedicaba la CMP en cada devolución de llamada de terceros que se conectaba a la biblioteca del MTC de IAB. La segunda optimización redujo la duración del procesamiento que generan las “cadenas de compilación” este componente. 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 que anteriormente generaban resultados y las nuevas optimizaciones de diseño de renderización, 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 la visibilidad de algunos anuncios se incrementó incluso en un 1.5% gracias a la optimización para el momento en que se solicitan anuncios.
Además de estas mejoras, se observó en la biblioteca del MTC de IAB que INP mejoró hasta un 77% en dispositivos móviles para los clientes afectados como resultado de la reducción de hasta un 85% las tareas largas inducidas por el MTC. 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 pasaron INP cuando se usa la CMP de PubConsent mejoró más del 400%, lo que representa un aumento del 13% al 55% en 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 realizadas con el SDK de PubTech.
Conclusión
Los clientes de PubTech reconocieron rápidamente los resultados positivos de rendimiento de INP y de métricas comerciales que se generaron a partir de nuestras iniciativas de optimización. Estamos considerando mejoras adicionales en el rendimiento de la CMP de PubConsent para aprovechar los valiosos datos de supervisión de usuarios reales (RUM) de sus clientes. Estos datos hacen un seguimiento detallado de las regresiones y los avances, lo que impulsa los esfuerzos de mejora continua de PubTech.
Como tercero, PubTech también se dio cuenta de que tenía la oportunidad de mejorar el rendimiento web a gran escala y proporcionar una mejor capacidad de respuesta, al mismo tiempo que evitaba 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.