Mejorar PageSpeed: cómo el banner de cookies frena tu web

¿Un banner de cookies frena el tiempo de carga?

Sí, un banner de cookies puede alargar notablemente el tiempo de carga de tu web, sobre todo en el móvil y en la primera visita. Muchos banners de proveedores conocidos cargan primero un script, después una configuración, hojas de estilo, fuentes, traducciones y listas de todos los servicios integrados, a menudo desde varios servidores externos. El banner no se ve hasta que todo eso ha llegado. Como aparece en cada página y a cada visitante nuevo, este retraso afecta justo a la primera impresión. Si quieres mejorar la velocidad del sitio web, no revises solo las imágenes, el tema y los plugins, sino también el banner de cookies.

Este tema se pasa por alto a menudo porque en tu propio ordenador el banner casi nunca llama la atención. Hace tiempo que lo cerraste, tu decisión está guardada y con el wifi rápido de la oficina todo carga deprisa. En cambio, un visitante nuevo con el móvil y datos móviles vive toda la cadena de carga: primero una pantalla vacía, después el banner y quizá un salto en el diseño. Y precisamente ese visitante es el más importante para las campañas publicitarias.

¿Por qué son tan lentos muchos banners de cookies?

Un banner de cookies suele ser lento porque carga más de lo que necesita. En realidad tiene que hacer poco: mostrar un texto, ofrecer dos o tres botones, guardar la decisión y transmitirla a Google y a otros servicios. Pero muchas soluciones están construidas como plataformas universales que deben cubrir todos los idiomas, todas las jurisdicciones y cientos de servicios. Esa versatilidad cuesta tiempo de carga, aunque tu web solo necesite una pequeña parte de ella.

• Muchos archivos: script, configuración, hoja de estilo, fuente y logotipo son peticiones independientes.
• Servidores externos: cada dominio nuevo necesita su propia conexión antes de que llegue el primer archivo.
• Archivos de idioma y listas de proveedores: se cargan descripciones largas de todos los servicios, aunque casi nadie abre los detalles.
• Script bloqueante en la cabecera: si el script se carga de forma síncrona en el head, el navegador detiene la construcción de la página.
• Sin espacio reservado: si el banner se inserta más tarde en el flujo de la página, el contenido salta hacia abajo.

Cada uno de estos puntos es pequeño por sí solo. Sumados, forman una cadena en la que un archivo espera al siguiente. Sobre todo en redes móviles, no solo cuenta el tamaño en kilobytes, sino ante todo el número de peticiones y conexiones, porque cada una añade su propio tiempo de espera.

→ Banner de cookies con Consent Mode v2: conforme y sin cuota mensual

Cómo afecta el banner a LCP, INP y CLS

Un banner de cookies lento empeora directamente los Core Web Vitals, tres métricas con las que Google evalúa la carga, la respuesta y la estabilidad de una página. El Largest Contentful Paint (LCP) mide cuándo aparece el elemento visible más grande de la primera pantalla. Se considera bueno un valor de hasta 2,5 segundos. En el móvil, el banner de cookies suele ser ese elemento más grande, porque su bloque de texto ocupa buena parte de la pantalla. Si aparece tarde, el valor de LCP es malo, por muy rápido que sea el resto de la página.

Interaction to Next Paint (INP) sustituyó el 12 de marzo de 2024 a la métrica anterior, First Input Delay (FID), y mide la rapidez con la que la página responde a los clics. Se considera bueno un valor de hasta 200 milisegundos. Con el banner hay dos momentos críticos: mientras carga, su script ocupa el hilo principal del navegador. Y tras hacer clic en «Aceptar todo», a menudo se activan muchas etiquetas a la vez. Si la página responde entonces con un retraso perceptible, el INP se resiente.

Cumulative Layout Shift (CLS) mide cuánto salta el contenido durante la carga. Se considera bueno un valor de hasta 0,1. Un banner que se muestra como una capa fija sobre la página no desplaza nada. En cambio, un banner que se inserta arriba, en el flujo de la página, empuja todo hacia abajo. Quien iba a tocar un enlace acaba tocando otra cosa. Esos momentos son molestos y hacen que los visitantes abandonen la página antes.

¿Cómo se mide el rendimiento del banner de cookies?

El rendimiento del banner de cookies se mide mejor poniéndose en el lugar de un visitante nuevo. Para una primera valoración no necesitas herramientas especiales: bastan el navegador Chrome y PageSpeed Insights. Lo importante son las condiciones: sin consentimiento guardado, sin caché y con una conexión parecida a la de un móvil fuera de casa.

• Abre PageSpeed Insights en la vista para móviles y anota LCP, INP y CLS. Los avisos sobre código de terceros y recursos que bloquean el renderizado suelen mencionar directamente el banner.
• En una ventana privada, abre las herramientas de desarrollo de Chrome, desactiva la caché en la pestaña de red y ajusta la limitación a Slow 4G.
• Recarga la página y filtra por el dominio del proveedor del banner. Cuenta los archivos y suma los kilobytes transferidos.
• En la pestaña de rendimiento, inicia una grabación y comprueba a partir de qué momento es visible el banner.
• Repite cada medición varias veces y usa el valor medio, porque las ejecuciones sueltas varían mucho.

Comprueba que las extensiones del navegador, como los bloqueadores de anuncios, estén desactivadas en la ventana privada; si no, faltarán peticiones y el resultado parecerá mejor que la realidad. Los datos de campo de PageSpeed Insights proceden de usuarios reales de Chrome de los últimos 28 días y, por eso, reaccionan con retraso a los cambios. Los datos de laboratorio que aparecen debajo muestran al instante si un cambio surte efecto.

→ Configurar Google Consent Mode v2 correctamente: sin advertencias en Tag Assistant

Lo que muestra una medición en una página de prueba vacía

Una página de prueba vacía muestra lo rápido que es un banner de cookies por sí solo. Se trata de una página en la que no carga nada más que el banner, para que ningún otro elemento influya en el resultado. Trackum ha medido banners en condiciones fijas: página de prueba vacía, emulación de móvil, limitación a Slow 4G y mediana de 7 ejecuciones. Su propio banner ligero era visible a los 0,4 segundos. Los banners de proveedores conocidos aparecieron entre 1,3 y 4,3 segundos después y, para ello, cargaron entre 7 y 15 archivos, con un total de entre 150 y 210 KB.

En una página real los valores son distintos, porque las imágenes, las fuentes y los scripts compiten por el mismo ancho de banda. Pero la tendencia es la misma: cuantos menos archivos y servidores externos necesite un banner, antes aparecerá en pantalla y menos frenará el resto de la página.

Ejemplo práctico: carpintería con formulario de contacto

Una carpintería se anuncia en Google Ads con armarios empotrados a medida. La web funciona con WordPress, las imágenes están comprimidas y el tema es ligero. Aun así, PageSpeed Insights muestra un mal valor de LCP en móviles. En la pestaña de red queda claro por qué: el banner carga más de una docena de archivos desde dos servidores externos, entre ellos traducciones a idiomas que ni siquiera aparecen en la web. Solo después aparece el texto del aviso, que en el móvil es el elemento más grande.

Cargar el banner más tarde no sería una solución. El valor predeterminado de Google Consent Mode v2, la interfaz a través de la cual las etiquetas de Google conocen la decisión del visitante, tiene que estar establecido antes de que se active la primera etiqueta. De lo contrario, se envían datos sin consentimiento. La solución es un banner que pese poco desde el principio. Tras cambiar a una variante ligera, el banner aparece antes en pantalla y el formulario de contacto se sigue midiendo correctamente con y sin consentimiento.

Cómo reconocer un banner de cookies ligero

• Un único archivo con pocos kilobytes en lugar de una cadena de cargas posteriores.
• No carga textos, fuentes ni listas desde servidores externos.
• Solo los idiomas que tu página realmente necesita.
• Una capa fija que no desplaza ningún contenido.
• Consent Mode v2 integrado directamente, sin script adicional.
• «Rechazar todo» al mismo nivel que «Aceptar todo» en la primera capa.

Un banner de cookies ligero no es un banner recortado. Tiene que seguir solicitando el consentimiento correctamente, guardarlo, acreditarlo y transmitirlo a Google y a otros servicios. Solo que lo hace sin rodeos. Si estás valorando un proveedor, carga una página de prueba solo con su banner y mide tú mismo, en lugar de fiarte de los datos de su publicidad.

Mejorar el tiempo de carga sin poner en riesgo el consentimiento

El banner de Trackum es un único archivo de 6,6 KB, no carga nada adicional, está disponible en alemán e inglés, incluye Consent Mode v2 y muestra «Rechazar todo» al mismo nivel en la primera capa. Los registros de consentimiento se guardan en la UE sin dirección IP. El banner cuesta 50 € en un único pago más 4,90 € al mes, y ya está incluido en la suscripción de 19 € al mes. Todos los precios, más IVA.

Si antes quieres saber cómo está tu web, el check gratuito de Trackum la analiza en un navegador real, muestra el banner, el consentimiento y las etiquetas que se activan, e indica un precio fijo para cada problema encontrado. Tarda unos dos minutos y no requiere registro.