Cómo medir y mejorar el rendimiento de una web

El rendimiento web es uno de los factores más decisivos para la experiencia del usuario y para el SEO. En este artículo te explico, paso a paso, cómo medirlo de forma fiable y qué acciones puedes tomar para mejorarlo sin caer en micro‑optimizaciones innecesarias.

Medir el rendimiento

Antes de optimizar, necesitas datos reales. No basta con la sensación de que una página está lenta; hay que cuantificarlo. La API de Performance del navegador permite obtener métricas precisas directamente desde el código.

function logFCP() {
  new PerformanceObserver((entryList) => {
    const fcp = entryList.getEntries()[0];
    console.log('First Contentful Paint:', fcp.startTime);
  }).observe({type: 'paint', buffered: true});
}
logFCP();

En este fragmento se registra el First Contentful Paint (FCP), una métrica que indica cuándo el navegador dibuja por primera vez contenido significativo.

Herramientas del navegador

Los navegadores modernos incluyen paneles de Performance y Network que te permiten visualizar la línea de tiempo de carga, identificar cuellos de botella y analizar el tamaño de los recursos. En Chrome, abre la pestaña Performance, pulsa el botón de grabación y recarga la página; obtendrás una representación visual de cada fase del ciclo de vida.

Métricas clave

Largest Contentful Paint (LCP): tiempo hasta que se renderiza el elemento más grande visible en la ventana.
First Input Delay (FID): latencia entre la primera interacción del usuario y la respuesta del navegador.
Cumulative Layout Shift (CLS): medida de la estabilidad visual, detecta cambios inesperados del layout.

Google PageSpeed Insights y Lighthouse usan estas métricas para generar una puntuación que puedes comparar entre versiones.

Optimizar recursos críticos

Una vez identificados los recursos que retrasan la carga, actúa sobre ellos:

Minimiza y comprime CSS y JavaScript (Uglify, Terser, CSSNano).
Usa HTTP/2 o HTTP/3 para multiplexar peticiones y reducir la latencia.
Implementa rel="preload" y rel="prefetch" para indicar al navegador qué recursos son críticos y cuáles pueden cargarse de forma anticipada.

Ejemplo de preload de una fuente:

<link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin>

Lazy loading y código dividido

Los recursos que no son visibles al inicio deben cargarse bajo demanda. En React, por ejemplo, puedes usar React.lazy y Suspense para dividir el bundle:

const Dashboard = React.lazy(() => import('./Dashboard'));
function App() {
  return (
    <Suspense fallback=<div>Loading...</div>>
      <Dashboard />
    </Suspense>
  );
}

De esta forma, el código del dashboard solo se descarga cuando el usuario navega a esa ruta, reduciendo el time to interactive.

Pruebas de regresión de rendimiento

Una optimización que funciona hoy puede romperse mañana tras una actualización. Integra pruebas de rendimiento en tu CI usando webpagetest o lighthouse-ci. Un ejemplo sencillo con lighthouse-ci:

lighthouse-ci collect --url=https://mi-sitio.com --output=json --output-path=./lhr.json
lighthouse-ci assert --assertion=performance=>=90

Así, cualquier degradación mayor al umbral definido hará fallar el pipeline y te alertará a tiempo.

Conclusión

Medir el rendimiento con métricas reales, usar las herramientas del navegador y aplicar optimizaciones focalizadas (preload, lazy loading, división de código) son pasos concretos que cualquier desarrollador front‑end puede llevar a cabo. Recuerda validar los cambios con pruebas automáticas para mantener una experiencia rápida y estable a lo largo del tiempo.