Optimiza los avisos de cookies para el rendimiento y la usabilidad.
En este artículo, 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 debido a 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 de 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:
Largest Contentful Paint (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, especialmente en dispositivos móviles. En los dispositivos móviles, un aviso de cookie suele ocupar una parte más grande de la pantalla. Esto suele ocurrir cuando un aviso de cookie contiene un gran bloque de texto (los bloques de texto también pueden ser elementos LCP).
Retraso de primera entrada (FID): En términos generales, tu solución de consentimiento de cookies en sí misma debe tener un impacto mínimo en el FID; el consentimiento de cookies requiere poca ejecución de JavaScript. Sin embargo, las tecnologías que habilitan estas cookies (es decir, las secuencias de comandos de publicidad y seguimiento) pueden tener un impacto significativo en la interactividad de la página. Retrasar estas secuencias de comandos hasta la aceptación de cookies puede servir como una técnica para disminuir el retraso de primera entrada (FID).
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, puedes esperar que un aviso de cookie de proveedores externos tenga un mayor impacto en el rendimiento que un aviso de cookies que creaste tú mismo. Esto 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 enfocan 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.
Carga las secuencias de comandos de avisos de cookies de forma asíncrona
Las secuencias de comandos de avisos de cookies deben cargarse de forma asíncrona. Para ello, agrega el atributo async a la etiqueta de la secuencia de comandos.
<script src="https://cookie-notice.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. Si deseas 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 de aviso de cookies deben cargarse "directamente" colocando la etiqueta de la secuencia de comandos en el código HTML del documento principal, en lugar de cargarse mediante un administrador de etiquetas o cualquier otra secuencia de comandos. El uso de un administrador de etiquetas o una secuencia de comandos secundaria para insertar la secuencia de comandos de aviso de cookies retrasa la carga de dicha secuencia: oculta la secuencia de comandos del analizador de posición anticipada del navegador y evita que la secuencia de comandos 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 cargan 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 establecer una conexión anticipada con el origen que aloja los recursos de 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.cookie-notice.com/">
Precarga los avisos de cookies según corresponda.
Algunos sitios se beneficiarían si usan la sugerencia del recurso preload para cargar su secuencia de comandos de aviso de cookies. La sugerencia del recurso preload indica al navegador que inicie una solicitud anticipada del recurso especificado.
<link rel="preload" href="https://www.cookie-notice.com/cookie-script.js">
preload es más eficaz cuando su uso se limita a la recuperación de un par de recursos clave por página. Por lo tanto, la utilidad de la precarga de la secuencia de comandos de aviso de cookies variará según la situación.
Ten en cuenta las compensaciones de rendimiento cuando apliques diseño a 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 otras partes de la página. Además, los avisos de cookies de terceros tienden a cargarse al final de cadenas de solicitudes largas. Para evitar sorpresas, ten en cuenta cómo se carga la notificación de la cookie y cómo aplica el estilo y los recursos relacionados.
Cómo evitar 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 cambios de diseño. Si se inserta un aviso de cookie en el DOM después de que se renderizó la página circundante, los elementos de la página se moverán más abajo en la página. Este tipo de cambio de diseño se puede eliminar si se reserva espacio en el DOM para el aviso de consentimiento. Si esta no es una solución factible, por ejemplo, si las dimensiones de tu aviso de cookie varían según la ubicación geográfica, considera usar un pie de página o un modal fijo para mostrarlo. Debido a que ambos enfoques alternativos muestran el aviso de cookie como una "superposición" sobre el resto de la página, el aviso de cookie no debe provocar cambios en el contenido cuando se carga.
- Animaciones: Muchos avisos de cookies usan animaciones. Por ejemplo, "deslizar" un aviso de cookie 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 provocar cambios en el diseño. Este fenómeno es más evidente en conexiones lentas.
Optimizaciones de carga avanzadas
Estas técnicas requieren más trabajo para implementar, pero pueden optimizar aún más la carga de las secuencias de comandos de notificación de cookies:
- Almacenar en caché y entregar secuencias de comandos de avisos de cookies de terceros desde tus propios servidores puede mejorar la velocidad de entrega de estos recursos.
- El uso de service workers puede darte más control sobre la recuperación y almacenamiento en caché de secuencias de comandos de terceros, como 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.
Monitoreo de usuarios reales (RUM)
Algunas herramientas de análisis y RUM usan cookies para recopilar datos de rendimiento. En caso de que un usuario rechace el uso de cookies, estas herramientas no podrán capturar datos de rendimiento.
Los sitios deben estar al tanto de este fenómeno; también vale la pena comprender los mecanismos que usan las herramientas de RUM para recopilar sus datos. Sin embargo, para el sitio típico, esta discrepancia probablemente no sea un motivo de alarma dada la dirección y la magnitud del sesgo de los datos. El uso de cookies no es un requisito técnico para la medición del rendimiento. La biblioteca de JavaScript web-vitals es un ejemplo de una biblioteca que no usa cookies.
Según la manera en que tu sitio use las cookies para recopilar datos de rendimiento (es decir, si las cookies contienen información personal), así como de 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 utilizan en tu sitio para otros fines (por ejemplo, cookies publicitarias). Algunos sitios optan por 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, no solo se deben considerar las variaciones en el estado de la caché (por ejemplo, una visita inicial o una visita repetida) cuando se recopilan datos de rendimiento, sino también variaciones en el estado de aceptación de cookies (aceptada, rechazada o sin responder).
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 a la perfección en los entornos de lab. Por este motivo, es importante que los datos de RUM sean la piedra angular de las comparativas de rendimiento, en lugar de las herramientas sintéticas.
Prueba los avisos de cookies con WebPageTest
Guion
Puedes usar secuencias de comandos para que WebPageTest "haga clic" en el banner de consentimiento de cookies mientras se recopila un seguimiento.
Para agregar una secuencia de comandos, ve a la pestaña Script (Secuencia de comandos). La siguiente secuencia de comandos navega a la URL que se probará y, luego, hace clic en el elemento del DOM con el ID cookieButton.
combineSteps
navigate %URL%
clickAndWait id=cookieButton
Cuando uses esta secuencia de comandos, ten en cuenta lo siguiente:
combineStepsle 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 sincombineStepstambién puede ser útil: 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.clickAndWaitle indica a WebPageTest que haga clic en el elemento que indicaattribute=valuey que espere a que se complete la actividad del navegador posterior. Sigue el formatoclickAndWait attribute=Value.
Si configuraste esta secuencia de comandos correctamente, la captura de pantalla que tome WebPageTest no debería mostrar un aviso de cookie (se aceptó el aviso de cookies).
Para obtener más información sobre las secuencias de comandos de WebPageTest, consulta la documentación de WebPageTest.
Configurar cookies
Para ejecutar WebPageTest con una cookie configurada, ve a la pestaña Avanzado y agrega el encabezado de la cookie al campo Encabezados personalizados:
Cómo cambiar la ubicación de la prueba
Para cambiar la ubicación de prueba que usa WebPageTest, haz clic en el menú desplegable Ubicación de la prueba que se encuentra en la pestaña Pruebas avanzadas.
Prueba los avisos de cookies con Lighthouse
La configuración de cookies en una ejecución de Lighthouse puede servir como mecanismo para llevar una página a un estado particular para que Lighthouse la pruebe. El comportamiento de las cookies de Lighthouse varía levemente según el contexto (DevTools, CLI o PageSpeed Insights).
DevTools
Las cookies no se borran cuando se ejecuta Lighthouse desde Herramientas para desarrolladores. Sin embargo, otros tipos de almacenamiento se borran de forma predeterminada. Para cambiar este comportamiento, usa la opción Liberar espacio de almacenamiento en el panel de configuración de Lighthouse.
CLI
Ejecutar 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\"}"
Si quieres obtener más información para configurar encabezados de solicitud personalizados en la CLI de Lighthouse, consulta Cómo ejecutar Lighthouse en páginas autenticadas.
PageSpeed Insights
La ejecución de Lighthouse desde PageSpeed Insights usa una instancia de Chrome nueva y no configura ninguna cookie. PageSeed Insights no se puede configurar para configurar cookies específicas.
Experiencia del usuario
La experiencia del usuario (UX) de diferentes avisos de consentimiento de cookies es el resultado principalmente de dos decisiones: la ubicación del aviso de cookies dentro de la página y la medida en que el usuario puede personalizar el uso de cookies de un sitio. En esta sección, se analizan los posibles enfoques para estas dos decisiones.
Cuando consideres los posibles diseños para tu aviso de cookies, ten en cuenta lo siguiente:
- UX: ¿Es 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: ¿Esto satisface los requisitos legales?
- Ingeniería: ¿Cuánto trabajo implicaría implementar y mantener esto? ¿Qué tan difícil sería cambiarlo?
Posición
Los avisos de cookies se pueden mostrar como un encabezado, un elemento intercalado o un pie de página. También se pueden mostrar en la parte superior del contenido de la página con una ventana modal o como un intersticial.
Avisos de encabezado, pie de página y cookies intercaladas
Los avisos de cookies suelen colocarse en el encabezado o en el pie de página. De estas dos opciones, se prefiere la ubicación del pie de página, ya que es discreta, no compite por la atención con anuncios o notificaciones de banner y, por lo general, no causa CLS. Además, es un lugar común para establecer políticas de privacidad y condiciones de uso.
Si bien los avisos de cookies intercaladas son una opción, pueden ser difíciles de integrar en las interfaces de usuario existentes y, por lo tanto, son poco comunes.
Modales
Los modales son avisos de consentimiento de cookies que se muestran sobre el contenido de la página. Los modales pueden verse y tener un rendimiento bastante diferente según su tamaño.
Los modales más pequeños de pantalla parcial pueden ser una buena alternativa para los sitios que tienen dificultades para implementar avisos de cookies de una manera que no provoca cambios de diseño.
Por otro lado, los modales grandes que ocultan la mayor parte del contenido de una página deben usarse con cuidado. En particular, en los sitios más pequeños, es posible que los usuarios reboten en lugar de aceptar el aviso de cookies de un sitio desconocido con contenido oculto. Aunque no son necesariamente sinónimos, si estás considerando usar una opción modal de consentimiento de cookies de pantalla completa, debes estar al tanto de la legislación relacionada con los muros de cookies.
Configuración
Las interfaces de aviso de cookies brindan a los usuarios diferentes niveles de control sobre las cookies que aceptan.
Sin configuración
Estos banners de cookies de estilo de aviso no les presentan a los usuarios controles directos de UX para inhabilitar las cookies. En su lugar, suelen incluir un vínculo a la política de cookies del sitio que puede proporcionar a los usuarios información para administrar cookies con su navegador web. Estos avisos suelen incluir un botón para "descartar" o "Aceptar".
Algo de configuración
Estos avisos de cookies le brindan al usuario la opción de rechazar cookies, pero no admiten controles más detallados. Este enfoque para los avisos de cookies es menos común.
Configuración completa
Estos avisos de cookies proporcionan a los usuarios controles más detallados para configurar el uso de cookies que aceptan.
UX: los controles para configurar el uso de cookies se muestran con mayor frecuencia mediante una ventana modal independiente que se inicia cuando el usuario responde al aviso de consentimiento de cookies inicial. Sin embargo, si el espacio lo permite, algunos sitios mostrarán estos controles intercalados dentro del aviso de consentimiento inicial de cookies.
Nivel de detalle:El enfoque más común para la configuración de cookies es permitir que los usuarios habiliten las cookies por "categoría". Algunos ejemplos de categorías comunes de cookies incluyen cookies funcionales, de segmentación y de redes sociales.
Sin embargo, algunos sitios van un paso más allá y permitirán que los usuarios habiliten la opción por cookie. Como alternativa, otra forma de proporcionar 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 a los usuarios habilitar por separado los "anuncios básicos" y los "anuncios personalizados".
