Performance optimization

Performance metrics

Focus on Core Web Vitals: LCP (Largest Contentful Paint), INP (Interaction to Next Paint) and CLS (Cumulative Layout Shift). Use compression, code splitting and lazy loading to keep load times low.

Lazy load and compress

Use dynamic imports and Gzip compression for faster loads.

// Code splitting with dynamic imports
const featureButton = document.getElementById('feature');
featureButton.addEventListener('click', async () => {
  // Only load when needed
  const { heavyFeature } = await import('./heavy-feature.js');
  heavyFeature();
});

// Monitor Core Web Vitals
web_vitals.getCLS(console.log);
web_vitals.getFID(console.log);
web_vitals.getLCP(console.log);

Output:

Code split and lazy loaded; Core Web Vitals monitored in production.

Performance timeline

Visualize how Core Web Vitals affect user experience.