Core Web Vitals explicadas para dueños de negocios

Las tres mediciones

Cada una se evalúa en el percentil 75: al menos tres de cada cuatro visitas deben cumplir el umbral, contadas por separado para teléfonos y computadoras. Estas definiciones son de Google y están publicadas en web.dev.

• Largest Contentful Paint (LCP): el tiempo que tarda en cargar la imagen o el bloque de texto más grande visible. Lo bueno es 2.5 segundos o menos.
• Interaction to Next Paint (INP): cuánto tarda la página en responder de forma visible después de un toque, un clic o una pulsación de tecla, a lo largo de la visita. Lo bueno es 200 milisegundos o menos. INP reemplazó a First Input Delay como Core Web Vital en 2024.
• Cumulative Layout Shift (CLS): cuánto se mueve el contenido de forma inesperada mientras carga la página, como un botón que salta cuando aparece una imagen. Lo bueno es 0.1 o menos.

Puntuaciones de laboratorio y visitantes reales

Una prueba de laboratorio como Lighthouse carga la página una vez en un dispositivo simulado. Es útil para encontrar problemas, pero no es lo que Google informa sobre su sitio. Los datos de campo de Search Console y PageSpeed Insights provienen de visitantes reales de Chrome durante los 28 días anteriores, y una página con poco tráfico puede no tener ningún dato de campo.

Por eso, una puntuación de laboratorio perfecta no garantiza buenos datos de campo, y una puntuación de laboratorio débil con una conexión rápida aún puede aprobar en campo. Revise ambos y confíe en los datos de campo cuando los tenga.

Cómo leer el informe de Search Console

Search Console clasifica las páginas en tres grupos para cada medición: buena, necesita mejorar y deficiente. Los límites que Google publica para deficiente son más de 4 segundos de LCP, más de 500 milisegundos de INP y más de 0.25 de CLS; entre bueno y deficiente está necesita mejorar.

El informe agrupa páginas similares, como todas las páginas de producto creadas con la misma plantilla, y muestra una dirección de ejemplo de cada grupo. Eso es útil: un problema en una plantilla suele afectar a todas las páginas creadas con ella, así que al corregir la plantilla se corrige el grupo. Empiece por el grupo con más páginas en la categoría deficiente, primero en móvil.

Después de una corrección, el informe tarda en actualizarse, porque los datos de campo cubren los 28 días anteriores de visitas. Use la opción de validación de Search Console para dar seguimiento a la corrección y espere que las cifras cambien de forma gradual.

Qué suele corregir cada una

• LCP lento: una imagen principal demasiado grande, una respuesta lenta del servidor o texto que espera una fuente web. Sirva imágenes del tamaño correcto y en formatos modernos, almacene las páginas en caché cerca de los visitantes y cargue primero la imagen principal.
• INP lento: demasiado JavaScript ejecutándose cuando alguien toca la pantalla. Envíe menos código al navegador, divida las tareas largas y cargue los widgets de chat y los rastreadores después de que la página se pueda usar.
• CLS alto: imágenes, contenidos incrustados o banners sin espacio reservado. Indique las dimensiones de cada imagen y contenido incrustado, y no inserte contenido por encima de lo que el visitante está leyendo.

Causas comunes en sitios de tiendas

Las tiendas en línea y los catálogos comparten unos cuantos patrones que perjudican estas mediciones. Si su sitio tiene alguno, revíselo primero:

• Galerías de fotos de producto que cargan todas las imágenes en tamaño completo a la vez.
• Carruseles grandes en la parte superior de la página de inicio, donde la primera diapositiva es el elemento LCP.
• Banners de cookies o de anuncios que empujan la página hacia abajo después de que aparece.
• Fuentes web que se cargan tarde y reacomodan el texto.
• Widgets de reseñas, chat y seguimiento que se cargan antes de que la página se pueda usar.
• Filtros y búsquedas en las páginas de catálogo que ejecutan scripts pesados con cada toque.
• Imágenes que el personal sube directamente desde una cámara, con un tamaño muchas veces mayor al que se muestran.

Corregir en el orden correcto

• Elija el grupo de páginas con más visitas deficientes en móvil.
• Haga una prueba de laboratorio en una página de ejemplo para encontrar la causa específica.
• Corrija la causa en la plantilla, no en una sola página.
• Vuelva a probar en laboratorio y luego observe los datos de campo durante las semanas siguientes.
• Pase al siguiente grupo solo cuando el primero esté mejorando.

Cómo mantener buenas puntuaciones

Las puntuaciones empeoran después del lanzamiento con más frecuencia de lo que fallan en el lanzamiento. Un nuevo script de marketing, una imagen más grande en la página de inicio o un widget agregado para una campaña pueden deshacer el trabajo anterior. Acuerde una regla sencilla con quien edite el sitio: nada nuevo se agrega a todas las páginas sin una revisión de velocidad, y las imágenes se redimensionan antes de subirlas. Un plan de mantenimiento puede incluir esa revisión como rutina.

Cómo trabajar con un desarrollador

Si otra persona mantiene el sitio, estas preguntas mantienen el trabajo enfocado en lo que perciben los visitantes y no en una puntuación de laboratorio:

• ¿Qué grupos de páginas son deficientes en los datos de campo y en qué medición?
• ¿Cuál es la causa en cada uno y cómo se encontró?
• ¿La corrección está en la plantilla, para que cubra todas las páginas del grupo?
• ¿Cómo sabremos que funcionó y cuándo deberían reflejarlo los datos de campo?
• ¿Qué evitará que el problema vuelva después del próximo cambio?

Cuánto importan

Las Core Web Vitals son una de muchas señales que usa Google; el contenido relevante y útil importa más. Su mayor efecto es en las personas: una página que aparece rápido y no salta mantiene a más visitantes leyendo y comprando. Nadie puede prometer una posición por tener mejores puntuaciones.

Cómo revisar su propio sitio

Cada sitio que construimos se prueba en velocidad antes del lanzamiento: consulte desarrollo de sitios web. Si un sitio existente es lento, un rediseño o una migración puede corregirlo, o puede bastar con una reparación específica.

Para sitios hechos en Next.js, por qué mi sitio de Next.js es lento explica las causas propias del framework. La velocidad es una parte del trabajo de búsqueda; el resto se cubre en SEO y búsqueda con IA.

• Search Console, informe de Core Web Vitals: datos de campo agrupados por tipo de página.
• PageSpeed Insights: datos de campo de una URL más una prueba de laboratorio con sugerencias.
• Pruebe en un teléfono real de gama media con datos móviles, no solo en una laptop rápida.