पाठ 28 / 29

Performance Optimization

Code splitting, compression और lazy loading के साथ PWA performance को optimize करें।

Performance Metrics

Core Web Vitals पर focus करें: LCP (Largest Contentful Paint), FID (First Input Delay), CLS (Cumulative Layout Shift)। 3-second से कम load times achieve करने के लिए 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 करते हैं।

Timeline जो LCP, FID और CLS metrics और user experience पर उनके impact को दिखाता है। — चित्र 9.1 — Core Web Vitals और user experience impact।

Monitoring and Measuring Performance

Real user performance को track करने के लिए Web Vitals API और analytics का उपयोग करें।