Lesson 28 / 29

Performance optimization

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.

// 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.
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.