Prácticas recomendadas para los avisos de cookies

Optimiza los avisos de cookies para mejorar el rendimiento y la usabilidad.

Katie Hempenius

Barry Pollard

En este documento, se analiza cómo los avisos de cookies pueden afectar el rendimiento, la medición del rendimiento y la experiencia del usuario.

Rendimiento

Los avisos de cookies pueden tener un impacto significativo en el rendimiento de la página, ya que, por lo general, se cargan al principio del proceso de carga de la página, se muestran a todos los usuarios y pueden influir en la carga de anuncios y otro contenido de la página.

A continuación, te mostramos cómo los avisos de cookies pueden afectar las métricas de las Métricas web esenciales:

• Procesamiento de imagen con contenido más grande (LCP): La mayoría de los avisos de consentimiento de cookies son bastante pequeños y, por lo tanto, no suelen contener el elemento LCP de una página. Sin embargo, esto puede suceder, en especial en dispositivos móviles. En los dispositivos móviles, el aviso de cookies suele ocupar una parte más grande de la pantalla. Esto suele ocurrir cuando un aviso de cookies contiene un gran bloque de texto (los bloques de texto también pueden ser elementos LCP).

• Interaction to Next Paint (INP): Los avisos de cookies suelen ser un motivo de INP alto, ya que suelen agregar muchas secuencias de comandos de terceros cuando se aceptan. A menudo, el problema principal es realizar la interacción Aceptar, ya que genera mucho procesamiento para agregar esas secuencias de comandos de terceros a la vez. Consulta la sección Prácticas recomendadas para saber cómo mitigar este problema.

• Cambio de diseño acumulado (CLS): Los avisos de consentimiento de cookies son una fuente muy común de cambios de diseño.

En términos generales, es probable que un aviso de cookies de proveedores externos tenga un mayor impacto en el rendimiento que un aviso de cookies que crees por tu cuenta. Este no es un problema exclusivo de los avisos de cookies, sino de la naturaleza de las secuencias de comandos de terceros en general.

Prácticas recomendadas

Las prácticas recomendadas de esta sección se centran en los avisos de cookies de terceros. Algunas de estas prácticas recomendadas, pero no todas, también se aplicarán a los avisos de cookies propias.

Comprende el impacto de los avisos de cookies en la INP

Como se mencionó anteriormente, el botón Aceptar suele ser una causa particular de problemas de INP debido a la gran cantidad de procesamiento que se produce cuando se hace clic en él.

El equipo de Chrome trabajó con varias plataformas de administración de consentimiento (CMP) para que se muestren después de hacer clic en Aceptar y permitir que el navegador reconozca esa aceptación rápidamente en la siguiente pintura. Consulta este caso de éxito de PubTech como ejemplo.

Si esto afecta a tu CMP, intenta comunicarte con ellos para ver si pueden evitar de manera similar los problemas de INP en los sitios que la incorporan. Consulta el artículo Optimize Long Tasks para obtener orientación sobre las tácticas de rendimiento.

Carga secuencias de comandos de avisos de cookies de forma asíncrona.

Las secuencias de comandos de aviso de cookies se deben cargar de forma asíncrona. Para ello, agrega el atributo async a la etiqueta de secuencia de comandos.

<script src="https://example.com/script.js" async>

Las secuencias de comandos que no son asíncronas bloquean el analizador del navegador. Esto retrasa la carga de la página y el LCP. Para obtener más información, consulta Cómo cargar JavaScript de terceros de manera eficiente.

Carga las secuencias de comandos de avisos de cookies directamente

Las secuencias de comandos del aviso de cookies deben cargarse "directamente" colocando la etiqueta de secuencia de comandos en el código HTML del documento principal, en lugar de que las cargue un administrador de etiquetas o alguna otra secuencia de comandos. El uso de un administrador de etiquetas o una secuencia de comandos secundaria para insertar la secuencia de comandos del aviso de cookies retrasa la carga de la secuencia de comandos del aviso de cookies: oculta la secuencia de comandos del analizador de anticipaciones del navegador y evita que se cargue antes de la ejecución de JavaScript.

Establece una conexión anticipada con el origen del aviso de cookies

Todos los sitios que carguen sus secuencias de comandos de aviso de cookies desde una ubicación de terceros deben usar las sugerencias de recursos dns-prefetch o preconnect para ayudar a establecer una conexión anticipada con el origen que aloja los recursos del aviso de cookies. Para obtener más información, consulta Establece conexiones de red con anticipación para mejorar la velocidad percibida de la página.

<link rel="preconnect" href="https://cdn.example.com/">

Carga previa de avisos de cookies según corresponda

Algunos sitios se beneficiarían de usar la sugerencia de recursos preload para cargar su secuencia de comandos de aviso de cookies. La sugerencia del recurso preload le informa al navegador que inicie una solicitud anticipada del recurso especificado.

<link rel="preload" href="https://www.example.com/cookie-script.js">

preload es más potente cuando su uso se limita a recuperar un par de recursos clave por página. Por lo tanto, la utilidad de la carga previa de la secuencia de comandos del aviso de cookies variará según la situación.

Ten en cuenta las compensaciones de rendimiento al definir el diseño de los avisos de cookies

Personalizar el aspecto de un aviso de cookies de terceros puede generar costos de rendimiento adicionales. Por ejemplo, los avisos de cookies de terceros no siempre pueden reutilizar los mismos recursos (por ejemplo, fuentes web) que se usan en otra parte de la página. Además, los avisos de cookies de terceros suelen cargar el diseño al final de cadenas de solicitudes largas. Para evitar sorpresas, ten en cuenta cómo se carga el aviso de cookies y se aplican los diseños y los recursos relacionados.

Evita los cambios de diseño

Estos son algunos de los problemas de cambio de diseño más comunes asociados con los avisos de cookies:

• Avisos de cookies en la parte superior de la pantalla: Los avisos de cookies en la parte superior de la pantalla son una fuente muy común de cambio de diseño. Si se inserta un aviso de cookies en el DOM después de que la página circundante ya se haya renderizado, los elementos de la página se desplazarán más abajo en la página. Para eliminar este tipo de cambio de diseño, se puede reservar espacio en el DOM para el aviso de consentimiento. Si esta no es una solución viable, por ejemplo, si las dimensiones de tu aviso de cookies varían según la ubicación geográfica, considera usar un pie de página fijo o un cuadro modal para mostrar el aviso de cookies. Debido a que ambos enfoques alternativos muestran el aviso de cookies como una "superposición" sobre el resto de la página, el aviso de cookies no debería causar cambios de contenido cuando se carga.
• Animaciones: Muchos avisos de cookies usan animaciones. Por ejemplo, “deslizar” un aviso de cookies es un patrón de diseño común. Según cómo se implementen estos efectos, pueden provocar cambios de diseño. Para obtener más información, consulta Cómo depurar cambios de diseño.
• Fuentes: Las fuentes que se cargan tarde pueden bloquear la renderización o causar cambios de diseño. Este fenómeno es más evidente en las conexiones lentas.

Optimizaciones de carga avanzadas

Estas técnicas requieren más trabajo para implementarse, pero pueden optimizar aún más la carga de secuencias de comandos de aviso de cookies:

• Almacenar en caché y entregar secuencias de comandos de aviso de cookies de terceros desde tus propios servidores puede mejorar la velocidad de entrega de estos recursos.
• El uso de service workers te permite tener más control sobre la recuperación y el almacenamiento en caché de secuencias de comandos de terceros, como las secuencias de comandos de aviso de cookies.

Medición del rendimiento

Los avisos de cookies pueden afectar las mediciones de rendimiento. En esta sección, se analizan algunas de estas implicaciones y técnicas para mitigarlas.

Supervisión de usuarios reales (RUM)

Algunas herramientas de estadísticas y RUM usan cookies para recopilar datos de rendimiento. En el caso de que un usuario rechace el uso de cookies, estas herramientas no podrán capturar datos de rendimiento.

Los sitios deben tener en cuenta este fenómeno. También vale la pena comprender los mecanismos que usan tus herramientas de RUM para recopilar sus datos. Sin embargo, para el sitio típico, esta discrepancia probablemente no sea motivo de preocupación, dada la dirección y magnitud del sesgo de datos. El uso de cookies no es un requisito técnico para medir el rendimiento. La biblioteca de JavaScript web-vitals es un ejemplo de una biblioteca que no usa cookies.

Según la forma en que tu sitio use las cookies para recopilar datos de rendimiento (es decir, si las cookies contienen información personal), así como la legislación en cuestión, el uso de cookies para la medición del rendimiento podría no estar sujeto a los mismos requisitos legislativos que algunas de las cookies que se usan en tu sitio para otros fines, por ejemplo, las cookies publicitarias. Algunos sitios eligen desglosar las cookies de rendimiento como una categoría independiente de cookies cuando solicitan el consentimiento del usuario.

Supervisión sintética

Sin la configuración personalizada, la mayoría de las herramientas sintéticas (como Lighthouse y WebPageTest) solo medirán la experiencia de un usuario nuevo que no respondió a un aviso de consentimiento de cookies. Sin embargo, cuando se recopilan datos de rendimiento, no solo se deben tener en cuenta las variaciones en el estado de la caché (por ejemplo, una visita inicial en comparación con una visita repetida), sino también las variaciones en el estado de aceptación de las cookies (aceptada, rechazada o sin respuesta).

Prueba los avisos de cookies con WebPageTest

En las siguientes secciones, se analiza la configuración de WebPageTest y Lighthouse que puede ser útil para incorporar avisos de cookies en los flujos de trabajo de medición del rendimiento. Sin embargo, las cookies y los avisos de cookies son solo uno de los muchos factores que pueden ser difíciles de simular perfectamente en entornos de lab. Por este motivo, es importante que los datos de RUM sean la piedra angular de tus comparativas de rendimiento, en lugar de las herramientas sintéticas.

Usa secuencias de comandos

Puedes usar secuencias de comandos para que WebPageTest "haga clic" en el banner de consentimiento de cookies mientras recopila un registro.

Para agregar una secuencia de comandos, ve a la pestaña Secuencia de comandos. La siguiente secuencia de comandos navega a la URL que se probará y, luego, hace clic en el elemento DOM con id=cookieButton.

combineSteps
navigate    %URL%
clickAndWait    id=cookieButton

Cuando uses esta secuencia de comandos, ten en cuenta lo siguiente:

• combineSteps le indica a WebPageTest que “combine” los resultados de los pasos de la secuencia de comandos que siguen en un solo conjunto de seguimientos y mediciones. Ejecutar esta secuencia de comandos sin combineSteps también puede ser útil, ya que los seguimientos separados facilitan ver si los recursos se cargaron antes o después de la aceptación de cookies.
• %URL% es una convención de WebPageTest que hace referencia a la URL que se está probando.
• clickAndWait le indica a WebPageTest que haga clic en el elemento indicado por attribute=value y espere a que se complete la actividad del navegador posterior. Sigue el formato clickAndWait attribute=Value.

Si configuraste esta secuencia de comandos correctamente, la captura de pantalla que tomó WebPageTest no debería mostrar un aviso de cookies (se aceptó el aviso de cookies).

Para obtener más información sobre la secuencia de comandos de WebPageTest, consulta la documentación de WebPageTest.

Establecer cookies

Para ejecutar WebPageTest con una cookie establecida, ve a la pestaña Advanced y agrega el encabezado de cookie al campo Custom headers:

Cómo cambiar la ubicación de prueba

Para cambiar la ubicación de prueba que usa WebPageTest, haz clic en el menú desplegable Ubicación de prueba que se encuentra en la pestaña Pruebas avanzadas.

Cómo probar los avisos de cookies con Lighthouse

Configurar cookies en la ejecución de Lighthouse puede servir como mecanismo para que una página entre en un estado particular a fin de que Lighthouse pruebe las cookies. El comportamiento de las cookies de Lighthouse varía ligeramente según el contexto (DevTools, CLI o PageSpeed Insights).

Herramientas para desarrolladores

Las cookies no se borran cuando se ejecuta Lighthouse desde las Herramientas para desarrolladores. Sin embargo, otros tipos de almacenamiento se borran de forma predeterminada. Puedes cambiar este comportamiento con la opción Clear Storage en el panel de configuración de Lighthouse.

CLI

La ejecución de Lighthouse desde la CLI usa una instancia nueva de Chrome, por lo que no se configuran cookies de forma predeterminada. Para ejecutar Lighthouse desde la CLI con un conjunto de cookies en particular, usa el siguiente comando:

lighthouse <url> --extra-headers "{\"Cookie\":\"cookie1=abc; cookie2=def; \_id=foo\"}"

Para obtener más información sobre cómo configurar encabezados de solicitud personalizados en Lighthouse CLI, consulta Cómo ejecutar Lighthouse en páginas autenticadas.

PageSpeed Insights

Cuando se ejecuta Lighthouse desde PageSpeed Insights, se usa una instancia nueva de Chrome y no se configura ninguna cookie. Las estadísticas de PageSeed no se pueden configurar para establecer cookies específicas.

Experiencia del usuario

La experiencia del usuario (UX) de los diferentes avisos de consentimiento para el uso de cookies es principalmente el resultado de dos decisiones: la ubicación del aviso de cookies dentro de la página y el grado en que el usuario puede personalizar el uso de cookies de un sitio. En esta sección, se analizan posibles enfoques para estas dos decisiones.

A continuación, se incluyen algunos aspectos que debes considerar cuando consideres posibles diseños para tu aviso de cookies:

• UX: ¿Es esta una buena experiencia del usuario? ¿Cómo afectará este diseño en particular a los elementos de página y los flujos de usuarios existentes?
• Empresa: ¿Cuál es la estrategia de cookies de tu sitio? ¿Cuáles son tus objetivos para el aviso de cookies?
• Legal: ¿Cumple con los requisitos legales?
• Ingeniería: ¿Cuánto trabajo sería implementar y mantener esto? ¿Qué tan difícil sería el cambio?

Posición

Los avisos de cookies se pueden mostrar como encabezado, elemento intercalado o pie de página. También se pueden mostrar en la parte superior del contenido de la página con una ventana modal o se pueden entregar como un anuncio intersticial.

Avisos de cookies intercalados, de encabezado y de pie de página

Por lo general, los avisos de cookies se colocan en el encabezado o el pie de página. De estas dos opciones, se suele preferir la ubicación del pie de página porque es discreta, no compite por la atención con anuncios o notificaciones de banner y, por lo general, no genera CLS. Además, es un lugar común para colocar políticas de privacidad y condiciones de uso.

Si bien los avisos de cookies intercalados son una opción, pueden ser difíciles de integrar en interfaces de usuario existentes y, por lo tanto, son poco comunes.

Ventanas modales

Los diálogos son avisos de consentimiento de cookies que se muestran sobre el contenido de la página. Los diálogos modales pueden verse y tener un rendimiento muy diferente según su tamaño.

Los modales más pequeños y de pantalla parcial pueden ser una buena alternativa para los sitios que tienen dificultades para implementar avisos de cookies de una manera que no cause cambios de diseño.

Por otro lado, los modales grandes que ocultan la mayoría del contenido de la página deben utilizarse con cuidado. En particular, es posible que los sitios más pequeños noten que los usuarios abandonan el sitio en lugar de aceptar el aviso de cookies de un sitio desconocido con contenido oculto. Si bien no son conceptos sinónimos, si estás considerando usar un diálogo modal de consentimiento para cookies de pantalla completa, debes tener en cuenta la legislación sobre los muros de cookies.

Capacidad de configuración

Las interfaces de los avisos de cookies les brindan a los usuarios diferentes niveles de control sobre las cookies que aceptan.

No se puede configurar

Estos banners de cookies de estilo aviso no presentan a los usuarios controles de UX directos para inhabilitar las cookies. En cambio, suelen incluir un vínculo a la política de cookies del sitio, que puede proporcionar a los usuarios información para administrar las cookies con su navegador web. Por lo general, estos avisos incluyen los botones “Quitar” y “Aceptar”.

Configurabilidad

Estos avisos de cookies le brindan al usuario la opción de rechazar cookies, pero no admiten controles más detallados. Este enfoque sobre los avisos de cookies es menos común.

Configurabilidad completa

Estos avisos de cookies proporcionan a los usuarios controles más detallados para configurar el uso de cookies que aceptan.

• UX: Por lo general, los controles para configurar el uso de cookies se muestran con una ventana modal independiente que se inicia cuando el usuario responde al aviso inicial de consentimiento de cookies. Sin embargo, si el espacio lo permite, algunos sitios mostrarán estos controles intercalados dentro del aviso de consentimiento inicial para las cookies.

• Detalle: El enfoque más común para la configurabilidad de las cookies es permitir que los usuarios acepten las cookies por "categoría". Algunos ejemplos de categorías de cookies comunes incluyen las cookies funcionales, de segmentación y de redes sociales.

  Sin embargo, algunos sitios dan un paso más y permiten que los usuarios acepten la opción de cada cookie. Como alternativa, otra forma de proporcionarles a los usuarios controles más específicos es desglosar las categorías de cookies, como "publicidad", en casos de uso específicos; por ejemplo, permitir que los usuarios acepten por separado los "anuncios básicos" y los "anuncios personalizados".