Core Web Vitals: guía práctica para entender y mejorar tu web

Todos hemos abandonado alguna vez una web que tardaba en cargar, cuyo botón no respondía o cuyo texto saltaba justo cuando íbamos a pulsar. Los Core Web Vitals son la forma en que Google intenta medir esas sensaciones con números. Entenderlos no exige ser técnico: basta con saber qué mide cada uno, cómo comprobarlo y qué cambios suelen marcar la diferencia.

Esta guía propone un recorrido práctico en pasos. No promete posiciones en los buscadores: los Core Web Vitals son una señal más y los resultados dependen de tu web, tu sector y tu competencia.

1. Qué mide cada métrica

Hoy se habla de tres métricas principales:

Métrica	Qué describe	Umbral considerado "bueno" por Google
LCP (Largest Contentful Paint)	Cuánto tarda en verse el elemento principal de la página, normalmente una imagen grande o un bloque de texto	2,5 segundos o menos
INP (Interaction to Next Paint)	Cuánto tarda la página en responder visualmente cuando alguien pulsa, toca o escribe	200 milisegundos o menos
CLS (Cumulative Layout Shift)	Cuánto se mueve el diseño de forma inesperada mientras carga	0,1 o menos

Estos umbrales son los que publica Google en su documentación técnica (web.dev) y pueden revisarse con el tiempo, así que conviene consultarlos de vez en cuando.

2. Mide con datos reales, no solo con pruebas

Hay dos tipos de datos y conviene no mezclarlos:

• Datos de campo: vienen de visitantes reales, con sus móviles, sus conexiones y sus navegadores. Es lo que más se parece a la experiencia verdadera.
• Datos de laboratorio: son pruebas simuladas en condiciones controladas. Sirven para depurar y comparar antes y después de un cambio.

Herramientas gratuitas habituales:

1. PageSpeed Insights: muestra datos de campo, si existen, y una prueba de laboratorio con recomendaciones.
2. Informe de Core Web Vitals en Search Console: agrupa las páginas de tu web según su estado, siempre que tengan visitas suficientes.
3. Herramientas para desarrolladores del navegador: útiles para analizar una página concreta.

Mide primero las páginas que más importan: la de inicio, las de servicios y aquellas donde se origina el contacto.

3. Mejora el LCP: que lo principal aparezca antes

Lo más habitual es que el elemento principal sea una imagen. Revisa estos puntos:

• Optimiza las imágenes: usa formatos modernos, un tamaño acorde al espacio real y compresión razonable.
• No cargues en diferido la imagen principal: la carga diferida es útil para imágenes que están más abajo, pero retrasa la que se ve al abrir la página.
• Reduce el tiempo de respuesta del servidor: un alojamiento lento o una página que se genera de cero en cada visita lo empeoran.
• Evita lo que bloquea la carga: fuentes, hojas de estilo o scripts que impiden mostrar el contenido hasta que terminan de descargarse.

4. Mejora el INP: que la página responda cuando se toca

Un INP alto suele deberse a demasiado código ejecutándose en el navegador. Algunas acciones:

• Elimina scripts que no aportan: pegatinas de seguimiento duplicadas, widgets que nadie usa o complementos antiguos.
• Retrasa lo que no es imprescindible: un chat o un mapa pueden cargarse cuando el visitante los necesite.
• Simplifica los formularios y menús que ejecutan mucho código al interactuar.
• Mantén actualizadas las librerías y los complementos de tu gestor de contenidos.

Esta parte suele requerir apoyo técnico, pero una auditoría de lo que se carga en la página ya señala los primeros candidatos a eliminar.

5. Mejora el CLS: que nada salte mientras se lee

Los saltos de diseño se producen cuando el navegador no sabe de antemano cuánto espacio ocupará algo. Remedios habituales:

• Indica el ancho y el alto de imágenes y vídeos, o reserva su espacio con proporciones.
• Reserva espacio para banners, avisos y anuncios que aparecen después de cargar.
• Cuida las fuentes: una fuente que se sustituye al cargar puede mover el texto. Usa opciones de visualización que reduzcan el salto.
• Evita insertar contenido por encima de lo que ya se está leyendo, salvo que sea una respuesta a una acción del usuario.

6. Cambia una cosa cada vez y vuelve a medir

Para saber qué funciona, aplica los cambios por separado:

1. Anota las métricas de partida de tus páginas clave.
2. Introduce una mejora, por ejemplo comprimir las imágenes de la página de inicio.
3. Espera a disponer de datos nuevos y compáralos con los anteriores.
4. Conserva lo que ayuda y revierte lo que no.

Los datos de campo se acumulan durante semanas, así que no esperes ver el efecto al día siguiente.

7. Pon los números en perspectiva

Una web con métricas excelentes y un contenido poco útil no atraerá clientes, igual que un buen contenido en una web inestable pierde visitas por el camino. Trata los Core Web Vitals como parte de un conjunto: contenido claro, datos estructurados, enlaces internos bien pensados y una web que funcione bien en el móvil. En esta guía de SEO local tienes otro ejemplo de cómo se combinan estos elementos, y en nuestra página de SEO explicamos cómo lo abordamos.

Por dónde empezar esta semana

1. Pasa tu página de inicio y tu página de servicios principal por PageSpeed Insights y apunta las tres métricas.
2. Revisa el peso y el formato de las imágenes más grandes.
3. Haz una lista de los scripts y complementos que se cargan y marca los que sobran.
4. Comprueba que las imágenes y los banners tienen su espacio reservado.
5. Vuelve a medir dentro de unas semanas y compara.

Si quieres que revisemos tu caso con calma, puedes escribirnos.