Mejorar las Core Web Vitals: velocidad de carga y experiencia de usuario

Los tres valores

• LCP (Largest Contentful Paint): ¿Con qué rapidez aparece el contenido visible más grande? Valor de referencia: menos de 2,5 segundos.
• INP (Interaction to Next Paint): ¿Con qué rapidez responde la página a las acciones del usuario? Valor de referencia: menos de 200 milisegundos.
• CLS (Cumulative Layout Shift): ¿Se mueve el diseño al cargar? Valor de referencia: menos de 0,1.

Cómo medirlos

Con PageSpeed Insights o con el informe «Core Web Vitals» de Search Console. Ambos utilizan datos de visitantes reales.

Qué ayuda

• Imágenes: Formatos modernos (WebP, AVIF), tamaño adecuado y carga diferida para las imágenes fuera del área visible.
• Scripts: Menos scripts y más pequeños; eliminar los servicios que no se necesiten.
• Tipografías: Tipografías del sistema o tipografías integradas de forma local.
• Reservar espacio: Imágenes y anuncios con dimensiones fijas para que nada se mueva.
• Servidor: Entrega rápida y almacenamiento en caché.

Datos de laboratorio y datos de campo

PageSpeed Insights muestra dos mundos. Los datos de campo proceden de mediciones de visitantes reales durante un período de unos 28 días y son los que cuentan para Google. Los datos de laboratorio son una única prueba en condiciones determinadas y sirven para encontrar causas y comprobar mejoras. En las páginas poco visitadas suelen faltar los datos de campo y entonces solo quedan los de laboratorio. Importante: tras un cambio, los datos de campo tardan semanas en variar de forma apreciable.

Un ejemplo de búsqueda de errores

Supongamos que el sitio web de una empresa de oficios artesanos tiene un mal valor de LCP. El informe muestra que el elemento más grande es una imagen de cabecera en formato JPEG de varios megabytes, incrustada como imagen de fondo y que se carga tarde. La solución consta de tres pasos: reducir la imagen al ancho que realmente se muestra y convertirla a un formato moderno, incrustarla como imagen normal en lugar de como fondo CSS y no aplicar carga diferida precisamente a esa imagen. En cambio, en una imagen situada por debajo del área visible la carga diferida es lo correcto. Encontrará más información sobre la optimización de imágenes en Optimizar imágenes.

Causas típicas según el valor

• LCP deficiente: imágenes grandes, servidores lentos, scripts o tipografías que bloquean en la cabecera.
• INP deficiente: scripts pesados que ocupan el proceso principal, como widgets de chat, paquetes de seguimiento o controles deslizantes complejos.
• CLS deficiente: imágenes sin indicación de ancho y alto, banners que se cargan después, avisos de cookies que empujan el contenido hacia abajo, tipografías que cambian de tamaño al cargar.

Orden de las medidas

1. Mida los tipos de página más importantes, no solo la página de inicio: una página de servicios, un artículo, el formulario de contacto.
2. Resuelva primero el mayor problema individual. A menudo es una sola imagen o un solo script.
3. Elimine los servicios que ya nadie analiza. Cada script cuesta tiempo de carga.
4. Mida de nuevo y documente la situación.

Mito frente a realidad

Mito: es necesario un valor perfecto de 100 en PageSpeed Insights. Realidad: lo decisivo es si la página alcanza en los datos de campo los umbrales de «bueno». La puntuación de laboratorio es solo una herramienta auxiliar. Un valor en la zona verde es suficiente; más allá, el esfuerzo adicional aporta normalmente poco. La base sigue siendo una estructura limpia y apta para móviles, como la que de todos modos exige la indexación mobile-first.

Compruébelo también en el smartphone

Los valores medidos suelen diferir bastante entre el móvil y el ordenador, porque los teléfonos tienen procesadores más débiles y conexiones más lentas. Como muchos visitantes llegan desde el móvil, debería fijarse primero en los valores móviles. Pruebe además la página con un dispositivo real y más antiguo en la red móvil: lo que allí sigue resultando fluido funciona bien también en dispositivos mejores.

Expectativas realistas

La velocidad es un factor entre muchos, pero mejora de forma notable la experiencia de usuario. Más información en SEO técnico.