Laura Morinigo

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.

Is your Progressive Web App Lazy? How to read and improve your PWA Performance
#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.

Related jobs
Jobs that call for the skills explored in this talk.

Matching moments

The value of progressive enhancement and semantic HTML
03:31 MIN

The value of progressive enhancement and semantic HTML

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Improving the developer feedback loop with specialized tools
03:16 MIN

Improving the developer feedback loop with specialized tools

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

Why you might not need JavaScript for everything
02:33 MIN

Why you might not need JavaScript for everything

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

How a broken frontend culture impacts the web
04:02 MIN

How a broken frontend culture impacts the web

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Navigating the growing complexity of modern CSS
09:00 MIN

Navigating the growing complexity of modern CSS

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Exploring modern JavaScript performance and new CSS features
08:07 MIN

Exploring modern JavaScript performance and new CSS features

WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More

Making accessibility tooling actionable and encouraging
03:58 MIN

Making accessibility tooling actionable and encouraging

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

The origin story of the Polypane developer browser
05:28 MIN

The origin story of the Polypane developer browser

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

Featured Partners

Related Videos

See all videos
PWA Fundamentals: websites with superpowers43:06

PWA Fundamentals: websites with superpowers

Rowdy Rabouw

PWAs in 202141:49

PWAs in 2021

Ire Aderinokun

Progressive Web Apps - The next big thing40:01

Progressive Web Apps - The next big thing

Nico Martin

Catching up on the basics you don't really need that much code14:44

Catching up on the basics you don't really need that much code

Chris Heilmann

Making of paint.js.org—a Web Component-based Productivity PWA44:22

Making of paint.js.org—a Web Component-based Productivity PWA

Christian Liebel

Core Web Vitals: Put your application into orbit with best practices19:52

Core Web Vitals: Put your application into orbit with best practices

Nicolas Frizzarin

Next.js Unleashed: Optimizing Web Vitals for superior User Experience26:44

Next.js Unleashed: Optimizing Web Vitals for superior User Experience

Eileen Fürstenau

Project Fugu: Progressive Web Apps, Superpowered45:20

Project Fugu: Progressive Web Apps, Superpowered

Christian Liebel

Related Articles

View all articles
S
SciChart
The Fastest JavaScript Charts - Built for React and Beyond
For most developers, browser charting works fine — until it doesn’t. Once you push beyond tens of thousands of points, add live streaming, or need advanced interactions, the story changes: frame drops, frozen dashboards, memory issues. That’s where S...
The Fastest JavaScript Charts - Built for React and Beyond
CH
Chris Heilmann
Dev Digest 151: SEO in an AI world, security fixes and Doomed PDFs
Inside last week’s Dev Digest 151 . 🔎 How ChatGPT compares to search and what that means for SEO ✂️ Job cuts across the board as companies curb DEI programs 🟨 @Microsoft releases 161 Windows security updates ⚠️ @Google’s OAuth bug endangers million...
Dev Digest 151: SEO in an AI world, security fixes and Doomed PDFs

From learning to earning

Jobs that call for the skills explored in this talk.