Core Web Vitals: el rendimiento como factor de posicionamiento

Las tres métricas, en palabras sencillas

LCP - Largest Contentful Paint

El tiempo necesario para mostrar el elemento visible más grande en la parte superior de la página: normalmente la imagen principal o el título. Es la medida del «¿cuándo veo por fin algo útil?».

Objetivo: menos de 2,5 segundos.

INP - Interaction to Next Paint

El tiempo que pasa entre el momento en que el usuario actúa -un clic, una pulsación de tecla- y el momento en que la interfaz reacciona visiblemente. Esta métrica sustituyó al antiguo FID, que solo medía la primera interacción. El INP evalúa toda la sesión, lo que es mucho más representativo.

Objetivo: menos de 200 milisegundos.

CLS - Cumulative Layout Shift

La cantidad de movimiento imprevisto del contenido durante la carga. Es el fenómeno de sobra conocido: vas a hacer clic en un enlace, un banner se carga encima, todo baja y acabas haciendo clic en otra cosa.

Objetivo: menos de 0,1.

Mejorar el LCP

En la inmensa mayoría de los casos, el elemento que lastra el LCP es la imagen principal de la página. Las acciones, por orden de eficacia:

1. Redimensionar la imagen a su tamaño real de visualización. Una foto de 4000 píxeles de ancho en un bloque de 800 píxeles es puro derroche.
2. Convertirla a WebP o AVIF, que a menudo reducen el peso entre un 30 y un 50 % con una calidad visual equivalente.
3. No poner nunca loading="lazy" en la imagen principal visible de entrada: es el error más habitual y perjudica directamente al LCP.
4. Precargar esa imagen con <link rel="preload"> para que el navegador la solicite de inmediato.
5. Reducir el tiempo de respuesta del servidor. Un alojamiento lento o una base de datos mal indexada retrasan todo lo demás.
6. Eliminar los recursos que bloquean la carga en la cabecera: hojas de estilo pesadas, scripts síncronos.

Mejorar el INP

El INP es casi siempre un problema de JavaScript. El navegador solo puede hacer una cosa a la vez en el hilo principal: si un script lo ocupa durante 300 milisegundos, ningún clic se procesará durante ese tiempo.

• Elimina lo que no sirve. Los sitios acumulan scripts de seguimiento, de pruebas o de chat olvidados desde hace meses. Revísalos y quítalos.
• Divide las tareas largas. Una operación pesada debe devolver el control con regularidad en lugar de bloquear el hilo durante medio segundo.
• Aplaza los scripts no críticos con defer o cargándolos después de la interacción.
• Limita los scripts de terceros. Cada herramienta externa añade peso, riesgo de fallo y retraso, sobre los que no tienes ningún control.

Mejorar el CLS

Es la métrica más fácil de corregir y, a menudo, la que antes se gana.

• Declara las dimensiones de todas las imágenes e iframes, con los atributos width y height o con aspect-ratio en CSS. Así el navegador reserva el espacio incluso antes de cargar el archivo.
• Reserva el espacio de los contenidos insertados: banners, avisos de cookies, anuncios. Nunca insertes contenido por encima de algo que el usuario está leyendo.
• Usa font-display: swap con una fuente de respaldo de métricas parecidas, para evitar que el texto cambie de tamaño al cargar.
• Anima únicamente transform y opacity, que no provocan un nuevo cálculo del diseño.

Medir correctamente

Las herramientas que conviene usar y lo que aporta cada una:

• PageSpeed Insights: ofrece a la vez los datos reales, cuando existen, y un diagnóstico de laboratorio con recomendaciones priorizadas.
• Search Console, informe de Métricas web principales: muestra la evolución en el tiempo y agrupa las páginas por tipo de problema. Es la más útil para saber por dónde empezar.
• Lighthouse, integrado en el navegador: práctico para hacer pruebas en local durante el desarrollo.

Un consejo de método: mide antes de modificar, corrige un punto cada vez y vuelve a medir. Las optimizaciones agrupadas impiden saber qué ha producido realmente el efecto, y a veces una «optimización» empeora otra métrica.