Cómo medir y mejorar el rendimiento de una web

El rendimiento de una web es uno de los factores más críticos para la retención de usuarios y el posicionamiento SEO. En este artículo repasaremos cómo medirlo de forma fiable y, lo más importante, qué acciones concretas puedes aplicar para hacerlo más rápido.

1. Métricas clave que debes monitorizar

Antes de lanzarte a optimizar, necesitas datos objetivos. Las métricas que más suelen usarse son:

• First Contentful Paint (FCP): momento en que el navegador dibuja el primer elemento de contenido.
• Largest Contentful Paint (LCP): indica cuándo se muestra el elemento más grande visible en la pantalla.
• Time to Interactive (TTI): tiempo que tarda la página en estar completamente interactiva.
• Cumulative Layout Shift (CLS): mide la estabilidad visual y los cambios inesperados de layout.

Estas cuatro métricas forman parte del Core Web Vitals de Google y son un buen punto de partida para cualquier auditoría.

2. Herramientas para obtener datos precisos

Existen varias opciones, tanto en línea como integradas en el navegador:

• Chrome DevTools – Performance: graba una sesión y muestra un desglose de tiempos de carga, scripting y pintura.
• Lighthouse: genera un informe automatizado con puntuaciones y recomendaciones.
• Web Vitals Extension: muestra los Core Web Vitals en tiempo real mientras navegas.
• PageSpeed Insights: combina datos de laboratorio y de campo (CrUX) para ofrecer una visión completa.

Mi consejo es combinar al menos una herramienta de laboratorio (Lighthouse) con datos reales de usuarios (PageSpeed Insights) para obtener una visión equilibrada.

3. Principios básicos de optimización

Una vez tienes los números, pasa a la fase de mejora. Aquí tienes una checklist que suele dar resultados rápidos:

• Reducir el tamaño de los recursos: comprime imágenes con formatos modernos (WebP, AVIF) y habilita gzip o brotli en el servidor.
• Eliminar código innecesario: usa herramientas como purgecss para eliminar estilos sin usar y tree‑shaking para módulos JS.
• Priorizar lo visible: carga primero los recursos críticos (CSS y JS) y difiere el resto con async o defer.
• Implementar lazy loading: retrasa la carga de imágenes y iframes fuera del viewport.
• Aprovechar la caché del navegador: define encabezados Cache‑Control adecuados para recursos estáticos.

Estas acciones suelen mejorar LCP y FCP de forma notable.

4. Ejemplo práctico: lazy loading con IntersectionObserver

A continuación tienes un fragmento de código que puedes añadir a cualquier proyecto para cargar imágenes sólo cuando estén a punto de entrar en la pantalla. Utiliza la API IntersectionObserver, que es nativa y muy eficiente.

document.addEventListener('DOMContentLoaded', function () {
  const imgs = document.querySelectorAll('img[data-src]');
  const options = {
    rootMargin: '0px 0px 200px 0px',
    threshold: 0
  };

  const onIntersection = (entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src; // asigna la URL real
        img.removeAttribute('data-src');
        observer.unobserve(img);
      }
    });
  };

  const observer = new IntersectionObserver(onIntersection, options);
  imgs.forEach(img => observer.observe(img));
});

Para usarlo, simplemente marca tus imágenes con el atributo data-src en vez de src y deja un src de bajo peso o un placeholder.

5. Medir el impacto de tus cambios

Una optimización no está completa sin validar el resultado. Repite las pruebas con las mismas herramientas y compara los valores de FCP, LCP y TTI antes y después. Si la mejora es marginal, revisa otras áreas como la carga de fuentes o la arquitectura del JavaScript (por ejemplo, dividir el bundle con code‑splitting).

6. Conclusión

Medir y mejorar el rendimiento web es un proceso iterativo: captura datos, identifica cuellos de botella, aplica mejoras y vuelve a medir. Con las métricas correctas, las herramientas adecuadas y unas cuantas buenas prácticas (compresión, lazy loading, caché), conseguirás una experiencia mucho más fluida para tus usuarios y, como bonus, un mejor posicionamiento en buscadores.