¿Alguna vez te has quedado mirando una web que carga tan lento que te da tiempo a sacarte la carrera de medicina? ¿Has intentado hacer clic en un botón que se mueve más que un político evitando decir la verdad? Pues bien, la cosa es que a Google no le mola un pelo y por eso creó las Core Web Vitals.
Las Core Web Vitals son básicamente las métricas que Google utiliza para medir si tu web es una joya o un auténtico truño. Y no, no es solo para presumir con los desarrolladores; estas métricas influyen directamente en cómo te posiciona Google. Vamos, que si tu web va regulín, Google te va a mandar al final de la cola en los resultados de búsqueda, y eso mola entre poco y nada.
¿Qué son las Core Web Vitals?
Para que nos entendamos, las Core Web Vitals son tres métricas principales que miden la experiencia de usuario en tu web:
- Largest Contentful Paint (LCP): o en cristiano, cuánto tarda en cargar el contenido principal de tu página. Si tarda más de 2,5 segundos, tu web está en problemas.
- First Input Delay (FID): el tiempo que tarda tu web en responder cuando alguien hace clic o toca algo. Si pasan más de 100 milisegundos, la gente se impacienta y se pira.
- Cumulative Layout Shift (CLS): la estabilidad visual de tu página. ¿Sabes cuando estás a punto de hacer clic en algo y de repente la página se mueve y acabas pulsando otro elemento? Eso es un CLS de mierda, y Google lo penaliza.
Pero ojo, que hay novedades: Google ha reemplazado el FID por una métrica llamada Interaction to Next Paint (INP). Esta mide no solo el primer clic, sino todas las interacciones, lo que la hace mucho más realista para evaluar la experiencia de usuario.
¿Por qué deberían importarme las Core Web Vitals?
Te diré por qué. Primero, porque a Google le importa, y lo que le importa a Google acaba importándonos a todos. Desde mayo de 2021, estas métricas son factores oficiales de ranking. Segundo, porque tus usuarios lo agradecerán. Una web rápida y estable significa menos abandonos, más conversiones y más pasta en tu bolsillo. ¿Necesitas más razones?
Según un estudio de Portent, los sitios que cargan en 1 segundo tienen una tasa de conversión tres veces mayor que los que tardan 5 segundos. Y no solo eso, el HTTP Archive muestra que la mayoría de los sitios web todavía están lejos de cumplir con las expectativas de Google. Vamos, que hay mucho margen de mejora y una oportunidad de oro para destacar.
Mide tus Core Web Vitals sin volverte loco
Vale, ahora que sabes qué son y por qué son importantes, vamos a ver cómo puedes medirlas sin necesidad de un doctorado en informática. Hay varias herramientas que puedes usar, y la mayoría son gratis, así que no hay excusa para no ponerse manos a la obra:
Herramientas de campo (datos reales)
- Chrome User Experience Report (CrUX): Datos reales de usuarios de Chrome. Google los recoge y los usa para evaluar tu sitio. Puedes acceder a estos datos a través de la API de CrUX o verlos en Google Search Console.
- Google Search Console: Tiene una sección específica para Core Web Vitals donde puedes ver cómo te va y qué páginas necesitan amor urgente.
- PageSpeed Insights: Combina datos reales de CrUX con análisis de laboratorio. Es como el 2 en 1 de los champús, pero para métricas web.
- Web Vitals Extension para Chrome: Un pequeño plugin que te muestra las métricas en tiempo real mientras navegas. Muy útil para hacer comprobaciones rápidas.
Herramientas de laboratorio (datos simulados)
- Lighthouse: Integrado en las DevTools de Chrome, simula conexiones y dispositivos para darte informes detallados. Es como tener un laboratorio de pruebas en tu navegador.
- WebPageTest: Una herramienta más completa que te permite probar desde diferentes ubicaciones y con diferentes conexiones. Para los que quieren ir al detalle.
Si quieres algo más pro, puedes implementar la Web Vitals JavaScript library directamente en tu sitio para recoger datos específicos de tus usuarios. Es como tener un espía trabajando para ti, pero legal y útil.
Vamos a hablar del LCP (suena como una enfermedad pero es importante)
El Largest Contentful Paint (LCP) mide cuánto tarda en renderizarse el mayor elemento visible en la ventana de visualización. En español: cuánto tarda en aparecer lo más gordo de tu página. Puede ser una imagen, un vídeo, un bloque de texto… lo que sea que ocupe más espacio.
Para que Google te dé su bendición, tu LCP debería ser inferior a 2,5 segundos. Entre 2,5 y 4 segundos estás en terreno pantanoso, y por encima de 4 segundos estás básicamente diciéndole a tus usuarios «vete a tomar por saco».
¿Cómo mejorar tu LCP sin convertirte en un genio de la programación?
- Optimiza tus imágenes: Comprime esas fotos enormes que subes directamente de tu iPhone. Usa formatos modernos como WebP y asegúrate de que se cargan de forma progresiva.
- Implementa lazy loading: Carga solo lo que se ve en pantalla y deja el resto para cuando el usuario haga scroll. Tu página cargará más rápido y tus usuarios estarán más contentos que un niño con zapatos nuevos.
- Mejora tu servidor: Si tu hosting es más lento que un caracol con resaca, cámbiate a uno mejor. Un buen Time to First Byte (TTFB) es fundamental para un buen LCP.
- Prioriza el contenido crítico: Usa técnicas como Critical CSS para cargar primero lo importante y dejar lo accesorio para después.
- Elimina JavaScript innecesario: Cada script que bloquea el renderizado es un clavo en el ataúd de tu LCP. Revisa qué necesitas realmente y manda el resto a la papelera.
Y si no quieres complicarte, usa un CDN como Cloudflare o Akamai. Distribuyen tu contenido por servidores de todo el mundo, haciendo que tu web cargue más rápido sin importar desde dónde la estén viendo.
Estrategias para diferentes tipos de sitios web
No todos los sitios web son iguales, y las estrategias para mejorar las Core Web Vitals pueden variar según el tipo de sitio que tengas. A continuación, te dejo algunos consejos específicos para diferentes tipos de webs:
Para sitios de e-commerce
- Implementa un esqueleto de carga (skeleton screens) para mantener la estructura de la página mientras se cargan los productos.
- Optimiza las imágenes de los productos con formatos modernos y carga progresiva.
- Considera implementar una Arquitectura MACH (Microservicios, API-first, Cloud-native y Headless) para mayor flexibilidad y rendimiento.
- Utiliza la API de Intersection Observer para cargar productos adicionales solo cuando el usuario se acerca a ellos.
Para blogs y sitios de contenido
- Implementa una estrategia de caché agresiva para el contenido que no cambia frecuentemente.
- Considera un enfoque de Jamstack para generar páginas estáticas que se sirven desde un CDN.
- Optimiza la carga de comentarios y widgets sociales, que suelen ser pesados.
- Utiliza técnicas de carga progresiva para imágenes dentro del contenido.
Para aplicaciones web single-page (SPA)
- Implementa code-splitting para cargar solo el JavaScript necesario para cada ruta.
- Considera el server-side rendering (SSR) o static site generation (SSG) para mejorar el LCP.
- Usa servicios como Preact en lugar de React para reducir el tamaño del bundle.
- Implementa una estrategia de precarga inteligente para las rutas más probables.
Recuerda que lo importante no es solo arreglar los problemas actuales, sino implementar procesos que eviten que surjan nuevos problemas en el futuro.
Como diría mi abuela: «Más vale prevenir que curar».
El INP: el nuevo integrante que reemplaza al anterior FID
Como te comentaba antes, Google ha decidido jubilar al First Input Delay (FID) y darle paso al Interaction to Next Paint (INP). Este cambio se hizo oficial en marzo de 2024, así que ya va siendo hora de que te pongas las pilas con esta nueva métrica.
El INP mide la capacidad de respuesta de todas las interacciones del usuario a lo largo de toda la visita a la página, no solo la primera. Es como pasar de evaluar el primer mordisco a una hamburguesa a evaluar toda la experiencia de comerla. Mucho más justo, ¿verdad?
Para que Google te considere rápido, tu INP debería ser inferior a 200 milisegundos. Entre 200 y 500 milisegundos estás en la zona «meh», y por encima de 500 milisegundos empiezas a dar vergüenza ajena.
Trucos para mejorar tu INP y quedar como un campeón
- Divide tareas largas de JavaScript: En lugar de ejecutar scripts enormes que bloquean el hilo principal, divídelos en tareas más pequeñas. Es como cuando tienes que limpiar toda la casa y lo haces por partes para no agobiarte.
- Usa Web Workers: Desplaza el trabajo pesado a hilos secundarios para mantener el hilo principal libre y receptivo. Tu web será como esos restaurantes con muchos camareros: aunque haya mucha gente, te atienden rápido.
- Optimiza los controladores de eventos: Implementa técnicas como el «debouncing» y el «throttling» para evitar que los eventos se disparen demasiadas veces.
- Presta atención al código de terceros: Esos widgets chulos y plugins que has añadido pueden estar ralentizando toda tu página. Evalúa si realmente los necesitas o si puedes encontrar alternativas más ligeras.
- Usa el patrón PRPL: Push (empuja), Render (renderiza), Pre-cache (pre-almacena en caché) y Lazy-load (carga perezosa). Un enfoque moderno para cargar solo lo necesario cuando se necesita.
Un truco extra: instala la extensión What Blocks Paint para Chrome. Te muestra exactamente qué está retrasando la pintura de tu página después de una interacción. Es como tener un detective privado que te dice quién se está cargando tu fiesta.
El CLS: o por qué tu web no debería moverse como un poseso
El Cumulative Layout Shift (CLS) mide la estabilidad visual de tu página. Si alguna vez has intentado hacer clic en algo y de repente se ha movido, provocando que hagas clic en otra cosa, has experimentado un shift de layout y probablemente has soltado alguna palabrota.
Google quiere que tu CLS sea inferior a 0,1. Entre 0,1 y 0,25 estás en terreno medio, y por encima de 0,25 tu página es básicamente un campo de minas donde cualquier clic puede acabar en desastre.
Cómo evitar que tu web se ponga a bailar:
Especifica dimensiones para imágenes y vídeos: Siempre incluye el width y height en tus elementos multimedia para reservar el espacio antes de que carguen.
<img decoding="async" src="imagen.jpg" width="400" height="300" alt="Descripción">
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
</video>
Ten cuidado con los banners: Si tu web depende de publicidad, asegúrate de reservar un espacio fijo para ella. Los anuncios que empujan el contenido son el enemigo número uno del buen CLS.
<div class="anuncio" style="min-height: 250px; width: 300px;">
<!-- Contenido del anuncio -->
</div>
Evita insertar contenido dinámicamente: Si tienes que añadir elementos después de la carga inicial, hazlo de manera que no desplace el contenido existente.
<div id="contenedor-dinamico" style="height: 200px; overflow: hidden;">
<!-- El contenido dinámico se insertará aquí -->
</div>
Precarga las fuentes personalizadas: Las fuentes que tardan en cargar pueden causar cambios de diseño cuando finalmente aparecen. Usa font-display: swap o precarga las fuentes críticas.
<link rel="preload" href="mifuente.woff2" as="font" type="font/woff2" crossorigin>
<style>
@font-face {
font-family: 'MiFuente';
font-display: swap;
src: url('mifuente.woff2') format('woff2');
}
</style>
Anima con transform en lugar de propiedades que afectan al layout: Las animaciones con transform y opacity son mucho más eficientes y no causan recálculos de layout.
<style>
.animacion-buena {
transform: translateX(100px);
opacity: 0.8;
transition: transform 0.3s, opacity 0.3s;
}
.animacion-mala {
margin-left: 100px; /* Evitar esto */
height: 120%; /* Evitar esto */
}
</style>
Consejo de amigo: instala la extensión Web Vitals para Chrome y activa la opción de visualización de CLS. Verás exactamente qué elementos están causando shifts y podrás corregirlos uno por uno.
Variabilidad de las Core Web Vitals
Algo que debes tener muy en cuenta es que las Core Web Vitals no son estáticas. Google las revisa y actualiza constantemente basándose en la evolución de la web y las expectativas de los usuarios. El cambio de FID a INP es solo un ejemplo de cómo estas métricas evolucionan.
Por eso, más que centrarte en «aprobar» las métricas actuales, deberías desarrollar una mentalidad de mejora continua. Implementa un sistema de monitorización regular y mantente al día de los cambios que Google vaya anunciando.
Como dice Addy Osmani, ingeniero de Google: «No optimices para métricas, optimiza para usuarios reales». Las métricas son solo una aproximación de lo que realmente importa: la experiencia de las personas que visitan tu sitio.
Herramientas y recursos que salvarán tu trasero
Para terminar, te dejo una lista de herramientas y recursos que te ayudarán a mejorar tus Core Web Vitals sin perder la cabeza:
Herramientas de diagnóstico y monitorización
- web.dev Measure: Una forma sencilla de medir el rendimiento de tu sitio web.
- WebPageTest: Para análisis detallados desde diferentes ubicaciones y dispositivos.
- DebugBear: Monitorización continua de Core Web Vitals con informes detallados.
- SpeedCurve: Monitorización de rendimiento enfocada en la experiencia de usuario.
Recursos de aprendizaje
- Learn Core Web Vitals: Curso gratuito de Google sobre Core Web Vitals.
- INP Tools and Guidance: Guía específica para la nueva métrica INP.
- Smashing Magazine – Performance: Artículos detallados sobre rendimiento web.
- Core Web Vitals de Google en YouTube: Explicaciones visuales de las métricas y cómo mejorarlas.
Herramientas de optimización
- Squoosh: Herramienta de Google para comprimir imágenes sin perder calidad.
- quicklink: Biblioteca de JavaScript para prefetch de enlaces.
- Cloudinary: Servicio para optimizar y entregar imágenes y vídeos de forma eficiente.
- Cloudflare: CDN con muchas características para mejorar el rendimiento.
Tenlas siempre presente
Las Core Web Vitals no son solo una moda pasajera. Son un conjunto de métricas que realmente reflejan lo que los usuarios valoran: sitios rápidos, estables y reactivos. Y lo mejor (o peor, según se mire) es que Google las utiliza como factor de ranking, así que ignorarlas no es una opción si quieres que tu sitio tenga visibilidad.
La buena noticia es que mejorar estas métricas no solo te ayuda con el SEO, sino que también mejora la experiencia de usuario, reduce la tasa de rebote y aumenta las conversiones. Es una de esas raras ocasiones en las que lo que es bueno para el algoritmo también es bueno para tus usuarios y tu negocio.
Nuestro consejo final: no te agobies intentando arreglarlo todo de golpe.
Empieza por medir tus métricas actuales, identifica los problemas más graves y abórdalos uno por uno. Con el tiempo, verás cómo tu sitio web mejora y tus usuarios (y Google) te lo agradecen.
No hay comentarios on Entendiendo las Core Web Vitals