Google mide la experiencia de tus visitas con tres métricas llamadas Core Web Vitals. Dos de ellas son las que más fallan en WordPress: el LCP y el CLS. Afectan al posicionamiento y, sobre todo, a si la gente se queda o se va.
LCP: cuánto tarda en verse lo importante
El Largest Contentful Paint mide cuánto tarda en aparecer el elemento más grande de la pantalla al cargar: normalmente la imagen destacada, una imagen de portada o el título.
- Bueno: menos de 2,5 segundos.
- Mejorable: entre 2,5 y 4.
- Malo: más de 4.
CLS: cuánto se mueve la página
El Cumulative Layout Shift mide cuánto «salta» el contenido mientras carga. Es esa experiencia de ir a tocar un enlace y que, justo antes, aparezca una imagen o un aviso que lo empuja hacia abajo.
- Bueno: menos de 0,1.
- Malo: más de 0,25.
Encontrar al culpable
Abre tu página en PageSpeed Insights (pagespeed.web.dev), en la pestaña de móvil.
- Arriba verás los datos reales de tus visitas de los últimos 28 días (si tu sitio tiene suficiente tráfico). Son los que usa Google.
- Más abajo, el diagnóstico de laboratorio. Busca «Elemento de Largest Contentful Paint» y «Evita grandes cambios de diseño»: te dicen exactamente qué elemento es el problema.
Arreglar el LCP
1. Que la imagen principal no espere
WordPress ya hace dos cosas útiles automáticamente: no aplica carga diferida a la primera imagen grande y le agrega fetchpriority="high" para que el navegador la pida antes. Pero algunos temas, constructores y plugins de optimización lo deshacen.
Revisa el código fuente: la imagen del LCP no debe tener loading="lazy" y sí debería tener fetchpriority="high". Si tu plugin de optimización aplica carga diferida a todo, busca su opción para excluir las primeras imágenes.
2. Una imagen del tamaño justo
Una imagen de portada de 3000 px y 1,5 MB para mostrarla en un celular es el error más común. Usa WebP, con el tamaño adecuado, y deja que WordPress genere las variantes para srcset.
3. Un servidor que responda rápido
Si el primer byte tarda más de 600 ms (TTFB en el diagnóstico), ningún ajuste de imágenes lo compensa. La solución es caché de página y, si no basta, un mejor hosting.
4. Fuentes y CSS que no bloqueen
Muchas fuentes externas o un CSS enorme retrasan todo. Aloja las fuentes en tu servidor (WordPress lo permite desde la Biblioteca de fuentes en los temas de bloques) y usa solo los pesos que necesites.
Arreglar el CLS
1. Imágenes con medidas
Cada imagen debe tener width y height en el HTML, para que el navegador reserve el espacio antes de que cargue. WordPress los agrega solo en las imágenes del editor; revisa las que pone tu tema o un constructor.
2. Reserva espacio para lo que llega después
Los anuncios, los vídeos incrustados y los avisos que aparecen arriba deben tener un espacio fijo desde el principio:
/* Contenedor para un anuncio o banner que se carga después */
.espacio-anuncio {
min-height: 250px;
}
/* Vídeos incrustados: proporción fija */
.wp-block-embed iframe {
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
}Puedes pegarlo en Apariencia → Personalizar → CSS adicional o en los estilos de tu tema.
3. Fuentes que no cambien el tamaño del texto
Cuando una fuente web tarda, el navegador muestra primero una fuente del sistema y después la cambia. Si tienen tamaños distintos, todo el texto se mueve. Usa font-display: swap y, si el salto es grande, elige una fuente de respaldo parecida.
4. Banners de cookies y avisos
Un aviso que aparece arriba y empuja todo el contenido es un clásico del CLS. Que aparezca flotando sobre el contenido (abajo de la pantalla, por ejemplo) no cuenta como movimiento.
Los datos reales tardan en actualizarse. Después de corregir, el laboratorio de PageSpeed mejora al instante, pero los datos de tus visitas reales reflejan los últimos 28 días. Dale un mes antes de evaluar el resultado final.
¿PageSpeed te marca un elemento como culpable y no sabes cómo corregirlo? Comparte el enlace al informe en el foro y lo revisamos.
