📢 Cómo retrasar el banner de cookies de Complianz en WordPress y mejorar PageSpeed
El banner de cookies es fundamental para el cumplimiento legal, pero en muchos casos ralentiza la carga de la web y afecta negativamente a la puntuación en Google PageSpeed. En esta guía, aprenderás cómo retrasar su aparición hasta que el usuario haga scroll, optimizando así el rendimiento sin comprometer la legalidad. Puedes descargar el plugin desde este enlace.
🔹 ¿Por qué retrasar el banner de cookies en WordPress?
El banner de Complianz se carga de inmediato, lo que puede afectar los Core Web Vitals, en especial:
✅ Largest Contentful Paint (LCP): Hace que el contenido principal tarde más en mostrarse.
✅ Cumulative Layout Shift (CLS): Puede causar cambios en el diseño, afectando la experiencia de usuario.
✅ First Input Delay (FID): Puede ralentizar la interacción con la web.
Al retrasar la carga del banner hasta que el usuario haga scroll, evitamos estos problemas y mejoramos la puntuación en Google PageSpeed.
En la pagina oficial del plugin nos dan una solución para retrasar unos segundos la carga, pero esto no mejora el resultado del Pagespeed, 💡
Esta solución es más suave y evita problemas de CLS (Cumulative Layout Shift), mejorando la puntuación en Google PageSpeed sin afectar la experiencia de usuario.
Oculta el banner con display: none desde el inicio, evitando que Google PageSpeed lo detecte visualmente.
🛠 Paso 1: Crear un Plugin MU en WordPress
Los plugins MU (Must Use) son ideales porque se ejecutan antes que otros plugins y no dependen de activaciones manuales.
1️⃣ Accede a tu sitio vía FTP o el Administrador de Archivos de tu hosting.
2️⃣ Ve a la carpeta /wp-content/ y crea la subcarpeta mu-plugins si no existe.
3️⃣ Dentro de mu-plugins, crea un archivo llamado delay-banner.php.
🛠 Paso 2: Agregar el código para retrasar Complianz hasta el scroll
Edita el archivo delay-banner.php e introduce el siguiente código:
Puedes hacerlo con el Bloc de notas, guardando el archivo con el nombre: delay-banner.php
copia este código y añádelo :
<?php
function cmplz_delay_banner_until_scroll() {
ob_start(); ?>
<script>
document.addEventListener("DOMContentLoaded", function() {
let cmplzBanner = document.querySelector("#cmplz-cookiebanner-container");
if (cmplzBanner) {
cmplzBanner.style.display = "none"; // Oculta el banner inicialmente
}
window.addEventListener("scroll", function() {
if (cmplzBanner) {
cmplzBanner.style.display = "block"; // Muestra el banner al hacer scroll
}
}, { once: true });
});
</script>
<?php
$script = ob_get_clean();
$script = str_replace(array('<script>', '</script>'), '', $script);
wp_add_inline_script('cmplz-cookiebanner', $script);
}
add_action('wp_enqueue_scripts', 'cmplz_delay_banner_until_scroll', PHP_INT_MAX);
🛠 Paso 3: Guardar y probar la implementación
📌 Una vez guardado el archivo, comprueba que funciona correctamente:
✅ Carga la web en modo incógnito.
✅ El banner no debe aparecer hasta que hagas scroll.
✅ Revisa la consola de desarrolladores (F12 > Console) para errores.
Si todo funciona bien, habrás optimizado la carga del banner de Complianz sin comprometer el cumplimiento legal.
📈 Beneficios de esta optimización en Google PageSpeed
✔️ Menos carga inicial en el DOM: Google no detecta el banner como parte del renderizado inicial.
✔️ Mejor LCP: El contenido principal se muestra más rápido.
✔️ Reducción de CLS: No hay cambios de diseño inesperados.
✔️ Mejor UX y cumplimiento legal: El usuario sigue viendo el banner antes de aceptar cookies.
🎯 Conclusión
Retrasar el banner de Complianz hasta que el usuario haga scroll es una estrategia eficaz para mejorar la velocidad de carga, optimizar Google PageSpeed y cumplir con las normativas de cookies.
Si buscas una web más rápida y con mejor puntuación en Core Web Vitals, implementa este código hoy mismo y revisa tus mejoras en PageSpeed Insights. 🚀
Puedes ver más trucos de en Nuestro Blog
Segocomputer ayuda a tu empresa a crecer
Si quieres que nosotros tomemos el control de tu sitio hagamos que tu página aparezca en los primeros lugares de búsqueda de Google contacta con nosotros y te haremos un estudio gratuito.
Preguntas frecuentes (FAQ)
No, siempre que el banner se muestre antes de que se carguen cookies no esenciales. Este método solo retrasa la visualización hasta que el usuario haga scroll, pero no modifica la funcionalidad de Complianz ni permite cookies antes del consentimiento.
Sí. Al retrasar la carga del banner, se reduce el impacto en métricas como Largest Contentful Paint (LCP) y Cumulative Layout Shift (CLS), lo que mejora la puntuación en PageSpeed Insights y la experiencia de usuario.
Este método es compatible con la mayoría de los temas y versiones de Complianz, siempre que el plugin gestione el banner con #cmplz-cookiebanner-container. Si usas un tema muy personalizado, puedes necesitar ajustes en el código.
