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

Understanding the core principles of Progressive Web Apps
03:30 MIN

Understanding the core principles of Progressive Web Apps

PWA Fundamentals: websites with superpowers

What are Progressive Web Apps (PWAs)?
01:23 MIN

What are Progressive Web Apps (PWAs)?

Progressive Web Apps - The next big thing

How progressive web apps enhance the web platform
06:20 MIN

How progressive web apps enhance the web platform

Project Fugu: Extending the web

Using Progressive Web Apps for offline capabilities
05:33 MIN

Using Progressive Web Apps for offline capabilities

Challenges for omnichannel applications at ALDI: Data distribution and offline capabilities

Understanding the web's evolution into an app platform
12:30 MIN

Understanding the web's evolution into an app platform

Native Web Apps: Are We There Yet?

PWA fundamentals for installation and offline support
06:03 MIN

PWA fundamentals for installation and offline support

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

Focusing on the right metrics for SPA performance
02:49 MIN

Focusing on the right metrics for SPA performance

Lessons learned from building a thriving Vue.js SaaS application

Defining the three core features of progressive web apps
02:41 MIN

Defining the three core features of progressive web apps

PWAs in 2021

Featured Partners

Related Videos

See all videos
PWA Fundamentals: websites with superpowers
43:06

PWA Fundamentals: websites with superpowers

Rowdy Rabouw

Progressive Web Apps - The next big thing
40:01

Progressive Web Apps - The next big thing

Nico Martin

PWAs in 2021
41:49

PWAs in 2021

Ire Aderinokun

Catching up on the basics you don't really need that much code
14: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 PWA
44:22

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

Christian Liebel

Project Fugu: Progressive Web Apps, Superpowered
45:20

Project Fugu: Progressive Web Apps, Superpowered

Christian Liebel

Jamstack and Web Performance, a match made in heaven
42:04

Jamstack and Web Performance, a match made in heaven

Tamas Piros

The Lean Web
46:46

The Lean Web

Chris Ferdinandi

Related Articles

View all articles
Luis Minvielle
10 Developer Websites in 2023
As a web developer, you're always investigating how to level up your skills and streamline your workflow. That's why we've gathered a collection of 10 innovative tools that are guaranteed to boost your productivity, enhance your coding abilities, ele...
10 Developer Websites in 2023
Chris Heilmann
WWC24 Talk - Brenda Romero - Stay: Surviving and Thriving in Tech
Brenda Romero discusses her tech career journey, overcoming burnout, and inspiring future game developers at WWC24.Here is what she had to say in the video:Hey everyone! Thanks for joining us!Reflections on a Rough YearLast year, I gave a talk about ...
WWC24 Talk - Brenda Romero - Stay: Surviving and Thriving in Tech
Benedikt Bischof
Native Web Apps: Are We There Yet?
Welcome to this issue of the WeAreDevelopers Live Talk series. This article recaps an interesting talk by Maxim Salnikov who spoke about the development of native web apps. What you will learn:Some pros and cons of web applicationsThe most important ...
Native Web Apps: Are We There Yet?

From learning to earning

Jobs that call for the skills explored in this talk.

Frontend-Entwickler

Frontend-Entwickler

infomax websolutions GmbH
Grassau, Germany

Intermediate
Senior
CSS
HTML
JavaScript
TypeScript