Is your Progressive Web App Lazy? How to read and improve your PWA Performance

One developer took a PWA's Lighthouse score from a dismal 16 to over 90. Here's the step-by-step guide on how they did it.

#1about 1 minute

Understanding the core principles of PWAs

A Progressive Web App is an advanced web application that must be responsive, fast, and provide an offline experience.

#2about 1 minute

The three mandatory requirements for building a PWA

To build a PWA, you must serve your site over HTTPS, include a manifest file for a native-like appearance, and use a service worker for offline capabilities.

#3about 3 minutes

How to measure PWA performance with key tools

Use tools like Lighthouse, PageSpeed Insights, and WebPageTest.org to measure key metrics such as CLS, First Paint, and Time to Interactive.

#4about 2 minutes

Diagnosing a real-world PWA performance problem

A case study of a PWA built for the UN reveals a shockingly low performance score of 16, highlighting the need for systematic optimization.

#5about 3 minutes

How to fix Cumulative Layout Shift for visual stability

Prevent visual instability and improve your CLS score by always defining the width and height attributes on images and using placeholders for dynamic content.

#6about 4 minutes

Optimizing CSS to improve Time to Interactive

Improve your Time to Interactive score by removing unused CSS rules using the Chrome DevTools Coverage tab and minifying your stylesheets.

#7about 3 minutes

Using a splash screen to improve perceived performance

Configure a splash screen via the manifest file to provide immediate visual feedback on mobile, improving the user's perception of loading speed.

#8about 4 minutes

Implementing service workers for offline fallbacks

Use a service worker to gain control over caching, create an offline fallback page, and provide fallback images when external resources fail to load.

#9about 4 minutes

Reviewing the final results after PWA optimizations

A summary of the applied fixes, including CLS, CSS optimization, and service workers, shows a dramatic improvement in the final Lighthouse performance score.