Core Web Vitals: Mide y mejora el rendimiento web
Has creado un sitio web rápido, pero los usuarios siguen quejándose de la lentitud. O quizás tus rankings SEO están estancados a pesar de tener un gran contenido. El culpable podrían ser las Core Web Vitals, las métricas de Google para la experiencia de usuario. En esta guía, aprenderás qué son, cómo medirlas y pasos prácticos para mejorar cada una.
¿Qué son las Core Web Vitals?
Las Core Web Vitals son tres métricas específicas que Google utiliza para cuantificar la experiencia de usuario:
- Largest Contentful Paint (LCP): Mide el rendimiento de carga. Debe ocurrir dentro de los 2.5 segundos desde que la página comienza a cargar.
- Interaction to Next Paint (INP): Mide la capacidad de respuesta. Debe ser inferior a 200 milisegundos en el 75% de las visitas a la página.
- Cumulative Layout Shift (CLS): Mide la estabilidad visual. Debe ser inferior a 0.1.
Estas métricas forman parte de las señales de experiencia de página de Google y pueden afectar tus rankings de búsqueda. Más importante aún, reflejan la experiencia real del usuario: los sitios lentos frustran a los visitantes y los ahuyentan.
Cómo medir las Core Web Vitals
No puedes mejorar lo que no mides. Existen dos tipos principales de herramientas: herramientas de laboratorio (pruebas sintéticas) y herramientas de campo (monitorización de usuarios reales).
Herramientas de laboratorio
- Lighthouse: Integrado en Chrome DevTools (pestaña Audits). Proporciona una puntuación y oportunidades específicas.
- PageSpeed Insights: Herramienta web que combina datos de laboratorio y de campo.
- WebPageTest: Pruebas avanzadas con ubicaciones y dispositivos personalizados.
Herramientas de campo
- Chrome User Experience Report (CrUX): Datos del mundo real de usuarios de Chrome, disponibles a través de PageSpeed Insights o BigQuery.
- Biblioteca web-vitals: Biblioteca JavaScript para medir métricas en tu propia analítica.
- Search Console: El informe de Core Web Vitals muestra el rendimiento del grupo basado en datos de CrUX.
Comienza con PageSpeed Insights para obtener una visión general rápida, luego usa la biblioteca web-vitals para rastrear métricas de usuarios reales a lo largo del tiempo.
Mejorar LCP (Largest Contentful Paint)
El LCP suele ser la imagen o el bloque de texto más grande visible en la parte superior de la página. Para mejorarlo:
- Optimiza las imágenes: Comprime las imágenes, usa formatos modernos como WebP o AVIF y sirve imágenes responsivas con
srcset. - Precarga recursos críticos: Usa
<link rel="preload">para imágenes principales y fuentes. - Elimina recursos que bloquean el renderizado: Incluye el CSS crítico en línea, difiere el CSS y JavaScript no críticos.
- Usa una CDN: Sirve los recursos desde ubicaciones más cercanas a los usuarios.
- Habilita el almacenamiento en caché: Establece tiempos de caché largos para recursos estáticos.
Para las imágenes, herramientas como el Compresor de Imágenes de TryQuickToolBox pueden ayudar a reducir el tamaño de archivo sin pérdida visible de calidad.
Mejorar INP (Interaction to Next Paint)
El INP mide el tiempo desde una interacción del usuario (clic, toque, pulsación de tecla) hasta la siguiente actualización visual. Para mejorarlo:
- Reduce el tiempo de ejecución de JavaScript: Divide las tareas largas, usa
requestIdleCallbackosetTimeoutpara ceder el hilo principal. - Evita tamaños de DOM grandes: Mantén el DOM por debajo de 1,500 nodos y la profundidad por debajo de 32 niveles.
- Optimiza los manejadores de eventos: Aplica debounce o throttle a eventos frecuentes como scroll y resize.
- Usa web workers: Mueve los cálculos pesados fuera del hilo principal.
- Minimiza los scripts de terceros: A menudo bloquean el hilo principal.
Usa el panel Performance de Chrome DevTools para identificar tareas largas y optimizarlas.
Mejorar CLS (Cumulative Layout Shift)
El CLS mide los cambios de diseño inesperados. Para reducirlo:
- Incluye siempre atributos width y height en imágenes y videos: Esto reserva espacio.
- Reserva espacio para anuncios e incrustaciones: Usa CSS
aspect-ratioo dimensiones fijas. - Evita insertar contenido encima del contenido existente: Excepto en respuesta a una interacción del usuario.
- Usa font-display: swap: Evita texto invisible pero puede causar pequeños cambios; considera
font-display: optionalpara texto crítico. - Ten cuidado con el contenido dinámico: Cárgalo por debajo del pliegue o anima las transiciones suavemente.
Comparación de las métricas de Core Web Vitals
| Métrica | Qué mide | Umbral bueno | Causas principales de puntuaciones bajas |
|---|---|---|---|
| LCP | Rendimiento de carga | ≤ 2.5s | Servidor lento, recursos que bloquean el renderizado, imágenes grandes |
| INP | Capacidad de respuesta | ≤ 200ms | Tareas largas, JavaScript pesado, DOM grande |
| CLS | Estabilidad visual | ≤ 0.1 | Imágenes sin dimensiones, contenido dinámico, fuentes web |
Herramientas y técnicas para monitorización continua
Mejorar las Core Web Vitals no es una tarea única. Configura una monitorización continua:
- Usa la biblioteca
web-vitalspara enviar métricas a tu plataforma de analítica. - Configura alertas para cuando las métricas superen los umbrales.
- Ejecuta Lighthouse regularmente en CI/CD para detectar regresiones.
- Monitoriza los datos de CrUX en Search Console para tendencias de usuarios reales.
Para una comprobación rápida, usa la pestaña Lighthouse de Chrome DevTools o PageSpeed Insights después de cada cambio significativo.
Preguntas frecuentes
¿Qué son las Core Web Vitals y por qué importan?
Las Core Web Vitals son tres métricas (LCP, INP, CLS) que miden la carga, la interactividad y la estabilidad visual. Importan porque reflejan la experiencia real del usuario y Google las usa como señal de ranking.
¿Con qué frecuencia debo medir las Core Web Vitals?
Mide después de cada cambio importante en el código y configura una monitorización de campo continua para rastrear métricas de usuarios reales a lo largo del tiempo. Las herramientas de laboratorio como Lighthouse son buenas para comprobaciones rápidas, pero los datos de campo muestran la experiencia real del usuario.
¿Puedo mejorar las Core Web Vitals sin un desarrollador?
Algunas mejoras como comprimir imágenes se pueden hacer con herramientas, pero la mayoría requieren cambios en el código (por ejemplo, añadir atributos width/height, optimizar JavaScript). Normalmente se necesita un desarrollador o alguien familiarizado con el rendimiento web.
¿Listo para optimizar tus imágenes y mejorar el LCP? Prueba nuestro Compresor de Imágenes gratuito para reducir el tamaño de archivo sin sacrificar calidad.