¿Qué miden los Core Web Vitals?
Respuesta corta: LCP mide la representación del elemento de contenido visible más grande, INP la capacidad de respuesta después de una interacción y CLS la estabilidad del diseño. Google recomienda calificarlos en el percentil 75, por separado en dispositivos móviles y de escritorio.
Un sitio puede ser hermoso y estar bien escrito, pero aun así resultar doloroso de usar si muestra el contenido tarde, responde con lentitud o mueve elementos.
Google utiliza Core Web Vitals en sus sistemas de experiencia de página. Google también especifica que un buen resultado no garantiza una primera posición y que la relevancia del contenido sigue siendo fundamental. Por lo tanto, estas métricas constituyen una parte de una auditoría SEO, no una fórmula de clasificación.
75
Google recomienda evaluar LCP, INP y CLS en el percentil 75 de cargas, por separado en dispositivos móviles y de escritorio.
Las tres métricas deben leerse juntas y vincularse a la página correspondiente. Una prueba de laboratorio ayuda a diagnosticar; Los datos de campo describen lo que observaron los visitantes reales cuando hay suficiente volumen disponible.
Los 3 Core Web Vitals explicados de forma sencilla
- LCP: contenido principalEl momento en que se muestra el elemento visible más grande.
- INP: la respuesta a una acciónEl tiempo hasta la próxima actualización visual.
- CLS: estabilidadMovimiento de contenido inesperado durante la carga.
LCP = Largest Contentful Paint (renderizado del mayor elemento de contenido)
En palabras sencillas: ¿a qué velocidad se carga el contenido principal de su página?
Al abrir un sitio, primero ve una pantalla en blanco. Después aparecen poco a poco las imágenes, el texto y los demás elementos. El LCP es el momento en que se muestra el «elemento más grande» (normalmente la imagen de cabecera o el título principal).
Umbral “bueno” recomendado: 2,5 segundos o menos, en el percentil 75.
Ejemplo concreto: el artículo de su blog muestra su contenido principal en 1,2 segundos en una prueba, o en 4 segundos. Los datos de campo permitirán ver lo que experimentan realmente los visitantes.
Identifique primero el elemento realmente medido como LCP. Si se trata de una imagen, compruebe su formato, sus dimensiones, su prioridad de carga y el tiempo de respuesta antes de modificar el resto de la página.
INP = Interaction to Next Paint (interactividad)
En palabras sencillas: ¿a qué velocidad responde su sitio cuando hace clic, escribe o realiza una acción?
Después de hacer clic en un botón, hay un retraso antes de que suceda algo. El INP mide este retraso.
Umbral “bueno” recomendado: 200 milisegundos o menos, en el percentil 75.
Ejemplo concreto: hace clic en «Añadir al carrito» y la siguiente actualización visual llega en 150 ms en una prueba, o en 800 ms.
CLS = Cumulative Layout Shift (desplazamiento acumulado del diseño)
En palabras sencillas: ¿su página se «mueve» mientras se carga?
Imagínese: lee un texto y, de repente, se inserta un anuncio arriba, el texto baja y pierde su lugar. Frustrante, ¿verdad? Es el CLS.
Umbral “bueno” recomendado: 0,1 o menos, en el percentil 75.
Ejemplo concreto: el contenido de su página permanece estable con un CLS de 0,02 en la medida, o cambia con un CLS de 0,5.
Una imagen sin dimensiones declaradas puede desplazar el contenido al cargarse. Declarar su anchura y su altura ayuda al navegador a reservar el espacio.
¿Por qué importa tanto?
Búsqueda de Google
Core Web Vitals son parte de las señales de experiencia de la página. No predicen la clasificación entre dos páginas y no reemplazan la relevancia del contenido.
Conversión
El rendimiento puede influir en el comportamiento de los visitantes, pero no existe una tasa universal aplicable a todos los sitios. Mida el efecto con sus propios eventos, un período comparable y un volumen suficiente.
Móvil
Google utiliza principalmente la versión móvil del contenido para la indexación. Por tanto, en esta versión se controla tanto la presencia de contenidos útiles como su accesibilidad y las condiciones reales de carga.
Cómo medir sus Core Web Vitals
PageSpeed Insights (gratis, oficial Google)
Vaya a pagespeed.web.dev y pegue su URL. Según los datos disponibles, verá:
- Datos del campo CrUX si la URL o el origen tiene volumen suficiente
- una prueba de laboratorio Lighthouse realizada en el momento del análisis
- Si está en verde (bueno), naranja (medio) o rojo (malo)
- sugerencias de optimización para validar en su contexto
Google Search Console (gratuito, para todo su sitio)
Search Console agrupa las URL según sus datos de campo cuando el sitio dispone de información suficiente.
Chrome DevTools, panel Performance (gratuito)
Abra el panel Performance de Chrome DevTools para examinar las mediciones locales y, cuando estén disponibles, los datos de campo. Sustituye a la antigua extensión Web Vitals desde enero de 2025, como explica la documentación de Chrome.
Lighthouse (gratis, integrado en Chrome)
Abra DevTools (F12), haga clic en "Lighthouse", inicie una auditoría. Esto le brinda una puntuación general + detalles.
Soluciones para optimizar el LCP
Problema 1: imagen de cabecera demasiado pesada
Solución: adapte el peso, el formato y las dimensiones de la imagen a su visualización real y vuelva a medir en condiciones comparables.
- Utilice TinyPNG o ImageOptim
- Utilice formatos modernos (WebP en lugar de JPG)
- Cambie el tamaño de sus imágenes al tamaño de visualización (no es necesario una imagen de 5000x3000 si la muestra en 800x600)
Problema 2: demasiado JavaScript ralentiza la página
Solución: cargue su JS de forma diferida (es decir, más tarde, no al inicio).
- Añada el atributo
defera los scripts no críticos - Utilice
asyncpara cosas que pueden esperar
Problema 3: el servidor responde lentamente (TTFB - Tiempo hasta el primer byte)
Solución:
- mida el tiempo de respuesta antes de decidir si debe cambiar el alojamiento
- Utilice una CDN (Cloudflare, Fastly) cuando la ubicación de la audiencia y la arquitectura lo justifiquen
- Guarde sus páginas en caché (con un plugin de caché si utiliza WordPress)
Soluciones para optimizar INP (Interactividad)
Problema 1: JavaScript de bloqueo prolongado
Solución: identifique las tareas largas, elimine el trabajo innecesario y divida el procesamiento para devolver el control al navegador entre etapas.
Problema 2: demasiado procesamiento al hacer clic
Solución: simplifique sus interacciones. Si hacer clic en un botón desencadena 10 operaciones, son demasiadas. Haga de inmediato solo lo necesario.
Problema 3: las bibliotecas de JavaScript son demasiado pesadas
Solución: utilice bibliotecas más ligeras o reduzca su número.
Soluciones para optimizar el CLS (desplazamiento)
Problema 1: Imágenes sin dimensiones definidas
Solución: declare siempre la altura y la anchura de sus imágenes en HTML. Así se reserva el espacio antes de la carga.
<img src="photo.jpg" width="800" height="600" alt="...">
Problema 2: contenido que se carga después (anuncios, incrustaciones)
Solución: reserve también espacio para este contenido dinámico.
Problema 3: fuentes que cambian
Solución: utilice font-display: swap para mostrar el texto con una fuente alternativa durante la carga. La sustitución aún puede desplazar el texto: elija una fuente alternativa con métricas parecidas y mida el CLS después del cambio.
Prioridades: ¿por dónde empezar?
- Paso 1: establecer una línea base de campo y laboratorio, con las condiciones de medición.
- Paso 2: identifique la métrica y el elemento realmente responsables del problema.
- Paso 3: aplique un cambio cada vez y compruebe después el aspecto visual y las funciones.
- Paso 4: repita las pruebas y observe los datos de campo durante un período suficiente.
Herramientas para la optimización
Cloudflare y otras CDN
Una CDN y unas reglas de caché pueden reducir determinados tiempos de transferencia. El efecto depende del origen, el contenido, las reglas y la ubicación de los visitantes. Mida antes y después.
WordPress: WP Rocket o LiteSpeed Cache
En WordPress, estas extensiones pueden ayudar a configurar el caché y algunas optimizaciones. Pruebe cada opción, ya que la compatibilidad depende del tema y otros complementos.
Vercel o Netlify (para estático/Next.js)
Estas plataformas proporcionan primitivas útiles para la implementación y el almacenamiento en caché. Los códigos, medios y scripts de terceros siguen siendo clave.
Auditoría u optimización: ¿qué siguiente paso elegir?
Para situar el rendimiento dentro de un proyecto completo, consulte nuestro enfoque de creación de sitios web. Si ya se ha medido un problema, explore la optimización del rendimiento y de los Core Web Vitals. Si la causa sigue siendo desconocida, empiece por una auditoría de rendimiento. El plan parte de una situación inicial documentada y no promete una puntuación universal.
Conclusión: puede hacerlo
Los Core Web Vitals no son magia complicada. LCP = carga rápida. INP = respuesta rápida. CLS = sin movimientos. Tres cosas sencillas.
Y las soluciones también son sencillas: comprima sus imágenes, cargue su JS de forma inteligente y reserve espacio para el contenido dinámico.
El plazo depende de la causa. Una imagen o una regla de caché pueden corregirse rápidamente, mientras que una arquitectura o los scripts de terceros requieren más trabajo. Si el sitio acumula demasiada deuda técnica, puede ser pertinente considerar una renovación.
Empiece hoy. Mida en PageSpeed Insights, optimice una cosa a la vez, vuelva a medir. Eso es lo que cuenta.