Entendiendo Core Web Vitals sin complicaciones técnicas
Core Web Vitals son tres métricas específicas que Google usa para medir la experiencia del usuario en tu sitio móvil. No son sugerencias, son factores de ranking desde mediados de 2021, pero sus umbrales se ajustaron en 2024.
LCP - Largest Contentful Paint
Mide cuánto tarda en cargarse el elemento más grande visible en la pantalla. Normalmente es una imagen, un bloque de texto o un video. Bueno significa menos de 2.5 segundos. Entre 2.5 y 4 segundos necesita mejora. Por encima de 4 segundos está fallando.
Para verificarlo, abre Chrome DevTools, ve a la pestaña Performance, graba la carga de tu página y busca el marcador LCP. Te muestra exactamente qué elemento está causando el retraso.
Las causas comunes incluyen imágenes sin optimizar, servidores lentos, renderizado bloqueante de CSS o JavaScript, y tiempos de respuesta del servidor por encima de 600ms.
FID - First Input Delay
Mide el tiempo entre que un usuario hace clic en algo y cuando el navegador puede responder. Bueno es menos de 100 milisegundos. Problemático es entre 100 y 300ms. Malo es cualquier cosa por encima de 300ms.
Esta métrica solo se puede medir con usuarios reales, no en pruebas de laboratorio. Necesitas datos de Search Console o herramientas como el Chrome User Experience Report para verla.
JavaScript pesado ejecutándose en el hilo principal es casi siempre el culpable. Si usas frameworks como React o Vue, revisa el tamaño de tus bundles. Cualquier cosa por encima de 200KB comprimido merece atención.
CLS - Cumulative Layout Shift
Mide cuánto se mueve el contenido mientras la página carga. Esos momentos donde vas a hacer clic y de repente todo se desplaza hacia abajo. Bueno es menos de 0.1. Necesita mejora entre 0.1 y 0.25. Malo por encima de 0.25.
Las imágenes sin atributos de ancho y alto definidos son la causa principal. Los anuncios que se cargan dinámicamente también. Los web fonts que cambian el tamaño del texto al cargarse.
Para detectar CLS, usa la extensión de Chrome "Web Vitals". Te muestra en tiempo real qué elementos están causando desplazamientos.
Cómo verificar tus métricas
PageSpeed Insights te da datos de laboratorio y de campo. Los datos de laboratorio son simulaciones. Los de campo vienen de usuarios reales de Chrome. Confía más en los datos de campo.
Search Console tiene un reporte específico de Core Web Vitals bajo "Experiencia". Te agrupa las URLs por estado: buenas, necesitan mejora, o pobres.
No intentes arreglar todo de golpe. Prioriza las páginas con más tráfico primero. Una mejora del 20 por ciento en tus páginas principales importa más que perfeccionar páginas que nadie visita.