Core Web Vitals: guía técnica para no técnicos

Core Web Vitals: guía técnica para no técnicos

Qué son los Core Web Vitals y por qué Google los convirtió en señal de ranking

Si alguna vez has abierto Google Search Console y te has topado con un apartado llamado "Experiencia de página" lleno de puntos verdes, amarillos y rojos que no sabes muy bien qué significan, no estás solo. Los Core Web Vitals son, probablemente, el cambio técnico más relevante que Google ha introducido en su algoritmo en los últimos años, y sin embargo siguen siendo un misterio para la mayoría de los directores de marketing y propietarios de tiendas online que no tienen perfil técnico.

La realidad es que entenderlos no requiere ser programador. Requiere, eso sí, tener claro qué miden, qué umbrales importan y qué palancas puedes accionar dentro de tu equipo o con tu agencia para mejorarlos.

Los Core Web Vitals son un conjunto de tres métricas que Google utiliza para evaluar la experiencia real que tienen los usuarios cuando visitan una página web. No miden lo que el servidor dice que ocurre: miden lo que el usuario percibe en su dispositivo real, con su conexión real. Eso los hace especialmente relevantes para el SEO, porque Google dejó de creer en los tiempos de carga teóricos y empezó a confiar en los datos de campo recogidos directamente de millones de navegadores Chrome.

Desde que Google los incorporó como factor de ranking con la actualización Page Experience en 2021, mejorar los Core Web Vitals ha pasado de ser una tarea del departamento técnico a ser una prioridad estratégica para cualquier negocio que dependa del tráfico orgánico. En esta guía te explicamos qué mide cada métrica, qué valores son aceptables, dónde encontrar los datos de tu web y cómo priorizar las mejoras sin necesidad de entender una sola línea de código.

---

Las tres métricas que componen los Core Web Vitals

LCP: Largest Contentful Paint (velocidad de carga percibida)

El LCP mide cuánto tiempo tarda en cargarse el elemento visual más grande que aparece en la pantalla del usuario. Puede ser una imagen de producto, un vídeo hero, un bloque de texto grande o cualquier otro elemento que ocupe un espacio prominente en el viewport inicial.

¿Por qué importa? Porque es el indicador más cercano a la pregunta que se hace cualquier usuario: "¿está cargando esta página?". Si el elemento principal tarda mucho en aparecer, el usuario percibe la página como lenta, aunque tecnicamente el HTML haya llegado rápido.

Umbrales de Google:

  • Bueno: menos de 2,5 segundos
  • Necesita mejora: entre 2,5 y 4 segundos
  • Malo: más de 4 segundos

En el contexto del e-commerce, el LCP suele estar determinado por la imagen principal del producto en páginas de ficha, o por el banner hero en la portada. Una imagen no optimizada puede arruinar el LCP de las páginas más importantes de tu tienda. Si quieres profundizar en cómo gestionar correctamente las imágenes, te recomendamos nuestra guía sobre optimización de imágenes para SEO.

FID / INP: interactividad y capacidad de respuesta

Hasta 2024, Google medía la interactividad con el FID (First Input Delay), que registraba el tiempo que tardaba el navegador en responder al primer clic o toque del usuario. En marzo de 2024, Google reemplazó el FID por el INP (Interaction to Next Paint), una métrica más exigente que evalúa la capacidad de respuesta a lo largo de toda la sesión de navegación, no solo al primer toque.

El INP mide el tiempo que transcurre desde que el usuario interactúa con la página (hace clic, teclea, toca) hasta que el navegador actualiza visualmente la pantalla en respuesta a esa interacción.

Umbrales para INP:

  • Bueno: menos de 200 milisegundos
  • Necesita mejora: entre 200 y 500 milisegundos
  • Malo: más de 500 milisegundos

En tiendas online, el INP suele verse afectado por scripts de terceros pesados (chatbots, píxeles de publicidad, widgets de valoraciones) y por JavaScript excesivo que bloquea el hilo principal del navegador.

CLS: Cumulative Layout Shift (estabilidad visual)

El CLS mide los desplazamientos inesperados del contenido en la página mientras esta carga. Seguramente lo has experimentado alguna vez: estás a punto de hacer clic en un botón y, de repente, un anuncio o una imagen carga justo encima y el botón salta hacia abajo. Acabas haciendo clic en algo que no querías.

Ese tipo de movimiento es exactamente lo que mide el CLS. No es un tiempo, sino una puntuación acumulada de todos los cambios de posición que sufren los elementos visibles durante la carga.

Umbrales para CLS:

  • Bueno: menos de 0,1
  • Necesita mejora: entre 0,1 y 0,25
  • Malo: más de 0,25

En e-commerce, el CLS suele dispararse cuando las imágenes de producto no tienen dimensiones definidas en el HTML, cuando los banners de cookies aparecen empujando el contenido hacia abajo, o cuando se cargan fuentes web que sustituyen al texto ya renderizado.

---

Dónde ver los datos de Core Web Vitals de tu web

Antes de optimizar, necesitas saber dónde estás. Hay dos tipos de datos que debes distinguir:

Datos de campo (Field Data) vs. datos de laboratorio (Lab Data)

Los datos de campo son los que Google realmente utiliza para el ranking. Se recogen del Chrome User Experience Report (CrUX), que agrega mediciones reales de usuarios que visitan tu web con Chrome. Estos datos los puedes ver en Google Search Console, en el informe "Experiencia de página".

Los datos de laboratorio son mediciones sintéticas realizadas por herramientas como Lighthouse o PageSpeed Insights en condiciones controladas. Son útiles para diagnosticar problemas, pero no son los que Google usa para el ranking.

Herramientas principales

Google Search Console es el punto de partida obligatorio. En el apartado "Experiencia de página" > "Señales de Core Web Vitals" encontrarás un desglose de URLs clasificadas como buenas, que necesitan mejora o malas, separadas por tipo de dispositivo (móvil y escritorio). La vista móvil es la más crítica porque Google indexa en modo mobile-first.

PageSpeed Insights (pagespeed.web.dev) combina datos de laboratorio y datos de campo para una URL concreta. Es ideal para análisis URL por URL. Introduce la dirección de tu página de inicio, de una ficha de producto y de una categoría, y tendrás una imagen representativa del estado general.

Google Chrome DevTools permite a los desarrolladores analizar en detalle qué recursos están afectando a cada métrica. Aunque no es una herramienta para perfiles no técnicos, es la que debería usar el desarrollador que implemente las mejoras.

Si llevas a cabo una auditoría SEO de tu tienda, el análisis de Core Web Vitals debería ser uno de los bloques obligatorios del proceso.

---

Por qué los Core Web Vitals importan especialmente en e-commerce

El sector del comercio electrónico es, junto con los medios de comunicación, donde los Core Web Vitals tienen mayor impacto potencial. Las razones son estructurales:

Catálogos grandes y páginas complejas

Una tienda con miles de productos genera miles de URLs que Google debe evaluar individualmente. Si tus fichas de producto tienen imágenes sin optimizar, scripts de recomendaciones cargados síncronamente y un carrusel JavaScript pesado, cada ficha será un problema de LCP. Plataformas como Shopify, WooCommerce o PrestaShop tienen configuraciones por defecto que no siempre priorizan la velocidad. Para entender cómo gestionar esto según tu plataforma, consulta nuestra guía de velocidad de tienda online.

Dependencia de scripts de terceros

El e-commerce moderno acumula fácilmente 20-30 scripts de terceros: Google Tag Manager, Meta Pixel, píxeles de afiliados, herramientas de chat, sistemas de valoraciones, widgets de comparación de precios, plataformas de email marketing... Cada uno de ellos puede bloquear el hilo principal del navegador y disparar el INP.

Alta competencia en SERPs transaccionales

Las palabras clave transaccionales ("comprar zapatillas running", "precio iPhone 15 Pro", "sofá esquinero gris barato") tienen una competencia feroz. En nichos donde la diferencia entre posición 1 y posición 5 puede significar decenas de miles de euros en ingresos, cualquier ventaja técnica que Google penalice o premie tiene un impacto directo en el negocio.

Un estudio de Cloudflare publicado en 2022 estimó que cada 100ms de mejora en el tiempo de carga puede incrementar la tasa de conversión entre un 1% y un 2%. Para una tienda que factura 500.000 euros anuales, una mejora de 300ms podría suponer entre 15.000 y 30.000 euros adicionales en ventas, solo por el efecto en conversión, sin contar la mejora en posiciones orgánicas.

---

Cómo mejorar el LCP: las acciones con mayor impacto

El LCP es la métrica en la que más pueden hacer los equipos de marketing y contenidos sin necesidad de tocar código, aunque las mejoras más profundas siempre requieren apoyo técnico.

Optimización de imágenes como primer paso

El impacto de las imágenes en el LCP es habitualmente el mayor en tiendas online. Las acciones prioritarias son:

  • Convertir imágenes a formato WebP o AVIF, que reducen el tamaño de archivo entre un 25% y un 50% respecto a JPEG sin pérdida visible de calidad
  • Dimensionar las imágenes al tamaño real en que se muestran (no servir una imagen de 3000px para mostrarla en 600px)
  • Añadir el atributo loading="eager" y fetchpriority="high" a la imagen que constituye el LCP (normalmente la primera imagen de producto en ficha)
  • Utilizar un CDN con optimización de imágenes automática

Preconexión con servidores de terceros

Si tu LCP depende de un recurso alojado en un dominio externo (fuentes de Google, imágenes en un CDN externo), el navegador pierde tiempo en establecer la conexión. Añadir etiquetas en el indica al navegador que establezca esa conexión antes de que la necesite.

Eliminar recursos que bloquean el renderizado

Scripts y hojas de estilo que se cargan síncronamente en el retrasan el momento en que el navegador puede mostrar contenido. Moverlos al final del documento o añadir los atributos async o defer puede mejorar el LCP de forma significativa.

---

Cómo mejorar el CLS: estabilidad visual en fichas de producto

El CLS es, en muchos casos, el problema más fácil de corregir cuando se identifica correctamente la causa.

Reservar espacio para imágenes

La causa más frecuente de CLS en e-commerce es no definir las dimensiones de las imágenes en el HTML. Cuando el navegador no sabe cuánto espacio ocupará una imagen antes de cargarla, construye el layout sin ese espacio y luego recoloca todo cuando la imagen aparece. La solución es añadir los atributos width y height a todas las etiquetas , o utilizar CSS para reservar el espacio con relaciones de aspecto.

Banners de cookies y notificaciones

Los banners de consentimiento que aparecen empujando el contenido hacia abajo son una fuente habitual de CLS. La solución es que el banner aparezca como overlay (capa encima del contenido) en lugar de insertarse en el flujo del documento.

Fuentes web

El efecto FOUT (Flash of Unstyled Text) ocurre cuando la fuente web tarda en cargarse y el texto se renderiza primero con una fuente del sistema, luego cambia a la fuente definitiva. Si las métricas de línea (altura, espaciado) difieren entre ambas fuentes, el texto recoloca los elementos circundantes y genera CLS. La directiva CSS font-display: optional o el preload de fuentes críticas son las soluciones más efectivas.

---

Cómo auditar y priorizar mejoras sin conocimientos técnicos

Si no tienes perfil técnico, tu rol no es implementar las mejoras sino entender qué hay que mejorar, poder comunicarlo a tu equipo de desarrollo y saber priorizar en función del impacto en el negocio.

El flujo de trabajo recomendado

  1. Revisar Google Search Console semanalmente: identifica qué grupos de URLs tienen problemas (fichas de producto, categorías, página de inicio) y en qué dispositivo son más graves
  2. Analizar las URLs más importantes con PageSpeed Insights: no todas las páginas son iguales; prioriza las que generan más tráfico orgánico y más ingresos
  3. Comunicar los problemas al equipo técnico con contexto de negocio: no basta con decir "el LCP es alto"; hay que decir "la página de la categoría 'zapatillas running' tiene un LCP de 4,8 segundos en móvil y genera el 30% de las visitas orgánicas"
  4. Medir el impacto después de los cambios: los datos de campo de CrUX se actualizan con un retraso de aproximadamente 28 días; no esperes mejoras inmediatas en Search Console

Qué esperar según la plataforma

Cada plataforma tiene sus propias limitaciones y palancas. En una tienda en Shopify, por ejemplo, el control sobre el código es limitado pero la optimización de imágenes mediante el CDN de Shopify y la reducción de apps instaladas puede tener un impacto muy significativo. En WooCommerce, la flexibilidad es mayor pero también lo es la complejidad técnica: plugins como W3 Total Cache, WP Rocket o LiteSpeed Cache pueden mejorar notablemente los Core Web Vitals con una configuración adecuada.

La importancia de medir en móvil

Google utiliza los datos de dispositivos móviles como señal primaria para el ranking desde la implementación completa del mobile-first indexing. Esto significa que aunque tu web esté perfecta en escritorio, si en móvil tiene problemas de Core Web Vitals, tu posicionamiento se verá afectado. Prioriza siempre la vista móvil en tus análisis.

---

Core Web Vitals y su relación con otras señales de SEO técnico

Los Core Web Vitals no actúan en el vacío. Forman parte de una señal más amplia llamada "Page Experience" que incluye también la seguridad HTTPS, la ausencia de anuncios intersticiales intrusivos y la compatibilidad móvil. Mejorar los Core Web Vitals como parte de una estrategia técnica más amplia tiene un efecto multiplicador.

Además, la velocidad de carga y la estabilidad visual afectan directamente a métricas de comportamiento que Google también monitoriza: tasa de rebote, tiempo de permanencia, páginas por sesión. Una tienda con buen rendimiento técnico no solo posiciona mejor; también convierte mejor y retiene más al usuario.

Si tu estrategia SEO incluye la medición y optimización continua de resultados, el seguimiento de Core Web Vitals debe integrarse en tu reporting habitual. La guía sobre medición de SEO con Google Analytics 4 puede ayudarte a construir un cuadro de mandos que combine métricas de posicionamiento con métricas de rendimiento técnico.

---

Resumen: lo que debes recordar de los Core Web Vitals

Métrica Qué mide Umbral "Bueno" Causa frecuente en e-commerce
LCP Velocidad de carga percibida < 2,5 segundos Imágenes de producto sin optimizar
INP Capacidad de respuesta < 200 ms Scripts de terceros excesivos
CLS Estabilidad visual < 0,1 Imágenes sin dimensiones definidas

Los datos que importan para el ranking son los datos de campo (CrUX), no los de laboratorio. Revisa regularmente Google Search Console, prioriza las URLs con mayor impacto en negocio y traduce los problemas técnicos en acciones concretas para tu equipo de desarrollo. No necesitas entender el código para ser el motor que impulsa estas mejoras en tu organización.

---

¿Necesitas ayuda para mejorar los Core Web Vitals de tu tienda? El equipo de Comunicua lleva años auditando y optimizando el rendimiento técnico de tiendas online, con un enfoque que combina la parte técnica con el impacto real en posicionamiento y conversión. Contacta con nosotros y cuéntanos en qué situación está tu web: analizaremos tus métricas actuales y te diremos exactamente qué hay que hacer y en qué orden.