Banners de cookies y Core Web Vitals: LCP, CLS e INP en verde

Un banner de cookies puede perjudicar a las tres Core Web Vitals: puede retrasar el Largest Contentful Paint (LCP) o convertirse en él, desplazar el contenido y aumentar el Cumulative Layout Shift (CLS), y hacer que el botón Aceptar parezca lento, lo que se refleja en el Interaction to Next Paint (INP). Las soluciones son conocidas: cargar el script de consentimiento de forma asíncrona, renderizar el banner como una capa superpuesta fija, diferir la interfaz secundaria y mantener ligeros los controladores de clic.

¿Por qué afectan los banners de cookies a las Core Web Vitals?

Un banner suele ser lo primero que ve un visitante nuevo, y está hecho de JavaScript, CSS y texto que compiten con tu contenido real por el ancho de banda y el tiempo del hilo principal. Las Core Web Vitals miden justamente esa competencia, evaluada en el percentil 75 de las cargas de página reales.

Métrica	Qué mide	Umbral “bueno”	Cómo puede perjudicarla un banner
LCP	Cuándo se renderiza la imagen o el bloque de texto más grande	2,5 s o menos	Un script de consentimiento que bloquea el renderizado, o el propio banner convertido en el elemento más grande
CLS	Cuánto se mueve inesperadamente el contenido visible	0,1 o menos	Un banner insertado en el flujo de la página que empuja el contenido hacia abajo
INP	Lo rápido que responde la página a clics, toques y pulsaciones de teclas	200 ms o menos	Trabajo pesado en el controlador de Aceptar o Rechazar

INP sustituyó a First Input Delay (FID) en marzo de 2024, y eso importa para el consentimiento. FID solo medía el retraso antes de procesar la primera interacción; INP mide el tiempo completo desde cualquier interacción hasta el siguiente fotograma, y “Aceptar todo” suele ser lo primero en lo que hace clic un visitante.

¿Cómo evito que el script de consentimiento bloquee el LCP?

Cárgalo con async y que sea pequeño. Un script síncrono en el <head> detiene el analizador de HTML hasta que se ha descargado y ejecutado, lo que retrasa tu titular y tu imagen principal junto con todo lo demás.

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

  <!-- Inerte hasta que el script de consentimiento lo active tras una aceptación -->
  <script type="text/plain" data-consent="analytics"
          src="https://analytics.example.com/script.js"></script>
</head>

La carga asíncrona es segura cuando las etiquetas no esenciales son inertes como esta: nada se ejecuta hasta que el script de consentimiento lo permite. Los enfoques de “bloqueo automático” que interceptan los scripts a medida que se añaden suelen tener que ejecutarse de forma síncrona antes que cualquier otro script, lo que cuesta tiempo de renderizado. Nuestra guía para bloquear scripts hasta obtener el consentimiento compara los métodos.

La segunda trampa del LCP es el propio banner. El LCP registra la imagen o el bloque de texto más grande pintado en el viewport antes de que el visitante interactúe. En un móvil pequeño, un banner con un párrafo largo puede ser más grande que tu titular, y si se pinta tarde, tu LCP llega tarde. Mantén conciso el texto de la primera capa, usa una fuente del sistema para que nunca espere a una fuente web y no publiques nunca el banner como imagen.

Retrasar el banner no ayuda: un banner tardío puede seguir convirtiéndose en el elemento LCP, solo que más tarde.

¿Cómo evito que el banner provoque desplazamientos de diseño?

Renderízalo como una capa superpuesta fija. El CLS cuenta el movimiento del contenido existente, así que un elemento con position: fixed que aparece por encima de la página no desplaza nada. El error clásico es una barra insertada al principio del <body> después del primer pintado, que empuja toda la página hacia abajo.

.consent-banner {
  position: fixed;
  inset: auto 0 0 0; /* anclado abajo, fuera del flujo del documento */
  z-index: 1000;
  font: 1rem/1.5 system-ui, sans-serif; /* sin fuente web a la que esperar */
  animation: consent-in 200ms ease-out;
}

@keyframes consent-in {
  from { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .consent-banner { animation: none; }
}

Si usas animaciones, anima transform u opacity. Animar top, height o margin cambia el diseño y puede registrarse como desplazamiento. Si tu diseño necesita de verdad un banner dentro del flujo, reserva su espacio en el HTML renderizado en el servidor, algo que solo funciona bien si el servidor lee la cookie de consentimiento y omite ese espacio para los visitantes recurrentes.

Planifica también lo que ocurre después del consentimiento. Los desplazamientos producidos en los 500 ms posteriores a un clic o una pulsación de tecla quedan excluidos del CLS, pero un espacio publicitario, un vídeo incrustado o un widget de chat que se carga unos segundos después no. Da a esos contenedores dimensiones fijas o un aspect-ratio.

¿Cómo difiero la interfaz del banner sin perjudicar el cumplimiento?

Entrega la primera capa de entrada y carga el centro de preferencias bajo demanda. La primera capa es un mensaje breve y unos pocos botones; la segunda, con interruptores por categoría, listas de proveedores y tablas de cookies, suele ser la parte pesada.

Lo que no debes diferir es la elección. “Rechazar todo” va en la primera capa con la misma visibilidad que “Aceptar todo”. En diciembre de 2021, la CNIL francesa multó a Google con 150 millones de euros y a Facebook con 60 millones de euros porque rechazar las cookies era más difícil que aceptarlas. Consulta patrones oscuros en los banners de cookies y nuestras buenas prácticas de diseño de banners.

¿Cómo consigo que Aceptar y Rechazar respondan rápido para el INP?

Haz lo mínimo antes del siguiente pintado y después cede el control. Un controlador lento suele escribir la cookie de consentimiento, enviar un registro de consentimiento, actualizar Google Consent Mode e inyectar varios scripts de proveedores en una única tarea larga, así que el botón parece congelado.

function yieldToMain() {
  if (globalThis.scheduler?.yield) return globalThis.scheduler.yield();
  return new Promise((resolve) => setTimeout(resolve, 0));
}

acceptButton.addEventListener('click', async () => {
  banner.remove();                                    // 1. primero, respuesta visible
  saveConsent({ analytics: true, marketing: true });  // 2. pequeño y síncrono
  await yieldToMain();                                // 3. deja pintar al navegador
  activateTags(['analytics', 'marketing']);           // 4. trabajo pesado en una tarea posterior
});

customizeButton.addEventListener('click', async () => {
  customizeButton.setAttribute('aria-busy', 'true');
  const { openPreferences } = await import('./preference-center.js'); // cargado bajo demanda
  openPreferences();
});

Envía el registro de consentimiento con navigator.sendBeacon() para que el trabajo de red nunca retenga la interacción, y activa las etiquetas por lotes, cediendo el control entre uno y otro. scheduler.yield() aún no está disponible en todos los navegadores; de ahí la alternativa.

¿Cómo debo medir el impacto de un banner?

Haz las pruebas como visitante nuevo y después como visitante recurrente. Las herramientas de laboratorio como Lighthouse empiezan con el almacenamiento vacío, así que siempre ven el banner:

1. Abre la página en un perfil de navegador nuevo desde una región donde aparezca el banner.
2. Ejecuta Lighthouse o PageSpeed Insights y comprueba qué elemento se registra como elemento LCP.
3. Graba una traza en el panel Performance de Chrome DevTools, haz clic en “Aceptar todo” y busca tareas largas después del clic.
4. Revisa en la misma traza los desplazamientos de diseño mientras aparece el banner y después de que se carguen las etiquetas.
5. Repite como visitante recurrente con el consentimiento guardado, ya que se ejecutan más etiquetas.
6. Compara después los datos de campo en Search Console o PageSpeed Insights; abarcan un periodo móvil de 28 días, así que los cambios se reflejan de forma gradual.

En resumen

Un banner de consentimiento no tiene por qué costarte tus Core Web Vitals. Cárgalo de forma asíncrona, mantenlo fuera del flujo del documento, difiere la pesada segunda capa y mantén ligeros los controladores de clic, sin dejar de hacer que todas las opciones sean igual de fáciles de elegir. Herramientas como Cookiesh pueden encargarse de la parte de carga, con un cargador asíncrono de menos de 5 kB comprimido con gzip, servido desde una CDN perimetral global y diseñado para evitar desplazamientos de diseño.

Este artículo ofrece información general y no constituye asesoramiento jurídico. Para tomar decisiones sobre tu situación concreta, consulta a un profesional cualificado en privacidad.