# Performance Optimization — Progressive Web Apps

Source: https://www.geekswithgeeks.com/hi/pwa/pwa-performance

> 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 का उपयोग करें।

```javascript
// 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 को दिखाता है।](assets/figures/pwa/core-web-vitals.svg) — चित्र 9.1 — Core Web Vitals और user experience impact।

## Monitoring and Measuring Performance

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