Los banners de cookies son esenciales para cumplir con las leyes de privacidad. Hay muchas maneras de instalar un banner de cookies en tu sitio WordPress, pero no todas son óptimas para el rendimiento.
En esta guía, te mostraré cómo publicar un banner de cookies y optimizar el rendimiento en tu sitio WordPress usando Termly y WP Rocket.
Componentes clave de un banner de cookies conforme a las normas
Varias leyes de protección de la intimidad, como el Reglamento General de Protección de Datos (rgpd) y la Ley de Privacidad del Consumidor de California(CCPA, por sus siglas en inglés) - exigen a las empresas que sean transparentes sobre el uso de cookies en los sitios web y permitan a los usuarios optar por aceptarlas o rechazarlas.
Dependiendo de dónde residan sus usuarios, es posible que tenga que cumplir con una o varias leyes de privacidad que regulan el uso de cookies y banners de cookies.
Un banner de cookies conforme debe:
- Solicite permiso al usuario antes de almacenar cookies en su dispositivo, con un botón de llamada a la acción claro para obtener el consentimiento.
- Proporcionar información detallada sobre cómo y por qué se utilizan las cookies.
- Incluya un enlace a la política de cookies del sitio web, que también debe informar a los usuarios sobre sus derechos en relación con las cookies de Internet.
- Enlace a la configuración de preferencias de cookies, que permite a los usuarios ajustar sus opciones de cookies o excluirse, con instrucciones claras sobre cómo hacerlo.
A continuación se muestra un ejemplo real de un banner de cookies generado por Termly.
Comprender los banners de cookies y Core Web Vitals
Aunque son necesarios para el cumplimiento de la normativa, los banners de cookies a veces pueden afectar a las Core Web Vitals de su sitio web, métricas que Google utiliza para evaluar la experiencia del usuario y el rendimiento de la página y que se centran en tres aspectos clave:
- La pintura de contenido más grande (LCP) indica la rapidez con la que el elemento de contenido más grande se hace visible en la pantalla del usuario.
- El Interaction to Next Paint (INP) calcula el tiempo que transcurre desde cada acción, como un toque o un clic, hasta el momento en que aparece en pantalla una respuesta a esta acción.
- El Desplazamiento acumulativo del diseño (CLS) evalúa la estabilidad del diseño de la página y si se produce un desplazamiento repentino del diseño durante los primeros cinco segundos.
Problemas comunes de rendimiento
Uno de los problemas de rendimiento más comunes con cualquier script que añada a su sitio -como un banner de cookies es el impacto que tiene en la velocidad de carga de la página.
Lighthouse (la herramienta que mide Core Web Vitals) también puede marcar el banner de cookies como parte del Largest Contentful Paint (LCP).
Adame Dahmani, Product Manager de WP Rocket, lo explica:
"Si el banner de consentimiento es el elemento visible de mayor tamaño en la carga inicial, se convierte en el elemento LCP, lo que afecta al rendimiento, aunque se cargue en último lugar. En algunos casos extremos, puede ser marcado como LCP a pesar de no ser el elemento más grande debido a la forma en que se añadió. Cuando esto ocurre, solucionar el problema de rendimiento es difícil, pero posible".
Y añade: "Marcar el banner como elemento LCP parece una anomalía. Independientemente de su tamaño, no hace que el contenido de la página sea menos relevante. El contenido es accesible con o sin consentimiento, salvo en el caso de incrustaciones de terceros con rastreadores".
Cómo optimizar su banner de cookies con WP Rocket y Termly
Puedes minimizar el impacto que un banner de cookies tiene en el rendimiento de tu sitio WordPress combinando dos potentes soluciones: Termly y WP Rocket.
Con WP Rocket optimizando la velocidad y Termly proporcionando su banner de cookies, usted obtiene lo mejor de ambos mundos: un sitio web que cumple con las normas y que se mantiene rápido con Core Web Vitals en verde.
¿Por qué Termly?
El Gestor de Consentimiento de Cookies de Termlyes la forma más sencilla de añadir un banner de cookies a tu web y obtener el consentimiento de tus usuarios.
Puede configurar su banner para que cumpla las leyes que le sean de aplicación y sólo aparezca en las regiones donde sea necesario. Termly también ofrece muchas otras funciones, como localización de idiomas, opciones de diseño de banners que se adaptan a su sitio web, registros de consentimiento y mucho más.
Para las empresas que utilizan WordPress, Termly ofrece un plugin que simplifica la adición de un banner de cookies a su sitio WP.
¿Por qué WP Rocket?
Necesita una forma de minimizar el impacto de los scripts en su sitio para evitar problemas de rendimiento.
Ahí es donde entra en juego el pluginWP Rocket .
Tras la activación, WP Rocket mejora el rendimiento de su sitio y su Core Web Vitals aplicando el 80% de las mejores prácticas de rendimiento.
Las funciones de rendimiento automatizado de WP Rocketincluyen:
- Almacenamiento en caché
- Compresión GZIP
- Renderizado perezoso automático
- Optimización crítica de la imagen
- Minificación de CSS y JavaScript
Estos ajustes por defecto ayudan a reducir el trabajo del hilo principal y aceleran la carga de archivos JS, permitiendo que las optimizaciones críticas se ejecuten desde el primer momento.
Además, puede activar fácilmente funciones de optimización adicionales, como retrasar y diferir JavaScript, lo que resulta muy útil para un sitio web que utilice un banner de cookies basado en JS y ampliará el esfuerzo de reducción y optimización del uso del hilo principal.
WP Rocket garantiza que los sitios de WordPress mantengan un alto rendimiento y no afecten negativamente a la experiencia del usuario o a Core Web Vitals.
Ahora que ya sabes qué soluciones vamos a utilizar, vamos a empezar por configurar tu banner de cookies desde Termly y configurar WP Rocket para obtener el máximo rendimiento.
Guía de instalación rápida y sencilla (+ prueba de rendimiento)
En esta sección, te guiaré a través de un proceso paso a paso para añadir un banner consentimiento de cookies con Termly, seguido de la instalación y configuración de WP Rocket para afinar la optimización.
Paso 1: Configurar un Banner de Consentimiento de Cookies con Termly
1. En el panel de control de WordPress, vaya a Plugins > Añadir nuevo.
2. Buscar "Termly" y haga clic en Instalar ahoraentonces Activar el plugin.
3. Una vez instalado, un Termly en la barra de menús de WordPress. Haz clic en él.
4. Escenario 1: Usted ya tiene una cuenta Termly .
- Simplemente conéctese a su cuenta de Termly utilizando su clave API. (En el panel de control de Termly , en Configuración).
5. Escenario 2: Usted no tiene una cuenta Termly .
- Haz clic en Regístrate y obtén la clave API y sigue las instrucciones para crear una.
6. Una vez que haya introducido su clave API, abra el submenú Site Scan y haga clic en Scan Now para detectar cookies en su sitio web.
7. Vaya a Gestión de cookies para añadir o editar sus cookies y categorías.
8. Vaya a Configuración del banner para activar o desactivar el banner de consentimiento en su sitio a través del conmutador de la barra lateral derecha.
Para personalizar el banner de consentimiento, haga clic en el botón Personalizar Banner. Le llevará al intuitivo panel de control de Termly .
A continuación, puede ver el aspecto de la configuración del banner de contenido y del personalizador:
A partir de ahí, puede elegir los estilos de visualización de los colores (por ejemplo, pop-up o banner) y decidir qué botón incluir.
9. Vaya a Políticas para generar documentos legales y políticas gratuitas de Termly. (Como esto no se puede hacer directamente a través de WordPress, haz clic en el botón Gestionar para acceder al panel externo de Termly ).
A continuación, puede ver el aspecto del generador automático depolítica de cookies desde el panel de control Termly :
Su banner Termly consentimiento de cookies ya está activo y listo para ayudarle a cumplir con la normativa sobre cookies.
Paso 2: Configurar WP Rocket para obtener el máximo rendimiento
Con WP Rocket, puedo mejorar el rendimiento para una experiencia de usuario aún mejor.
En este escenario, y en línea con las recomendaciones de PageSpeed Insights, WP Rocket ayudará a eliminar los recursos que bloquean la renderización, implementará el almacenamiento en caché, mejorará Largest Contentful Paint (un Core Web Vital) y optimizará la ejecución de JavaScript.
Estas son las características de WP Rocket que usaré para mejorar mi Core Web Vitals y la auditoría de PageSpeed Insights:
- Minify JavaScript - Elimina caracteres innecesarios, comentarios y espacios de los archivos JavaScript, reduciendo el tamaño del archivo para una carga más rápida. Esta característica se activa automáticamente cuando activas WP Rocket.
- Cargar JavaScript en diferido - Retrasa la carga de archivos JavaScript hasta que se haya cargado el contenido principal de la página, lo que permite a los visitantes ver el sitio más rápidamente. Esto evita que los archivos JavaScript pesados bloqueen el contenido más crítico.
- Retrasar la ejecución de JavaScript: pospone la ejecución de archivos JavaScript hasta la interacción del usuario (por ejemplo, al hacer clic en el botón banner de cookies ).
¿Y lo mejor? No necesitas tocar ningún JavaScript manualmente.
Simplemente instale el pluginWP Rocket , vaya a Configuración > WP Rocket > Optimización de archivos, y activar todas las características de optimización de JavaScript con un solo clic.
Principales resultados y datos vitales de la web
Ahora que mi sitio está optimizado con WP Rocket, veamos los resultados de la prueba de rendimiento:
Adame Dahmani explica así los resultados:
"Las funciones deWP RocketRocket permiten al navegador dar prioridad a los activos críticos, acelerando la finalización visual del contenido por encima de la página. Al reducir el procesamiento de código y aplazar los elementos no críticos, WP Rocket libera el hilo principal para tareas esenciales, como la ejecución del script de Termly. Esta optimización es directamente observable en las capturas de pantalla de la tira de película, donde el banner de cumplimiento aparece al principio del proceso de carga de la página, como se muestra a continuación:"
6 consejos para mejorar el rendimiento del sitio web
Si quieres mantener un sitio web rápido y un Core Web Vitals saludable, aquí tienes seis técnicas de rendimiento que puedes aplicar:
1. Optimice la entrega de su CSS
Asegúrese de que los archivos CSS se cargan de forma eficiente mediante el inlining de CSS crítico o el aplazamiento de estilos no esenciales para acelerar la renderización de la página. La forma más fácil de eliminar CSS no utilizado sin tocar ningún código es a través de WP Rocket, que ofrece una función de un solo clic.
2. Optimice sus imágenes
Comprime imágenes sin comprometer la calidad y utiliza formatos de última generación (como WebP o AVIF) para cargarlas más rápido. La forma más fácil y rápida de optimizar imágenes sin afectar a la calidad es utilizar un plugin de optimización de imágenes como Imagify.
3. Utilice una CDN (red de distribución de contenidos)
Una CDN almacena copias de los archivos estáticos de su sitio web en múltiples ubicaciones de todo el mundo, lo que reduce el tiempo de respuesta del servidor y acelera la entrega de contenidos a los visitantes.
4. Utilice un host fiable, rápido y gestionado por WordPress
Elija un proveedor de alojamiento especializado en WordPress y que ofrezca un rendimiento optimizado, para garantizar que su sitio se carga rápidamente y funciona sin problemas.
5. Utilice un tema de WordPress ligero
Opte por temas de WordPress rápidos y optimizados para mejorar el rendimiento, evitando opciones sobrecargadas que ralenticen su sitio.
6. Utilizar Termly y WP Rocket
Combina Termly para el cumplimiento y WP Rocket para la optimización del rendimiento para lograr puntuaciones más altas en PageSpeed Insights, mantener Core Web Vitals en la zona verde, ¡y tener un sitio web que priorice la privacidad!
Resumen
Termly es más que un simple plugin de banner de consentimiento de cookies : es una solución integral de cumplimiento de privacidad para sitios web y aplicaciones. Te ayuda a cumplir con leyes de privacidad como la rgpd, la CCPA y otras. Con plantillas prediseñadas creadas por abogados y expertos legales, Termly garantiza que sus políticas y su gestión del consentimiento sean legalmente sólidas.
Pero el cumplimiento es sólo una parte de la ecuación.
Para ofrecer a los visitantes la mejor experiencia de usuario, asegúrese de que su sitio web carga rápido con un código optimizado. Un plugin de optimización del rendimiento como WP Rocket puede ayudarte a acelerar tu sitio y mejorar Core Web Vitals sin que tengas que tocar ningún código.
Combinar el cumplimiento de las normas de privacidad con un rendimiento de primera categoría creará una experiencia segura y fiable para el visitante.
Más sobre el autor
Escrito por Marine Larmier
Marine tiene seis años de experiencia escribiendo y produciendo contenido enriquecido en el ecosistema de WordPress. Ha trabajado a distancia durante cuatro años en WPML mientras viajaba por el mundo. Con base entre Francia y Nueva Zelanda, le encanta viajar, el yoga, las puestas de sol y la cocina mundial.
Más sobre el autor
Revisado por Adame Dahmani Jefe de producto
