Monitoreo de rendimiento

Monitoreo de rendimiento

No puedes optimizar lo que no mides. Usa métricas web, profiling y herramientas para detectar cuellos de botella.

Core Web Vitals

• LCP: Largest Contentful Paint
• CLS: Cumulative Layout Shift
• INP: Interaction to Next Paint

Performance API

// Measure page load
window.addEventListener('load', () => {
  const timing = performance.getEntriesByType('navigation')[0];
  console.log('TTFB:', timing.responseStart - timing.requestStart);
  console.log('DOM Load:', timing.domContentLoadedEventEnd - timing.fetchStart);
});

// Measure custom marks
performance.mark('start');
// ... code ...
performance.mark('end');
performance.measure('my-task', 'start', 'end');

const measures = performance.getEntriesByName('my-task');
console.log(measures[0].duration);

PerformanceObserver

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    console.log(entry.name, entry.duration);
  });
});

observer.observe({ entryTypes: ['longtask', 'layout-shift', 'paint'] });

Herramientas recomendadas

• Chrome DevTools Performance
• Lighthouse
• WebPageTest
• SpeedCurve / Calibre
• RUM (Real User Monitoring)