Rendimiento web: qué medir y cómo mejorar la velocidad de carga

En pocas palabras: La velocidad de una web se mide con las Core Web Vitals de Google: LCP (carga del contenido principal), INP (respuesta a la interacción) y CLS (estabilidad visual). Las mejoras con más impacto suelen ser optimizar imágenes, reducir JavaScript, activar caché y compresión, y revisar el servidor.

Una web lenta frustra a las personas que la visitan y, además, es un factor que los buscadores tienen en cuenta. La buena noticia es que la mayoría de los problemas de velocidad se repiten y tienen solución conocida. Primero hay que medir; después, atacar lo que más pesa.

Las métricas que importan

Google agrupa la experiencia de carga en las llamadas Core Web Vitals. Tres ideas principales:

• LCP (Largest Contentful Paint): cuánto tarda en aparecer el elemento principal de la página, normalmente una imagen grande o un bloque de texto.
• INP (Interaction to Next Paint): cuánto tarda la página en responder cuando la persona hace clic o toca algo.
• CLS (Cumulative Layout Shift): cuánto «saltan» los elementos mientras carga la página, esa molestia de pulsar un botón justo cuando el contenido se mueve.

Puedes consultarlas gratis con PageSpeed Insights y con el informe de experiencia de página de Search Console. Mide siempre en móvil: es donde las conexiones y los procesadores son más limitados.

1. Imágenes: casi siempre el mayor margen de mejora

Las imágenes suelen ser la parte más pesada de una página. Sirve formatos modernos (WebP o AVIF), ajusta las dimensiones al tamaño real en que se muestran y usa carga diferida (loading="lazy") en las que quedan fuera de la primera pantalla. Indica siempre ancho y alto para evitar saltos de diseño.

2. JavaScript: menos es más

Cada script que se descarga, se analiza y se ejecuta consume tiempo del procesador. Revisa qué librerías cargas de verdad, elimina las que no usas y aplaza las no críticas. Los scripts de terceros (analítica, chats, publicidad) merecen atención especial porque no controlas su peso.

3. Caché y compresión

Configura cabeceras de caché para los archivos estáticos (hojas de estilo, scripts, fuentes, imágenes) y activa la compresión Gzip o Brotli en el servidor. Un archivo que el navegador ya tiene guardado no necesita descargarse otra vez.

4. Servidor y base de datos

Si el tiempo hasta el primer byte es alto, el problema está en el servidor: consultas lentas, falta de índices, ausencia de caché de aplicación o un alojamiento infradimensionado. Una red de distribución de contenidos (CDN) acerca los archivos estáticos a quien visita la web.

5. Fuentes y CSS

Limita el número de familias y pesos tipográficos, usa font-display: swap para que el texto sea visible mientras carga la fuente, y evita hojas de estilo enormes con reglas que la página no utiliza.

Cómo priorizar

No optimices a ciegas. Mide, identifica el cuello de botella principal, corrígelo y vuelve a medir. Con frecuencia, comprimir imágenes y retirar dos o tres scripts innecesarios produce más mejora que semanas de microoptimizaciones. Y recuerda que el rendimiento no es un proyecto puntual: cada nueva funcionalidad puede degradarlo si nadie lo vigila.

Preguntas frecuentes

¿Qué son las Core Web Vitals?

Son tres métricas que Google usa para medir la experiencia de carga real de una página: LCP mide cuánto tarda en mostrarse el contenido principal, INP cuánto tarda en responder a una interacción y CLS cuánto se mueven los elementos mientras carga.

¿Con qué herramienta mido la velocidad de mi web?

PageSpeed Insights es gratuita y muestra tanto datos de laboratorio como datos de visitantes reales cuando los hay. Search Console ofrece el informe de Core Web Vitals de todo el sitio. Mide siempre la versión móvil.

¿Qué mejora suele dar más resultado con menos esfuerzo?

Comprimir y redimensionar las imágenes, servirlas en formatos modernos como WebP o AVIF y retirar scripts de terceros que no se usan. Suele producir más mejora que muchas microoptimizaciones.

Fuentes y lecturas recomendadas

• Web Vitals: métricas esenciales para un sitio saludable — Google (web.dev).
• PageSpeed Insights — Google.
• Rendimiento web — MDN Web Docs (Mozilla).

¿Quieres aplicarlo en tu empresa? Conoce nuestro servicio de Desarrollo Web o cuéntanos tu caso.