Core Web Vitals: guía para mejorar LCP, INP y CLS

Las tres métricas y sus umbrales

Los umbrales se evalúan normalmente en el percentil 75 de las visitas. Esto significa que una prueba rápida en tu ordenador no representa por sí sola la experiencia de usuarios con otros dispositivos, redes y ubicaciones.

Datos de campo frente a datos de laboratorio

Los datos de campo proceden de visitas reales y reflejan condiciones variadas. Search Console y el conjunto de datos de Chrome UX Report los agrupan por URL o por origen cuando existe muestra suficiente. Son la referencia para saber si el problema afecta a usuarios reales.

Las herramientas de laboratorio reproducen una carga controlada. Sirven para depurar, repetir pruebas y localizar oportunidades, pero su puntuación puede cambiar según el equipo, la configuración y el momento. Utiliza ambos tipos: campo para priorizar y laboratorio para investigar.

Cómo mejorar el LCP

Primero identifica cuál es el elemento LCP en cada plantilla. Puede ser una imagen principal, un bloque de texto o un banner. Después separa el tiempo de respuesta del servidor, el descubrimiento del recurso, la descarga y el renderizado.

• Reduce el tiempo de respuesta y usa caché donde sea apropiado.
• No cargues de forma diferida la imagen principal.
• Prioriza el recurso LCP y evita que dependa de JavaScript tardío.
• Sirve imágenes con dimensiones y formato adecuados.
• Minimiza CSS y fuentes que bloquean el primer renderizado.

Cómo mejorar el INP

INP observa la latencia de las interacciones a lo largo de la visita. Un hilo principal ocupado por tareas largas retrasa la respuesta visual. Divide trabajo, reduce JavaScript innecesario y evita ejecutar lógica costosa en cada clic o pulsación.

Revisa terceros, gestores de etiquetas, widgets y código propio. Una optimización técnica que rompe analítica, formularios o consentimiento no es una mejora completa; prueba las rutas de negocio después de cada cambio.

Cómo reducir el CLS

• Reserva espacio con dimensiones o relación de aspecto para imágenes y vídeos.
• No insertes banners por encima del contenido sin un hueco previsto.
• Precarga fuentes críticas y configura alternativas compatibles.
• Anima transformaciones en lugar de propiedades que recalculan el diseño.
• Comprueba cabeceras, menús, avisos de cookies y componentes tardíos.

El CLS puede producirse después de la carga inicial, por ejemplo al abrir un acordeón o mostrar una validación. Observa la sesión completa y no solo la captura de PageSpeed.

Un plan de mejora que no se queda en la puntuación

1. Agrupa URLs por plantilla.
2. Compara datos de campo y volumen de negocio.
3. Reproduce el problema en una plantilla representativa.
4. Aplica un cambio medible y controla regresiones.
5. Despliega por etapas y espera nueva muestra de campo.

Caso práctico: hero visual que empeora el LCP

Una imagen principal puede estar comprimida y seguir cargando tarde porque el navegador no la descubre hasta ejecutar JavaScript. En ese caso, reducir unos kilobytes ayuda menos que incluirla en el HTML inicial, priorizarla y servir una variante adecuada al viewport.

Mide antes y después en laboratorio, vigila que el diseño no pierda nitidez y espera datos de campo. Si el cambio solo mejora una plantilla sin tráfico, quizá tenga menos prioridad que un INP deficiente en el proceso de compra.

Preguntas frecuentes