Core Web Vitals: mide y mejora el rendimiento web
Por qué importan las Core Web Vitals
Has creado un sitio web rápido, pero los usuarios siguen quejándose de cargas lentas o interacciones con tirones. Los motores de búsqueda también pueden posicionarte peor si tus puntuaciones de Core Web Vitals (CWV) son deficientes. Las CWV son un conjunto de métricas que Google usa para cuantificar la experiencia de usuario: Largest Contentful Paint (LCP), First Input Delay (FID) y Cumulative Layout Shift (CLS). En 2021, Google convirtió estas métricas en factor de posicionamiento, así que ignorarlas puede perjudicar tu SEO y la retención de usuarios.
Esta guía explica cómo medir cada métrica, identificar problemas comunes y aplicar soluciones prácticas. Nos centraremos en pasos accionables que puedes tomar hoy, sin entrar en cada caso extremo.
Entender las tres Core Web Vitals
Antes de optimizar, conoce qué mide cada métrica y sus umbrales.
| Métrica | Mide | Bueno | Necesita mejorar | Deficiente |
|---|---|---|---|---|
| LCP | Rendimiento de carga: tiempo hasta que se renderiza el elemento de contenido más grande. | ≤ 2,5 s | 2,5 s – 4,0 s | > 4,0 s |
| FID | Interactividad: tiempo desde la primera interacción del usuario hasta la respuesta del navegador. | ≤ 100 ms | 100 ms – 300 ms | > 300 ms |
| CLS | Estabilidad visual: cambios de diseño inesperados. | ≤ 0,1 | 0,1 – 0,25 | > 0,25 |
Nota: FID será reemplazada por Interaction to Next Paint (INP) en marzo de 2024, pero los principios de optimización son similares. Aquí nos centraremos en FID porque todavía se referencia ampliamente.
Cómo medir las Core Web Vitals
Necesitas tanto datos de laboratorio como de campo. Los datos de laboratorio (sintéticos) ayudan a depurar; los datos de campo (usuarios reales) muestran el rendimiento real.
Herramientas de laboratorio
- Lighthouse en Chrome DevTools: ejecuta auditorías de rendimiento, accesibilidad y SEO. Informa de LCP, CLS y TBT (un proxy de FID).
- WebPageTest: pruebas avanzadas con filmstrips y gráficos waterfall.
- PageSpeed Insights: combina datos de laboratorio y de campo (si están disponibles).
Herramientas de campo
- Chrome User Experience Report (CrUX): conjunto de datos público de métricas de usuarios reales. Accede a través de PageSpeed Insights o BigQuery.
- Biblioteca JavaScript web-vitals: recopila métricas de usuarios reales en tu analítica.
- Informe Core Web Vitals de Search Console: muestra grupos de URL con problemas.
Empieza con PageSpeed Insights para obtener una visión rápida y luego usa Lighthouse para diagnósticos detallados.
Mejorar Largest Contentful Paint (LCP)
El LCP suele verse afectado por una respuesta lenta del servidor, recursos que bloquean el renderizado o imágenes sin optimizar. Sigue estos pasos:
- Optimiza el tiempo de respuesta del servidor: usa caché, una CDN y código de backend eficiente. Apunta a un Time to First Byte (TTFB) inferior a 0,8 s.
- Elimina los recursos que bloquean el renderizado: inserta el CSS crítico en línea y difiere el CSS y JavaScript no críticos. Usa
asyncodeferpara los scripts. - Optimiza las imágenes: comprime las imágenes, usa formatos modernos (WebP, AVIF) e implementa imágenes responsive con
srcset. Para la imagen del LCP, precárgala con<link rel="preload">. - Usa una CDN: sirve los recursos estáticos desde ubicaciones perimetrales.
- Almacena en caché los recursos: establece tiempos de caché largos para los recursos estáticos.
Ejemplo: precarga la imagen del LCP y establece dimensiones explícitas para evitar cambios de diseño.
<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">
<img src="/hero.webp" srcset="/hero-480.webp 480w, /hero-800.webp 800w" sizes="(max-width: 600px) 480px, 800px" alt="Hero" width="800" height="600">Mejorar First Input Delay (FID)
FID mide la capacidad de respuesta. Las tareas largas de JavaScript bloquean el hilo principal y retrasan las interacciones. Para mejorar FID:
- Divide las tareas largas: usa
setTimeoutorequestIdleCallbackpara ceder el hilo principal. - Minimiza el trabajo del hilo principal: reduce el tiempo de ejecución de JavaScript, evita bundles grandes y usa code splitting.
- Optimiza los manejadores de eventos: aplica debounce o throttle a los manejadores costosos.
- Usa web workers para tareas intensivas en CPU.
- Evita scripts de terceros grandes: audita y elimina los scripts innecesarios.
Herramientas como Lighthouse señalan las tareas largas. Usa el panel Performance de Chrome DevTools para identificarlas.
Mejorar Cumulative Layout Shift (CLS)
CLS mide la estabilidad visual. Los cambios de diseño ocurren cuando los elementos cambian de posición de forma inesperada. Causas comunes y soluciones:
- Imágenes sin dimensiones: establece siempre los atributos
widthyheighto usa la propiedad CSSaspect-ratio. - Anuncios, embeds e iframes: reserva espacio con un placeholder o establece dimensiones fijas.
- Contenido dinámico: evita insertar contenido por encima del contenido existente, salvo en respuesta a una interacción del usuario.
- Fuentes web: usa
font-display: swapy precarga las fuentes para evitar texto invisible (FOIT) y cambios de diseño. - Animaciones: prefiere
transformyopacityde CSS para las animaciones, ya que no provocan cambios de diseño.
Prueba con la Layout Instability API en DevTools o usa la biblioteca web-vitals para registrar el CLS en campo.
Flujo de trabajo práctico para el monitoreo continuo
La optimización no es una tarea única. Configura el monitoreo:
- Instrumenta tu sitio con la biblioteca
web-vitalsy envía las métricas a tu plataforma de analítica. - Configura alertas para cuando las métricas superen los umbrales.
- Ejecuta Lighthouse con regularidad en CI/CD para detectar regresiones.
- Usa Search Console para monitorear las tendencias de los datos de campo.
Recuerda que los datos de campo son los que importan para el posicionamiento. Los datos de laboratorio te ayudan a depurar, pero valida siempre con usuarios reales.
Preguntas frecuentes
¿Cuáles son los umbrales actuales de las Core Web Vitals?
A fecha de 2023, los umbrales son: LCP bueno ≤2,5 s, necesita mejorar 2,5 s–4,0 s, deficiente >4,0 s; FID bueno ≤100 ms, necesita mejorar 100 ms–300 ms, deficiente >300 ms; CLS bueno ≤0,1, necesita mejorar 0,1–0,25, deficiente >0,25. Ten en cuenta que FID será reemplazada por INP en 2024.
¿Con qué frecuencia debo medir las Core Web Vitals?
Monitorea los datos de campo de forma continua mediante analítica y ejecuta pruebas de laboratorio (por ejemplo, Lighthouse) en cada despliegue o al menos semanalmente. Los cambios importantes deberían desencadenar una nueva auditoría.
¿Puedo mejorar las Core Web Vitals sin un desarrollador?
Algunas soluciones, como comprimir imágenes o habilitar la caché, se pueden hacer mediante plugins o ajustes de hosting. Sin embargo, las optimizaciones más profundas (por ejemplo, code splitting o CSS crítico) suelen requerir trabajo de desarrollo.
¿Listo para optimizar tus imágenes y mejorar el LCP? Prueba nuestro Compresor de imágenes gratuito para reducir el tamaño de los archivos sin perder calidad.