Laura Morinigo
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
04:37 MIN
What are Progressive Web Apps (PWAs)?
Progressive Web Apps - The next big thing
10:04 MIN
How progressive web apps enhance the web platform
Project Fugu: Extending the web
03:47 MIN
Understanding the web's evolution into an app platform
Native Web Apps: Are We There Yet?
19:46 MIN
PWA fundamentals for installation and offline support
Making of paint.js.org—a Web Component-based Productivity PWA
00:33 MIN
Defining the three core features of progressive web apps
PWAs in 2021
35:03 MIN
Q&A on performance, architecture, and PWA capabilities
Interactive server side components
15:01 MIN
Building reliable and fast offline-first experiences
PWAs in 2021
39:57 MIN
Summary and real-world examples of advanced PWAs
Making of paint.js.org—a Web Component-based Productivity PWA
Featured Partners
Related Videos
43:06PWA Fundamentals: websites with superpowers
Rowdy Rabouw
40:01Progressive Web Apps - The next big thing
Nico Martin
41:49PWAs in 2021
Ire Aderinokun
14:44Catching up on the basics you don't really need that much code
Chris Heilmann
44:22Making of paint.js.org—a Web Component-based Productivity PWA
Christian Liebel
45:20Project Fugu: Progressive Web Apps, Superpowered
Christian Liebel
46:46The Lean Web
Chris Ferdinandi
42:04Jamstack and Web Performance, a match made in heaven
Tamas Piros
From learning to earning
Jobs that call for the skills explored in this talk.
Desarrollador/a Web Interactivo (Next.js / Supabase / PWA / API)
SIGGO
Barcelona, Spain
API
React
Next.js
PostgreSQL
Senior Front-End Developer (ReactJS) - WPP OPEN
WPP
Charing Cross, United Kingdom
€54K
Senior
CSS
GIT
Gulp
REST
+13
Quels sont les grands accélérateurs permettant de donner une place plus importante à l'UX Design au sein des entreprises ?
Wavestone
Canton of Nanterre-1, France
Junior
Frontend Web Developer
Pictarine
Canton de Castanet-Tolosan, France
Intermediate
React
Next.js
TypeScript
Google Cloud Platform