Cuando hablamos de la velocidad de una página web, solemos pensar en una pregunta muy sencilla: ¿cuánto tarda en cargar?
Pero una web puede ser rápida en términos generales y, al mismo tiempo, ofrecer una experiencia poco fluida. Puede mostrar el contenido principal rápidamente, pero tardar en responder cuando el usuario pulsa un botón. O puede parecer que ha terminado de cargar y, de repente, desplazar todo el contenido porque aparece una imagen o un elemento que no estaba reservado correctamente.
Para analizar estos aspectos, Google utiliza un conjunto de métricas conocidas como Core Web Vitals.
No se trata únicamente de conseguir una buena puntuación. Estas métricas intentan medir aspectos concretos de la experiencia real de una persona cuando utiliza una página web.
¿Qué son los Core Web Vitals?
Los Core Web Vitals son un conjunto de métricas que permiten evaluar diferentes aspectos de la experiencia de usuario de una página.
Actualmente se centran principalmente en tres cuestiones:
- LCP (Largest Contentful Paint): cuánto tarda en mostrarse el contenido principal.
- INP (Interaction to Next Paint): cómo responde la página a las interacciones del usuario.
- CLS (Cumulative Layout Shift): cuánto cambia inesperadamente la posición de los elementos mientras se carga la página.
Cada una analiza un problema diferente.
Por eso, hablar simplemente de que una web es «rápida» no siempre explica lo que está experimentando realmente el usuario.
LCP: cuándo aparece el contenido principal.
LCP, o Largest Contentful Paint, mide el tiempo que tarda en aparecer el elemento de contenido de mayor tamaño visible dentro de la pantalla inicial.
Puede tratarse, por ejemplo, de una imagen principal, un bloque de texto destacado o un elemento visual de gran tamaño.
La idea es sencilla: cuando alguien entra en una página, ¿cuánto tiene que esperar hasta que aparece lo que probablemente considera el contenido principal?
Un LCP elevado puede estar relacionado con diferentes factores:
- Un servidor que responde lentamente.
- Imágenes demasiado pesadas.
- Recursos CSS o JavaScript que retrasan la representación.
- Una configuración de caché poco eficiente.
- Una conexión o infraestructura que no está optimizada.
- Una página que necesita descargar demasiados recursos antes de mostrar su contenido principal.
Por eso, mejorar el LCP no consiste simplemente en «hacer más pequeña la web». Hay que analizar qué está retrasando realmente la aparición del contenido.
INP: cómo responde la web cuando haces clic.
Una página puede cargarse rápidamente y, sin embargo, sentirse lenta cuando intentamos utilizarla.
Aquí entra en juego INP, o Interaction to Next Paint.
Esta métrica analiza la capacidad de respuesta de una página ante las interacciones del usuario. Por ejemplo, cuando alguien pulsa un botón, abre un menú, utiliza un formulario o realiza otra acción.
La cuestión que plantea INP es muy directa:
¿La página responde rápidamente cuando el usuario intenta interactuar con ella?
Una gran cantidad de JavaScript, scripts mal optimizados o procesos demasiado pesados pueden provocar que una interacción tarde en producir una respuesta visual.
Desde el punto de vista del usuario, esto puede resultar especialmente frustrante.
No basta con que una página aparezca rápidamente. También tiene que responder correctamente cuando alguien intenta utilizarla.
CLS: cuando una página se mueve sola.
Seguro que alguna vez has intentado pulsar un botón y, justo cuando ibas a hacerlo, el contenido se ha desplazado.
El botón cambia de posición, aparece una imagen, se carga una fuente o aparece un banner y todo lo que había debajo se mueve.
Esto es precisamente el tipo de problema que intenta detectar CLS, o Cumulative Layout Shift.
CLS mide los cambios inesperados de posición de los elementos visibles durante la carga de una página.
Una mala implementación puede provocar situaciones como:
- Pulsar accidentalmente un elemento diferente al que queríamos.
- Perder la posición en la que estábamos leyendo.
- Ver cómo cambia continuamente la distribución de la página.
- Tener una experiencia de navegación poco estable.
Una buena web no solo tiene que cargar rápido. También debe mantener estable su contenido mientras se carga.
Los tres problemas son diferentes.
Una de las claves para entender los Core Web Vitals es que LCP, INP y CLS no miden lo mismo.
Una página puede tener un buen LCP pero un INP deficiente.
Otra puede responder perfectamente a las interacciones pero sufrir problemas de CLS.
Y otra puede tener una buena estabilidad visual pero tardar demasiado en mostrar su contenido principal.
Por eso es importante analizar cada métrica por separado.
| Métrica | Qué analiza | Problema que intenta detectar |
|---|---|---|
| LCP | Aparición del contenido principal | Carga visual demasiado lenta |
| INP | Respuesta ante las interacciones | Falta de capacidad de respuesta |
| CLS | Estabilidad visual | Movimientos inesperados del contenido |
¿Significa esto que Google solo quiere webs rápidas?
No exactamente.
Los Core Web Vitals muestran algo importante: el rendimiento web no consiste únicamente en reducir el tiempo de carga.
Una página puede empezar a mostrar contenido rápidamente, pero si después tarda en responder a un clic o mueve constantemente sus elementos, la experiencia seguirá siendo deficiente.
Por eso el rendimiento debe entenderse como un conjunto de factores.
La infraestructura del servidor, el código, las imágenes, las fuentes, JavaScript, CSS, la caché y la forma en la que se construye la página pueden influir en el resultado final.
¿Cómo se mejoran los Core Web Vitals?
No existe un botón mágico que permita mejorar las tres métricas.
Cada problema requiere un análisis diferente.
Para mejorar el LCP, puede ser necesario optimizar las imágenes, reducir recursos que bloquean la representación, mejorar la respuesta del servidor o utilizar sistemas de caché y distribución de contenidos.
Para mejorar el INP, puede ser necesario revisar JavaScript, reducir tareas demasiado pesadas y evitar que el navegador tenga que realizar procesos innecesarios mientras el usuario interactúa con la página.
Para mejorar el CLS, es fundamental reservar correctamente el espacio de imágenes, vídeos, anuncios y otros elementos que puedan aparecer durante la carga.
Y en todos los casos hay una cuestión fundamental:
no se puede optimizar correctamente aquello que no se mide.
¿Cómo se miden?
Existen diferentes herramientas para analizar el rendimiento de una página.
Una de las más conocidas es Google PageSpeed Insights, que permite consultar datos de laboratorio y, cuando están disponibles, datos procedentes de usuarios reales.
También existen otras herramientas y sistemas de monitorización que permiten estudiar el comportamiento de una web con mayor profundidad.
Esto es importante porque una prueba realizada desde un ordenador concreto y una conexión determinada no representa necesariamente lo que experimentan todos los visitantes.
Los datos reales pueden mostrar un comportamiento diferente dependiendo del dispositivo, la conexión y las condiciones en las que se visita la página.
Una web no termina cuando consigue una buena puntuación.
Conseguir unos buenos Core Web Vitals es importante, pero no debería convertirse en el único objetivo de un proyecto web.
Una página necesita ser rápida, pero también debe ser útil, accesible, segura, mantenible y fácil de utilizar.
Además, el rendimiento puede cambiar con el tiempo.
Una nueva funcionalidad, un plugin, una imagen de mayor tamaño, un cambio en el código o un nuevo recurso externo pueden modificar el comportamiento de una página.
Por eso la optimización web no debería entenderse como una acción que se realiza una sola vez.
Es un proceso continuo.
Diseño y tecnología tienen que trabajar juntos.
Los Core Web Vitals también ayudan a entender algo que a veces se olvida: el diseño de una página web no puede separarse completamente de su parte técnica.
Una página puede tener un diseño excelente, pero si está construida de manera que obliga al navegador a procesar demasiados recursos, la experiencia final puede empeorar.
Del mismo modo, una web técnicamente optimizada no tiene sentido si resulta complicada de utilizar o no comunica correctamente lo que ofrece.
El objetivo es conseguir un equilibrio entre diseño, tecnología, contenido y rendimiento.
El rendimiento también forma parte del SEO.
La experiencia de usuario y el rendimiento forman parte del ecosistema de factores que Google utiliza para evaluar las páginas.
Pero conviene evitar una simplificación habitual: tener buenos Core Web Vitals no garantiza por sí solo aparecer en las primeras posiciones de Google.
El posicionamiento depende de muchos otros factores, como la calidad y utilidad del contenido, la relevancia, la autoridad, la arquitectura de la web y otros aspectos técnicos.
Los Core Web Vitals son una pieza más dentro de un proyecto SEO.
En berhattan, una web se entiende como un proyecto que evoluciona.
Crear una página web no consiste únicamente en diseñar unas pantallas y publicarlas.
Hay que tener en cuenta la infraestructura, el código, las imágenes, la caché, la seguridad, el rendimiento y la experiencia que tendrá el usuario cuando visite la página desde diferentes dispositivos y conexiones.
Por eso, en berhattan, el trabajo de una web continúa después de su publicación.
La optimización SEO y GEO forman parte de una evolución continua, igual que la revisión del rendimiento y de los diferentes elementos que pueden afectar a la experiencia de usuario.
Porque una buena página web no es solamente la que funciona cuando se publica.
Es la que sigue funcionando, mejorando y adaptándose con el tiempo.
Conclusión.
Los Core Web Vitals permiten mirar una página web desde una perspectiva diferente.
No preguntan únicamente cuánto tarda en cargar.
Preguntan también:
¿cuándo aparece el contenido principal?
¿cómo responde la página cuando interactuamos con ella?
¿permanece estable mientras se carga?
Son tres preguntas aparentemente sencillas, pero detrás de ellas existe toda una arquitectura tecnológica.
Y entenderla permite construir webs mejores.
Porque detrás de cada clic, cada imagen y cada página que aparece en pantalla existe una combinación de servidores, código, bases de datos, caché, navegador y conexiones que determina cómo será realmente la experiencia del usuario.
En berhattan trabajamos para que esa tecnología esté al servicio de la web y de las personas que la utilizan.
