Rendimiento web: medición continua y optimizaciones prácticas

En el día a día de un front‑end, el rendimiento deja de ser un tema puntual y pasa a ser una disciplina continua. En este artículo vamos a ver cómo integrar la medición en tu flujo de trabajo y qué cambios concretos puedes aplicar para que tu web sea más rápida y ofrezca una mejor experiencia de usuario.

Métricas que realmente importan

Antes de lanzarte a optimizar, necesitas saber qué medir. No todas las métricas son iguales; algunas reflejan la velocidad percibida, otras la eficiencia del código. Las más útiles son:

• Largest Contentful Paint (LCP): tiempo hasta que se muestra el elemento principal.
• First Input Delay (FID): latencia entre la primera interacción y la respuesta del navegador.
• Cumulative Layout Shift (CLS): estabilidad visual durante la carga.
• Time to Interactive (TTI): momento en que la página está completamente operativa.

Estas tres métricas forman los Core Web Vitals que Google usa como factor de ranking. Si consigues valores por debajo de los umbrales recomendados (LCP < 2.5 s, FID < 100 ms, CLS < 0.1) ya estarás en buena posición.

Integrar la medición en tu CI

Medir sólo en tu máquina local no es suficiente; necesitas datos consistentes en cada commit. Herramientas como Lighthouse CI o PageSpeed Insights API permiten ejecutar auditorías automáticas en tu pipeline.

Un ejemplo sencillo de configuración con lighthouse-ci en un proyecto Node.js:

npm install -D @lhci/cli@0.12
lhci autorun \
  --collect.url=https://mi-sitio.dev \
  --collect.numberOfRuns=5 \
  --upload.target=temporary-public-storage

Este comando ejecuta cinco pruebas y sube los resultados a un endpoint temporal, donde puedes revisar los scores y compararlos con ejecuciones anteriores. Si el score de LCP cae por debajo de 0.9, tu CI puede fallar y obligarte a corregir antes de mergear.

Uso de la Performance API en producción

Para obtener datos reales de usuarios (RUM), la PerformanceObserver es tu aliada. Puedes enviar los valores a tu backend o a una herramienta de analítica.

<script>
  const sendMetric = (name, value) => {
    fetch('/metrics', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({name, value, url: location.href})
    });
  };

  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      if (entry.name === 'largest-contentful-paint') {
        sendMetric('LCP', entry.startTime);
      }
      if (entry.name === 'first-input') {
        sendMetric('FID', entry.processingStart - entry.startTime);
      }
    }
  });
  observer.observe({type: 'largest-contentful-paint', buffered: true});
  observer.observe({type: 'first-input', buffered: true});
</script>

Con estos datos en tiempo real puedes detectar patrones de degradación antes de que los usuarios los noten.

Estrategias de mejora que dan resultados

Una vez tienes los números, llega el momento de actuar. Aquí tienes algunas técnicas que suelen aportar mejoras significativas sin romper la arquitectura:

• Critical CSS: extrae los estilos necesarios para la primera pantalla y embébelo inline. Herramientas como critters o penthouse automatizan este proceso.
• Lazy‑load de imágenes y iframes: usa el atributo loading="lazy" o la API IntersectionObserver para cargar recursos sólo cuando entren en viewport.
• Dividir el JavaScript: con import() crea chunks que se descargan bajo demanda. Evita cargar librerías pesadas en la página inicial.
• Preconnect y DNS‑prefetch: indica al navegador que establezca conexiones anticipadas a dominios externos (CDN, APIs).
• Compresión y caché: sirve archivos con Brotli o gzip y configura encabezados Cache‑Control adecuados para recursos estáticos.

Recuerda que cada proyecto tiene sus cuellos de botella. Usa los resultados de Lighthouse o de la Performance API para priorizar la lista anterior: si LCP es el peor indicador, empieza por el Critical CSS y el lazy‑load de imágenes.

Checklist rápido antes del despliegue

• ¿Has ejecutado lhci autorun y los scores están por encima de 0.9?
• ¿Los Core Web Vitals medidos en producción están bajo los umbrales?
• ¿Los recursos estáticos están comprimidos y cacheados?
• ¿Has habilitado loading="lazy" o IntersectionObserver en imágenes pesadas?
• ¿Los bundles de JavaScript están divididos y no superan 200 KB sin comprimir?

Con este flujo de medición continua y un conjunto de mejoras probadas, tu sitio ganará velocidad y, lo que es más importante, puntuará mejor en los rankings de búsqueda y en la percepción de tus usuarios.