Performance Optimization

Performance Metrics

Core Web Vitals पर focus करें: LCP (Largest Contentful Paint), INP (Interaction to Next Paint) और CLS (Cumulative Layout Shift)। Load times कम रखने के लिए compression, code splitting और lazy loading उपयोग करें।

Lazy load और compress करें

Faster loads के लिए dynamic imports और Gzip compression का उपयोग करें।

// 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 करें कि कैसे Core Web Vitals user experience को affect करते हैं।