Uno de los errores más frustrantes en Google PageSpeed es el CLS (Cumulative Layout Shift). Y si usas sliders en WordPress, seguramente ya lo hayas visto en tus métricas.
Pero no te preocupes: no hace falta que cambies tu plugin de slider. Puedes solucionarlo optimizando la forma en que se carga y presenta el slider.
❝ El CLS no tiene que ver con velocidad, sino con estabilidad visual. ❞
🤔 ¿Qué es el CLS y por qué afecta a tu slider?
CLS (Cumulative Layout Shift) es una métrica de experiencia de usuario que mide cuánto se “mueven” los elementos visuales mientras tu web carga.
Los sliders suelen provocar CLS porque:
- No definen su alto (height) al principio
- Las imágenes se cargan tarde y “empujan” el contenido
- Se usan scripts o animaciones que recolocan la estructura durante la carga
🔍 ¿Cómo saber si tu slider está causando CLS?
- Abre Google PageSpeed Insights
- Analiza tu web
- Si ves esto:
Evita grandes cambios en el diseño (CLS alto)
- Haz clic en “Ver detalles” y busca si el bloque señalado es tu slider (
div,section,.slider,.rev_slider, etc.)
✅ ¿Cómo solucionar el CLS sin cambiar de plugin?
Aquí van varias estrategias que puedes aplicar en cualquier plugin de slider, como Slider Revolution, Smart Slider, MetaSlider, etc.
1. 🧱 Define el alto del contenedor del slider (¡clave!)
Si tu slider no tiene un alto fijo definido al cargar, el navegador no puede reservar espacio y todo lo que hay debajo se moverá al cargarse las imágenes.
📄 Solución en CSS:
.slider-container {
min-height: 400px; /* o la altura que tenga tu slider */
overflow: hidden;
}
❝ Reservar espacio previene movimientos inesperados y mejora el CLS automáticamente. ❞
🔧 Busca la clase principal del slider y añade esta regla en tu CSS.
2. 🖼️ Usa imágenes con width y height definidos
Cuando las imágenes no tienen dimensiones definidas, el navegador no puede calcular el espacio que ocuparán hasta que se descargan.
✅ Cómo solucionarlo:
En la configuración del plugin, asegúrate de que cada imagen tenga atributos width y height.
Si usas HTML personalizado:
<img src="/ruta/slider.jpg" width="1200" height="600" alt="Texto alternativo">
O bien, haz que WordPress lo haga automáticamente usando imágenes optimizadas desde la biblioteca.
❝ Cada imagen sin dimensiones es una bomba de CLS. ❞
3. ⏱️ Precarga las imágenes clave del slider (<link rel="preload">)
Puedes indicar al navegador que cargue antes de tiempo las imágenes del slider.
📄 Añade esto en el <head> de tu sitio:
<link rel="preload" as="image" href="/wp-content/uploads/2024/slider1.webp">
Hazlo con la primera imagen del slider, o las que más afectan al render inicial.
Puedes añadir este bloque en functions.php:
function preload_slider_images() {
echo '<link rel="preload" as="image" href="' . esc_url( get_template_directory_uri() . '/images/slider1.webp' ) . '">';
}
add_action('wp_head', 'preload_slider_images', 1);
❝ El navegador que sabe qué imagen va a mostrar, la carga antes. ❞
4. 🧠 Desactiva animaciones que reposicionen el slider al cargar
Algunos sliders hacen un “rebote” inicial (ej. desde 0px a 400px) con animaciones. Esto también cuenta como CLS.
🧩 Solución:
En la configuración del plugin, busca una opción tipo:
- «Animación al cargar»
- «Intro effect»
- «Fade in slider»
- «Initial transition»
Y desactívala si modifica la estructura visual.
❝ Las animaciones visuales deben mover elementos dentro de su espacio, no desplazar el contenido global. ❞
5. 📐 Usa una relación de aspecto (aspect ratio box)
Esto es muy útil cuando el contenido del slider es responsive y su alto depende del ancho de la pantalla.
📄 CSS con aspect-ratio (moderno):
.slider-container {
aspect-ratio: 16 / 9;
}
Este código reserva un espacio proporcional y elimina completamente el CLS causado por carga dinámica.
❝ Si no sabes cuánto mide tu slider, al menos indica su proporción. ❞
🔍 Extra: Cómo revisar el CLS con precisión
Puedes usar:
- ✅ Lighthouse
- ✅ Chrome DevTools → Pestaña “Performance” → «Layout Shift Regions»
- ✅ Web Vitals Chrome Extension
🧪 ¿Y si usas un constructor visual?
Algunos builders como Elementor, Divi o WPBakery añaden sliders en secciones. En ese caso:
- Define el alto del contenedor manualmente
- Desactiva animaciones “on load”
- Usa el módulo de slider solo si puedes controlar su altura
🏁 Resumen
No tienes que dejar de usar sliders, solo hacer que se comporten correctamente desde el primer momento de carga.
❝ El CLS no castiga el diseño bonito, castiga el diseño que se desarma mientras carga. ❞
Recuerda:
- Añade altura fija o
aspect-ratio - Predefine tamaños de imagen
- Evita movimientos iniciales
- Preload de imágenes clave
- Y revisa tu CLS después de cada cambio
✅ Siguiendo estos pasos, tendrás un slider rápido, estable y sin penalizaciones en Google PageSpeed.