- Joaquín López
- Tiempo de lectura: 15 minutos
¿Tienes un sitio web que funciona lento o que genera frustración entre los usuarios? ¿Te preocupa que el posicionamiento SEO de tu página esté sufriendo por ello? Entonces has llegado al lugar correcto. En esta entrada vamos a desmenuzar de forma sencilla qué son los Core Web Vitals, por qué importan para el rendimiento web, y cómo puedes mejorarlos paso a paso. Al final también te dejo una checklist gratuita para validar tu sitio de arriba a abajo.
¡Vamos allá!
¿Qué son los Core Web Vitals y por qué importan para el rendimiento web?
Las tres métricas clave
- LCP (Largest Contentful Paint): mide el tiempo que tarda en aparecer el elemento más grande visible de la página. En general, para una buena experiencia debe ocurrir dentro de los primeros ~2,5 segundos. Según estudios de Google el 53% de las visitas puede abandonar el sitio web si sus páginas tardan más de 3 segundos en cargarse.
- Tipo de métrica: campo y laboratorio
- INP (Interaction to Next Paint): mide la capacidad de respuesta de la página cuando el usuario navega por tu web, cuánto tarda en poder hacer click o interactuar con ella, un valor adecuado sería inferior a 200ms. En general los usuarios somos algo ansiosos y tratamos de interactuar en cuanto tenemos una web delante.
- Tipo de métrica: campo
- CLS (Cumulative Layout Shift): mide la estabilidad visual de la página, es decir, si los elementos «saltan» de sitio inesperadamente mientras cargas o usas la página, ya que puede llegar a ser bastante frustrante para los usuarios comenzar a leer y que se te mueva un texto o el elemento sobre el que querías hacer click. Idealmente este valor debe ser menor de 0,1 para ofrecer buena experiencia.
- Tipo de métrica: campo y laboratorio
Existen dos tipos distintos de métricas de rendimiento, las de tipo laboratorio y las de campo:
Las métricas de laboratorio se obtienen en entornos controlados con dispositivos y configuraciones de red predefinidas, básicamente las ejecutan «bots».
Las métricas de campo son las obtenidas a través de los datos de usuarios reales que visitan la página web por lo que se obtienen con dispositivos y configuraciones de red reales y muy diversas
¿Por qué estos tres?
- LCP el tiempo de carga: ¿Ve el usuario el contenido resaltado pronto?
- INP tiempo para interactuar: ¿Puede usar la web sin espera?
- CLS la estabilidad: ¿La web carga y luego no empieza a moverse de forma extraña?
Mejores Core Web Vitals implican una mejor experiencia y mayor satisfacción del usuario lo que se traduce en una mayor retención, conversión y mejor experiencia del usuario.
Además, Google los usa como parte del algoritmo de posicionamiento, por lo que un buen rendimiento web ayuda a estar mejor posicionado en los resultados de búsqueda.
¿Existen más métricas de rendimiento web?
Además de las Core Web Vitals, existen otras métricas que te pueden ayudar a mejorar la velocidad de tu página web o a detectar el origen de los problemas de rendimiento. Te dejo un listado de las mismas para que sepas qué miden y el motivo de su importancia.
- TBT (Total Blocking Time)
- Qué mide: tiempo bloqueado por JS durante la carga.
- Tipo de métrica: laboratorio.
- Por qué importa: ayuda a diagnosticar problemas que afectan al INP.
- TTFB (Time To First Byte)
- Qué mide: respuesta inicial del servidor.
- Tipo de métrica: campo y laboratorio.
- Por qué importa: influye en la velocidad de carga y LCP.
- SI (Speed Index)
- Qué mide: velocidad visual global.
- Tipo de métrica: laboratorio.
- Por qué importa: da contexto sobre la «sensación» de rapidez.
- FCP (First Contentful Paint)
- Qué mide: cuándo se muestra el primer contenido.
- Tipo de métrica: campo y laboratorio.
- Por qué importa: relacionado con la percepción inicial. No confundir con el LCP ya que, a diferencia del mismo, este mide el tiempo en mostrar el primer elemento, el cual no tiene que ser necesariamente el más grande.
Entonces… ¿qué se entiende por «rendimiento web»?
El rendimiento web abarca todo lo que hace que un sitio «rinda» bien: velocidad de carga, interacción fluida, respuesta rápida, estabilidad visual, buen diseño móvil, poco «peso» inútil, etc. Los Core Web Vitals son un indicador clave, aunque no el único como ya hemos visto anteriormente, de ese rendimiento.
¿Dónde estás ahora? Diagnóstico inicial
Antes de hacer cambios drásticos, hay que saber exactamente cómo está tu sitio, es decir realizar una auditoría de la web, esto implica dos cosas:
Métricas actuales: medir y registrar
- Google PageSpeed Insights: evalúa una URL concreta, te da datos y recomendaciones prácticas.
- Lighthouse: dentro de Chrome DevTools, para auditorías más profundas. Esta personalmente la uso bastante ya que te permite analizar una página durante su desarrollo evitando que los problemas de rendimiento afecten a los usuarios cuando la misma sea puesta en producción.
- Google Search Console: informe de Core Web Vitals para múltiples URL de tu dominio, con datos reales de usuarios en lugar de sólo datos de test.
- RUM (Real User Monitoring): si quieres unas métricas más detalladas y realistas, puedes medir cuál es el rendimiento de los usuarios en distintos dispositivos, ubicaciones, etc. Para ello puedes contratar herramientas de RUM como por ejemplo: pingdom, dynatrace, raygun o akamai, todas ellas de pago. Como opciones gratuitas disponemos de la librería web-vitals, que nos permite realizar nuestra propia implementación para recopilar estas métricas.
Es vital registrar tus valores actuales (por ejemplo: LCP = 3,8 s, INP = 320 ms, CLS = 0,25) para luego ver la evolución.
Aquí debajo os dejo unas capturas de cómo obtener estos valores en Chrome y de paso presumir un poco de los valores de rendimiento que hemos conseguido en SapyensDev 
Para mostrar la consola de desarrollador en Chrome pulsa F12.
Como el INP es una métrica de campo tendrás que pulsar sobre cualquier elemento de la web para que se calcule.
Identificar dónde falla tu sitio
- ¿Qué métrica está peor (LCP, INP o CLS)?
- ¿Es peor en móvil o en escritorio?
- ¿En qué páginas concretas?
- ¿Qué tecnologías o patrones de tu sitio podrían estar generando problemas (imágenes muy grandes, muchos scripts, muchas solicitudes externas, anuncios, etc.)?
Por ejemplo: muchos sitios tienen buen LCP en escritorio pero fallan en móvil, o tienen CLS alto por anuncios o imágenes que cambian de tamaño al cargar.
Algo que debes tener en cuenta es que un buen resultado con las herramientas de análisis no garantiza 100% que tus usuarios tenga una experiencia grata en tu web y viceversa. Por eso adicionalmente al uso de herramientas es bueno obtener realizar pruebas reales, tanto por tu parte como por parte de tus empleados o conocidos para que te den un feedback real de cómo está funcionando tu sitio web
En definitiva: sin diagnóstico no hay mejora eficiente. Una vez sabes dónde estás, puedes priorizar qué arreglar primero.
Mejores prácticas para mejorar tus Core Web Vitals / Rendimiento web
Ahora que sabes dónde estás y por qué importa, vamos a ver qué hacer. Aquí tienes buenas prácticas que van desde lo más general hasta lo más técnico, explicadas de forma sencilla.
Mejora de LCP (carga del contenido principal)
- Asegúrate de que el recurso que determina el LCP (por ejemplo una imagen grande o texto destacado) sea cargado lo antes posible, ya que es factible dar directrices al navegador sobre qué recursos cargar primero con preload y el atributo fetchpriority.
- Usa un buen servidor: muchas veces el problema se encuentra en el servidor donde tenemos alojada la web. Es probable que ese servidor gratuito o de bajo coste seguramente no tenga un rendimiento óptimo.
- Considera usar un CDN: Un CDN es una red de servidores distribuidos geográficamente donde se aloja una copia en caché de tu web, permitiendo servirla a los usuarios con mayor rapidez. Cloudfare dispone de una versión gratuita que nos puede ayudar a mejorar nuestro rendimiento.
- Optimiza imágenes: usa formatos modernos (WebP, AVIF), compresión, tamaños adaptados, y carga diferida, si es adecuando, en los elementos que no aparecen en la parte visible de la web cuando esta se carga inicialmente (lazy-load).
- Minifica y optimiza CSS/JS que pueda bloquear el renderizado: reduce lo que bloquea que tu navegador muestre el contenido.
- Elimina los archivos JavaScript y CSS que no se utilicen así como las partes de código inservibles.
- Elimina plugins de CMS que no se utilicen.
- Prioriza el «above-the-fold»: el contenido visible al cargar debe mostrarse rápido, lo que está más abajo puede esperar.
Mejora de INP (interactividad)
- Evita tareas largas que bloqueen el hilo principal del navegador. Considera la posibilidad de utilizar web workers para estos procesos.
- Reduce la cantidad de JavaScript que se ejecuta al inicio, divide tu código si puedes y elimina el JS que no usas.
- Reduce el tamaño del DOM reduce el número de elementos y su profundidad ya que, con un DOM grande el navegador tarda más en calcular estilos, layout, etc.
- Evita actualizaciones de layout innecesarias y optimiza tus CSS.
- Retrasar la carga de scripts menos críticos como los de análisis, publicidad y herramientas de redes sociales.
Mejora de CLS (estabilidad visual)
- Reserva siempre espacio para tus imágenes/iframes antes de que carguen (por ejemplo, define width/height o usa CSS aspect-ratio).
- Evita inyectar contenido arriba del scroll que cambie la posición del contenido ya cargado (por ejemplo anuncios que empujan el texto hacia abajo).
- Evita animaciones que cambian layout, o usa transformaciones y opacidades en lugar de propiedades que obligan a re-layout.
Otras buenas prácticas de rendimiento web
- Aplica caché de navegador y del lado del servidor (server-side) para que los recursos se reutilicen.
- Minimiza las redirecciones y peticiones HTTP innecesarias.
- Comprueba que tu web esté optimizada para móvil. Muchos usuarios llegan desde dispositivos móviles y ahí el rendimiento es más crítico. Google da más peso para tu posicionamiento a los valores obtenidos de los Core Web Vitals en móvil que los obtenidos para ordenador y no es de extrañar, actualmente el 75% de los usuarios navegan con dispositivos móviles.
Priorizar lo que más beneficio aporta
No todo tiene que hacerse al mismo tiempo. Haz lo que genere más retorno, lo que sea más factible, para luego avanzar hacia lo más técnico.
¿Cómo aplicar los cambios paso a paso?
Aquí tienes un flujo sugerido de trabajo, para que lo puedas seguir sin perderte.
Paso 1: Recoge datos y haz un inventario
- Ejecuta tus herramientas (PageSpeed Insights, Search Console, Lighthouse) y guarda los valores de LCP, INP, CLS, y también los valores de rendimiento global.
- Haz un inventario de tus recursos críticos: imágenes grandes, scripts pesados, plugins que pueden estar generando retardo, recursos externos, etc.
- Prioriza páginas importantes (home, categorías, páginas de conversión y las mejor posicionadas) antes que páginas secundarias.
Paso 2: Identifica y prioriza problemas
- Marca qué páginas tienen peores valores.
- Para cada página, detecta qué métrica está peor o cuál parece el problema: ¿carga lenta (LCP)? ¿respuesta tardía (INP)? ¿saltos visuales (CLS)?
- Estima esfuerzo vs impacto: por ejemplo, cambiar una imagen muy grande puede ser rápido y tener alto impacto, cambiar el hosting puede costar más pero también aportar mucha mejora.
Paso 3: Aplica las optimizaciones
- Empieza por los «más fáciles y rentables»: imágenes, compresión, lazy-load, reservar espacio para el contenido, eliminar scripts innecesarios.
- Luego pasa a optimizaciones más profundas: revisar arquitectura de JS, limpiar el DOM, dividir código, revisar hosting/CDN.
- Asegúrate de testear en móvil y desktop. A veces el móvil es mucho más lento y puede que ahí esté el cuello de botella.
Paso 4: Monitoriza resultados y ajusta
- Tras aplicar cambios, vuelve a medir. ¿Ha mejorado el LCP, INP, CLS?
- Recuerda que los Core Web Vitals se miden en base al percentil 75 de usuarios reales, no solo tests de laboratorio.
- Haz seguimiento continuo, ya que el rendimiento puede variar por nuevos plugins, nuevas funcionalidades, campañas, etc.
- Si tienes Search Console, valida que las URLs pasen de «Needs improvement» o «Poor» a «Good» en el informe de Core Web Vitals.
Paso 5: Mantén el rendimiento como parte del proceso
- Cuando hagas cambios en tu sitio (nuevo plugin, nueva funcionalidad, nuevas imágenes, anuncio, etc.), considera el impacto en rendimiento.
- Haz auditorías periódicas para asegurar que no se han introducido errores de regresión.
- Antes de lanzar un nuevo cambio importante, revisa si el rendimiento se mantiene aceptable.
Ejemplo: «Checklist» GRATIS (Descargable)
FAQ: Core Web Vitals y rendimiento web
¿Qué son los Core Web Vitals y por qué son importantes?
Los Core Web Vitals son métricas clave que usa Google para medir la experiencia de usuario en tu sitio: velocidad de carga (LCP), interactividad (INP) y estabilidad visual (CLS).
Mejorarlas te ayuda a posicionarte mejor, reducir el rebote y ofrecer una experiencia más rápida y fluida.
¿Cómo puedo saber si mis Core Web Vitals son buenos?
¿Qué acciones rápidas puedo hacer para mejorar el rendimiento?
¿Cada cuánto debo revisar el rendimiento web de mi sitio?
Lo ideal es analizarlo una vez al mes o cada vez que realices cambios grandes (como nuevas plantillas o plugins).
Un seguimiento constante te ayuda a detectar caídas de rendimiento a tiempo y mantener tus Core Web Vitals en verde.
¡ES TU TURNO!
Me gustaría animarte a que realices esta auditoría sobre tu web hoy mismo. No dejes que tu rendimiento web sea un «pendiente» indefinido:
- Realiza una auditoría rápida de tu página principal en PageSpeed Insights y captura los valores de LCP, INP, CLS.
- Usa la checklist que te he dado para hacer una revisión básica de imágenes, scripts y caché.
- Prioriza una mejora rápida, por ejemplo: comprimir una imagen gigante, eliminar un script pesado o activar lazy-load y vuelve a medir.
- Observa cómo mejora tu rendimiento, y cómo posiblemente mejora la experiencia de usuario (menos rebote, más tiempo en la página).
¿Quieres que revisemos tu web y te digamos exactamente qué necesita para rendir al máximo?
Estaré encantado de ayudarte a conseguirlo.
Así que… ¿por qué no dar ese primer paso hoy mismo? Mejora tus Core Web Vitals, acelera tu web, y ofrece una experiencia que tus usuarios valoren.