# Performance optimization — Progressive Web Apps

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

> Optimize PWA performance with code splitting, compression, and lazy loading.

## Performance metrics

Focus on Core Web Vitals: LCP (Largest Contentful Paint), FID (First Input Delay), CLS (Cumulative Layout Shift). Use compression, code splitting, and lazy loading to achieve sub-3-second load times.

## Lazy load and compress

Use dynamic imports and Gzip compression for faster loads.

```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 how Core Web Vitals affect user experience.

![Timeline showing LCP, FID, and CLS metrics and their impact on user experience.](assets/figures/pwa/core-web-vitals.svg) — Figure 9.1 — Core Web Vitals and user experience impact.

## Monitoring and measuring performance

Use Web Vitals API and analytics to track real user performance.