¿Cómo optimizar PageSpeed al utilizar Consentmanager?

Si utilizas (cualquier) banner de cookies en tu sitio web, la velocidad del sitio web será menor debido a la cantidad de scripts adicionales que hay que cargar. Aquí tienes algunos consejos para mejorar la velocidad de tu página:

Optimización técnica

Utiliza un tiempo de almacenamiento en caché elevado

Puedes configurar el tiempo durante el cual se almacenan en caché los scripts en Menú > CMP > Otros. El valor predeterminado aquí es de 30 minutos. Al utilizar valores más altos, permites un almacenamiento en caché más prolongado y evitas que los usuarios tengan que solicitar los códigos de nuevo con demasiada frecuencia.

Utiliza código de bloqueo semiautomático

El CMP te ofrece dos versiones de código: código de bloqueo automático y código de bloqueo semiautomático/manual. El código de bloqueo semiautomático se carga de forma asíncrona y, por lo tanto, tendrá un menor impacto en el rendimiento de tu página. Siempre recomendamos utilizar el código de bloqueo semiautomático.

Añade el código directamente en la página

Siempre se recomienda añadir el código CMP directamente al código de tu sitio web en lugar de hacerlo a través de un TagManager o similar. El uso de un gestor de etiquetas retrasará la carga de la página entre 200 y 500 ms, lo que afectará negativamente a tus puntuaciones CLS/LCP (véase más abajo).

Incluye el código CMP lo antes posible en tu sitio web

Para que el CMP se cargue rápidamente, debes añadir el código del CMP lo antes posible en tu <body> o <head> .

Utiliza preconnect

Para reducir los tiempos de conexión, puedes añadir el siguiente código a tu <head>:

<link rel="preconnect" href="https://delivery.consentmanager.net">
<link rel="preconnect" href="https://cdn.consentmanager.net">

Nota: Dependiendo de la configuración de tu cuenta, las URL que utilice tu CMP pueden ser diferentes. Asegúrate de añadir siempre el subdominio completo (por ejemplo, a.delivery.consentmanager.net) como preconectado.

Optimización del diseño

Cambio acumulativo de diseño (CLS)

Para el motor de búsqueda de Google, el cambio acumulativo de diseño (CLS) es un factor de posicionamiento relevante. Para reducir el impacto del CLS en tu sitio web, te recomendamos lo siguiente:

  • No utilices fuentes externas (sino solo archivos de fuentes alojados en tu propio servidor si es necesario) en el CSS personalizado del diseño de tu ConsentManager.
  • No utilices imágenes externas (ni ningún tipo de imagen) en el código HTML personalizado del diseño de tu ConsentManager. Si es posible, utiliza imágenes SVG incrustadas para evitar una descarga adicional del archivo de imagen.
  • No utilices CSS externo (reglas @import) en el CSS personalizado del diseño de tu ConsentManager.
  • No utilices el modo de diseño de ConsentManager "Push down" (CMP > Diseños > Ajustes del cuadro), que aparecerá en la parte superior de la ventana

Largest Contentful Paint (LCP)

Al igual que el CLS (mencionado anteriormente), el LCP es otro factor de posicionamiento. Para reducir el impacto del LCP en tu sitio web, te recomendamos lo siguiente:

  • Sigue las recomendaciones técnicas anteriores (colocación del código, preconnect, etc.).
  • Utiliza el modo proxy de marca blanca siempre que sea posible
  • Intenta diseñar la capa de consentimiento para que ocupe el menor espacio posible (normalmente solo es posible con diseños para ordenador).
  • Configura los ajustes de CMP para que la capa de consentimiento solo se muestre en países de la UE/EEE, con el fin de reducir el impacto en el LCP en otros países.
  • Si la velocidad de carga es esencial, recomendamos no utilizar importaciones (variable de configuración cmp_waitforimport) y establecer el ámbito del consentimiento en «consentimiento específico del dominio» (Menú > CMP > Ajustes legales > Ámbito del consentimiento).
  • Evita los diseños con imágenes de fondo (por ejemplo, diseños con ilustraciones de cookies).
  • Reduce el tamaño del texto más extenso utilizando varias <div> o <p> en lugar de un solo texto grande
  • Puedes configurar Menú > Diseños > Editar > Comportamiento para que la capa solo aparezca tras x segundos y/o al mover el ratón. Esto puede ayudar a gestionar el LCP.

Interacción hasta la siguiente pintura (INP)

El INP describe el tiempo que tarda el navegador en procesar la interacción del usuario (por ejemplo, hacer clic en «Aceptar») hasta el momento en que la interfaz reacciona. En tu configuración de ConsentManager, esto depende principalmente de: a) el número de proveedores y b) las opciones de diseño que estés utilizando. A continuación te ofrecemos algunas recomendaciones para reducir el valor del INP:

  • Utiliza el menor número posible de proveedores
  • Agrupa a los proveedores de manera uniforme según los fines (por ejemplo, es más rápido utilizar 10 proveedores por cada 10 fines que 100 proveedores agrupados en un solo fin).
  • Evita la animación de los botones de alternancia, ya sea no mostrándolos en la primera capa (muestra solo el texto o la lista) o desactivando la animación en Menú > CMP > Ajustes generales y estableciendo la animación en 0:
  • Utiliza un diseño que no muestre los proveedores en la primera capa (por ejemplo, sin una lista de proveedores desplegada en la primera capa).
  • Utiliza un diseño que solo muestre una parte de los proveedores en la segunda capa (capa de preferencias). Puedes configurarlo en los ajustes de diseño expandiendo el cuadro «Página de ajustes personalizados» > Menú. Utiliza un diseño con menú y evita los diseños sin menú o los diseños con carrusel expandido.

We do our best to keep this purely informative documentation up to date. However, if you notice that any of these guides need a little touch-up, let us know!