Las Core Web Vitals son tres métricas de Google sobre la experiencia real de los usuarios: LCP mide cuánto tarda en aparecer el contenido principal (bueno: 2.5 segundos o menos), INP mide qué tan rápido responde la página al interactuar (bueno: 200 milisegundos o menos) y CLS mide cuánto se mueve el contenido mientras carga (bueno: 0.1 o menos). Google las evalúa con datos de visitantes reales en el percentil 75, por separado en celular y en computadora.
- LCP bueno: 2.5 s o menos; necesita mejorar hasta 4 s; malo arriba de 4 s.
- INP bueno: 200 ms o menos; necesita mejorar hasta 500 ms; malo arriba de 500 ms.
- CLS bueno: 0.1 o menos; necesita mejorar hasta 0.25; malo arriba de 0.25.
- INP reemplazó a FID como métrica oficial en marzo de 2024.
- Lo que cuenta es el dato de campo de usuarios reales, no solo la puntuación de Lighthouse.
- Imágenes pesadas y scripts de terceros son los culpables más comunes.
Qué son las Core Web Vitals y por qué importan
Las Core Web Vitals son tres métricas que Google eligió para medir si una página se siente rápida, responde bien y no se mueve mientras la usas. Forman parte de las señales de experiencia de página que Google considera en el posicionamiento.
Conviene ser precisos sobre su peso: la relevancia del contenido sigue mandando. Una página lenta con la mejor respuesta puede superar a una rápida que no responde la búsqueda. Pero cuando dos páginas son comparables, la experiencia cuenta, y sobre todo cuenta para tus clientes: una página que tarda en mostrar el botón de WhatsApp o el teléfono pierde contactos aunque esté en primer lugar.
En La Laguna, buena parte del tráfico de negocios locales llega desde celulares, muchas veces con datos móviles y señal irregular. Ahí es donde un sitio pesado se nota más, y donde Google mide por separado.
Las tres métricas y sus umbrales
| Métrica | Qué mide | Bueno | Necesita mejorar | Malo |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Cuánto tarda en mostrarse el elemento más grande visible: la imagen principal o el titular | ≤ 2.5 s | 2.5 a 4 s | > 4 s |
| INP (Interaction to Next Paint) | Cuánto tarda la página en reaccionar visualmente a clics, toques y teclas, durante toda la visita | ≤ 200 ms | 200 a 500 ms | > 500 ms |
| CLS (Cumulative Layout Shift) | Cuánto se mueve el contenido de forma inesperada mientras carga | ≤ 0.1 | 0.1 a 0.25 | > 0.25 |
Dos detalles importan. Primero, Google evalúa el percentil 75: para aprobar, al menos tres de cada cuatro visitas deben quedar en "bueno". Segundo, mide celular y computadora por separado, así que un sitio puede aprobar en escritorio y reprobar en móvil.
INP reemplazó a FID (First Input Delay) en marzo de 2024. FID solo medía el retraso de la primera interacción; INP considera todas, por eso es más exigente con sitios llenos de JavaScript.
Cómo medirlas: datos de campo vs. de laboratorio
Hay dos tipos de datos y confundirlos es el error más común:
- Datos de campo: vienen de usuarios reales de Chrome, a través del Chrome UX Report, en una ventana de 28 días. Son los que Google usa. Los ves en PageSpeed Insights (sección de experiencia de usuarios reales) y en el informe de Core Web Vitals de Search Console.
- Datos de laboratorio: una simulación en condiciones controladas, como Lighthouse o la puntuación de PageSpeed Insights. Sirven para diagnosticar, pero no son lo que evalúa Google. Además, el laboratorio no puede medir INP porque no hay interacción real; usa el tiempo total de bloqueo como aproximación.
Si tu sitio tiene poco tráfico, puede que no haya datos de campo suficientes; en ese caso, guíate por el laboratorio y por pruebas en un celular de gama media con datos móviles. Nuestra auditoría SEO y GEO revisa velocidad junto con los demás factores de tu sitio.
Cómo mejorar LCP
El LCP suele ser la imagen principal o el bloque de texto más grande arriba de la página. Las mejoras con más impacto:
- Optimiza la imagen principal: formato moderno (WebP o AVIF), dimensiones adecuadas para cada pantalla con srcset y compresión. Una foto de 4 MB tomada con celular es el culpable número uno.
- No cargues de forma diferida la imagen principal. El atributo loading="lazy" es bueno para imágenes de abajo, pero en la de arriba retrasa el LCP. Usa fetchpriority="high" en ella.
- Reduce el tiempo de respuesta del servidor: buen hosting, caché de página y CDN. Un servidor que tarda en responder retrasa todo lo demás.
- Elimina CSS y JavaScript que bloquean el renderizado o cárgalos después de lo esencial.
- Precarga fuentes e imágenes críticas que el navegador descubriría tarde.
- Evita sliders y carruseles en la parte superior: suelen cargar varias imágenes grandes y JavaScript extra.
Un ejemplo típico en La Laguna: la página de inicio de un restaurante con un carrusel de cinco fotos de 3 MB cada una, un video de fondo y el menú en PDF incrustado. Cambiar el carrusel por una sola foto optimizada y el PDF por un menú en HTML suele bajar el LCP en celular de varios segundos a uno o dos, sin perder nada de lo que el cliente necesita ver.
Cómo mejorar INP
Un INP malo casi siempre significa demasiado JavaScript ejecutándose en el hilo principal. Cuando el usuario toca un botón, el navegador está ocupado y tarda en responder.
- Audita los scripts de terceros: widgets de chat, pixeles de publicidad, mapas, herramientas de grabación de sesiones, pop-ups. Cada uno suma. Quita los que no uses y retrasa la carga de los demás hasta después de la interacción o del evento de carga.
- Divide tareas largas de JavaScript en partes pequeñas para que el navegador pueda atender clics entre ellas.
- Reduce el tamaño del DOM: páginas construidas con constructores visuales a veces generan miles de elementos anidados que hacen lento cada cambio.
- Da respuesta visual inmediata: muestra el cambio en el botón al instante y haz el trabajo pesado después.
Para medir conversiones sin cargar el navegador del usuario, una alternativa es enviar eventos desde el servidor, como la API de Conversiones de Meta, en lugar de acumular pixeles en la página.
Cómo mejorar CLS
CLS mide esos saltos molestos en los que vas a tocar un botón y la página se mueve. Las causas típicas y sus soluciones:
- Imágenes y videos sin dimensiones: agrega siempre width y height, o un aspect-ratio en CSS, para que el navegador reserve el espacio.
- Anuncios, mapas e iframes: reserva un contenedor con altura fija antes de que carguen.
- Banners que aparecen arriba del contenido, como avisos de cookies o promociones, empujando todo hacia abajo. Muéstralos superpuestos o en la parte inferior.
- Fuentes web: cuando la fuente final reemplaza a la de respaldo, el texto cambia de tamaño. Usa font-display con una fuente de respaldo de métricas similares o ajusta size-adjust.
- Contenido insertado por JavaScript arriba de lo que ya se mostró.
WordPress, constructores visuales y sitios estáticos
La plataforma influye mucho. Un WordPress con un constructor visual, 30 plugins y un tema multipropósito arranca con desventaja: mucho CSS y JavaScript que no se usa en cada página. Se puede optimizar con caché, minificación, imágenes optimizadas y menos plugins, pero hay un límite.
| Tipo de sitio | Punto de partida | Qué cuidar |
|---|---|---|
| Estático (HTML, CSS y JS mínimo) | Muy rápido | Imágenes y scripts de terceros |
| WordPress optimizado | Bueno | Plugins, tema, caché y hosting |
| WordPress con constructor y muchos plugins | Lento en móvil | Todo lo anterior y el tamaño del DOM |
| Tienda en línea | Variable | Apps o plugins de terceros, imágenes de producto |
En el caso de La Brasa Norteña Taquería cambiamos un WordPress lento por un sitio estático generado desde datos, y el LCP en celular quedó en 0.9 segundos. Si estás pensando en rehacer tu sitio, revisa nuestro servicio de desarrollo web; si tu sitio fue atacado, la guía de WordPress hackeado explica también cuándo conviene pasar a estático.
El hosting también cuenta
Un servidor lento o saturado aumenta el tiempo de respuesta inicial (TTFB) y con ello el LCP, sin importar qué tan bien optimizadas estén las imágenes. En un hosting compartido con muchos sitios, el rendimiento puede variar según la hora. Un CDN que sirva tu sitio desde ubicaciones cercanas al usuario ayuda mucho, sobre todo si tu público está en México y tu servidor en otro país.
Si tienes dudas sobre tu servidor, la guía de hosting compartido vs. VPS te ayuda a decidir. Y como la velocidad es solo una parte del SEO técnico, revisa también las 7 decisiones de SEO antes de construir tu sitio y nuestro servicio de SEO.
Lista de revisión rápida
- Revisé el informe de Core Web Vitals en Search Console para móvil y computadora.
- La imagen principal está en WebP o AVIF, con dimensiones correctas y sin carga diferida.
- Todas las imágenes tienen width y height.
- Quité los scripts de terceros que no uso y retrasé los demás.
- El sitio usa caché y CDN.
- Probé el sitio en un celular de gama media con datos móviles.
- Vuelvo a revisar después de cada cambio importante, considerando que los datos de campo tardan hasta 28 días en reflejarlo.
