¿Los banners de cookies ralentizan tu web?

Todos los artículos

Un banner de cookies puede ralentizar tu web, pero el banner casi nunca es lo que más pesa. El script que lo dibuja es pequeño. El coste llega en cuanto alguien acepta: todas las herramientas de analítica, publicidad y grabación de sesiones que el banner tenía en espera se disparan a la vez, en un único hilo principal, cuando la página ya se ha pintado.

Dos cosas distintas a las que llamamos "el banner"

Cuando alguien dice que el banner de cookies le ha ralentizado la web, suele estar hablando de uno de dos costes distintos, y lo que hay que hacer depende de cuál sea.

El primero es la propia capa de consentimiento: un script que decide si mostrar un diálogo, lo dibuja, guarda la respuesta y la comunica. Es muy poco trabajo, de verdad. Un script de consentimiento es un diálogo y un poco de estado, y los que están bien hechos cargan de forma asíncrona y reservan su propio espacio.

El segundo es todo lo que la capa de consentimiento tenía retenido: tu gestor de etiquetas, la analítica, los píxeles publicitarios, la grabación de sesiones, el widget de chat. Nada de eso se ejecutaba mientras el visitante decidía. Todo se ejecuta en cuanto acepta y, como se libera cuando la página ya se ha pintado, cae sobre un hilo principal que el visitante ya está intentando usar.

De ahí sale algo que casi todos los consejos de rendimiento se saltan: quien rechaza recibe una página bastante más rápida que quien acepta. No sirves una web, sino dos, y tu monitorización hace la media de ambas.

Las cuatro formas en que un banner sí te pasa factura

Los mecanismos están bien documentados, y los cuatro tienen arreglo.

Bloqueo del renderizado. Un script de consentimiento cargado sin async ni defer detiene el análisis del HTML mientras se descarga. Ese retraso llega antes de que la página pueda pintar nada, incluso en visitas repetidas, cuando la respuesta ya está guardada y el banner ni siquiera va a aparecer.

El banner se convierte en tu Largest Contentful Paint. Si ocupa buena parte de la pantalla y llega después que el bloque principal de la página, el navegador mide el banner en vez de tu contenido. El umbral de Google es de 2,5 segundos, y un banner que se pinta a los 3 segundos acaba de decidir tu puntuación.

Saltos de diseño. Un banner insertado en el flujo del documento, en lugar de superpuesto, empuja hacia abajo todo lo que tiene debajo. El Cumulative Layout Shift debería quedarse por debajo de 0,1, y una barra a todo lo ancho que aparece medio segundo tarde se come ese margen ella sola.

El propio clic de aceptar. Cuando el código de consentimiento inicializa cuatro proveedores de forma síncrona, el clic que cierra el banner congela la página. El Interaction to Next Paint debería quedarse por debajo de 200 milisegundos. Este la gente lo nota sin saber cómo se llama, porque es el que da la sensación de que algo está roto.

Por qué tu puntuación de PageSpeed no ve el camino caro

Aquí está el hueco de casi todos los artículos sobre el tema. Lighthouse y PageSpeed Insights cargan tu página en un perfil limpio, sin consentimiento guardado, toman sus medidas y se paran ahí. No hacen clic en nada. Así que el estado que miden es el previo a la elección: tu página, más un banner, con todas las etiquetas todavía retenidas detrás de un botón que nadie ha pulsado.

Es una imagen legítima de quien entra por primera vez. También es la página más barata que sirves. El camino de aceptación, el estado más pesado de tu web, no aparece nunca en la puntuación de laboratorio, así que los equipos optimizan el único número que ven mientras el camino caro pasa años sin medirse. Hay que ir a mirarlo a propósito, y se tarda unos diez minutos.

Cómo medir tu propio banner por los dos caminos

1. Toma una referencia con el banner desactivado

   Haz una traza de la página con el script de consentimiento bloqueado del todo desde el panel de bloqueo de peticiones del navegador. Ese es tu suelo. Sin él no puedes distinguir lo que cuesta el consentimiento de lo que cuesta todo lo que el consentimiento libera.

2. Mide lo que ve quien entra por primera vez

   La prueba por defecto de PageSpeed Insights: perfil limpio, sin elección guardada, banner en pantalla. La diferencia respecto al suelo es el coste real del banner en sí, y en uno bien hecho es pequeño.

3. Graba a mano el camino de aceptación

   Abre el panel de rendimiento, empieza a grabar, carga la página, haz clic en aceptar y sigue grabando unos segundos. Ahora sí ves lo que llega de verdad: cuántas peticiones dispara la elección y cuánto tiempo se queda bloqueado el hilo principal. Ninguna puntuación automática te lo va a enseñar, y por eso tan poca gente lo ha mirado.

4. Graba también el camino de rechazo

   Repite la traza y haz clic en rechazar. En una web con Consent Mode v2 bien configurado deberías seguir viendo salir peticiones a Google, sin identificadores. Es el diseño haciendo lo que debe, no una fuga, y vale la pena comprobarlo con tus propios ojos antes de que nadie te diga lo contrario.

5. Separa tus datos de campo por estado de consentimiento

   Las trazas de laboratorio te dicen lo que puede pasar; los datos de campo, lo que pasa. Si tu monitorización mezcla a todos los visitantes, promedia un camino de rechazo rápido con uno de aceptación lento y esconde los dos. Si la tuya admite una dimensión personalizada, guarda en ella el estado de consentimiento y analiza los dos grupos por separado.

Qué cambia Consent Mode y qué no

Muchas guías siguen describiendo el consentimiento como un interruptor de todo o nada: no se ejecuta ningún script hasta que el visitante dice que sí. Así funciona una capa de consentimiento que bloquea, pero no una web con Consent Mode v2. Con el modo avanzado, las etiquetas de Google se cargan en todas las páginas, sea cual sea la respuesta; la señal cambia lo que pueden guardar y enviar, no el hecho de que estén ahí. Así que si tu plan para acelerar la web era condicionar las etiquetas de Google al consentimiento, el peso no se va. Lo único que elimina el coste de una etiqueta es quitarla.

Conviene decir con claridad qué se gana a cambio, porque es la razón real para aceptar ese peso. Configurar las señales de la v2 es lo que permite a Google modelar parte de lo que un rechazo borraría, una vez que tu web alcanza los umbrales que Google publica para el modelado. Las cifras modeladas son estimaciones, no conversiones que alguien haya observado, y cuánto se modela depende de tu mezcla de tráfico, de tus regiones y de cómo estén configuradas tus etiquetas. Una configuración que bloquea te da una página algo más rápida que registra menos de lo que pasó en ella.

El suelo que no se puede optimizar

Parte de este coste es permanente, y hacer como si no lo fuera es lo que lleva a los proveedores a prometer cosas que no pueden cumplir. Siempre vas a pagar por el script que decide si muestra un diálogo, por leer la respuesta guardada antes de que arranquen tus etiquetas y por las etiquetas que de verdad necesitas.

Lo que sí puedes quitar es todo lo demás: la carga síncrona, la barra que se inyecta tarde y sin espacio reservado, los cuatro proveedores que arrancan con un solo clic, la etiqueta que nadie ha revisado desde 2023. Según nuestra experiencia, esa última suele ser la mayor mejora que tienes a mano, y no tiene nada que ver con el consentimiento.

La velocidad importa también por otro motivo, que explicamos en Cómo subir la aceptación de cookies sin patrones engañosos: un banner que va lento se cierra por impaciencia, no por preferencia.

El enfoque de Velo es el aburrido: servir la capa de consentimiento desde el edge, que sea asíncrona, reservarle su espacio para que nada se mueva y pasar la elección a tus etiquetas lo bastante rápido como para que nada de lo que viene detrás tenga que esperar. La ingeniería interesante está en lo que pasa después de la respuesta, no en el diálogo que la recoge.