> Markdown version of [/videos/453-is-your-progressive-web-app-lazy-how-to-read-and-improve-your-pwa-performance?t=92](https://www.wearedevelopers.com/videos/453-is-your-progressive-web-app-lazy-how-to-read-and-improve-your-pwa-performance?t=92). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

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

Is your PWA secretly lazy? Stop settling for basic responsiveness. Learn to eliminate layout shifts, strip bloated CSS, and master service workers for true offline resilience.

- **Speakers:** Laura Morinigo
- **Event:** World Congress 2022
- **Published:** June 15, 2022
- **Duration:** 29:57
- **URL:** https://www.wearedevelopers.com/videos/453-is-your-progressive-web-app-lazy-how-to-read-and-improve-your-pwa-performance

## Summary

Developing a high-performing Progressive Web App (PWA) requires moving beyond basic responsiveness to explicitly tackle rendering speeds and offline functionality. The optimization journey must always begin by establishing network baseline metrics using Lighthouse, PageSpeed Insights, and WebPageTest. A frequent performance pitfall is poor visual stability caused by unconstrained dynamic media loading on degraded connections. Developers can significantly eliminate Cumulative Layout Shift (CLS) by standardizing explicit width and height attributes or utilizing structural placeholders for images, preventing unexpected UI jumping.\n\nBeyond visual stability, streamlining the application runtime environment directly improves Time to Interactive (TTI) and First Paint perception. A practical workflow involves leveraging the Chrome DevTools Coverage tab to locate and eliminate unused CSS rules, thereby stripping away unnecessary external framework bloat. To further elevate perceived load speeds on mobile networks, developers should explicitly configure a native-style splash screen inside the PWA JSON manifest to maintain visual engagement while heavy assets process. Finally, utilizing service workers distinguishes a truly robust offline strategy; intelligently intercepting external fetch events to serve custom offline fallback pages and substituting broken third-party endpoint images guarantees a seamless experience against total connectivity loss.

**Keywords:** PWA performance optimization, lighthouse score diagnostics, cumulative layout shift (CLS), explicit image dimensions, time to interactive (TTI), eliminating unused CSS, chrome devtools coverage, service worker caching, PWA JSON manifest, offline fallback capabilities, first paint perception, visual UI stability, third-party API error handling, mobile web splash screens, workbox resource management

## Chapters

1. **Introduction to progressive web apps** (00:05) — An overview of why modern web applications need to be responsive, fast, and capable of working offline.
1. **Mandatory technical requirements for PWAs** (01:32) — The three essential components needed to upgrade a standard site into a progressive web application.
1. **Tools for measuring web app performance** (04:15) — Using standard benchmarking environments to identify performance bottlenecks and evaluate application load speeds.
1. **Understanding core Lighthouse performance metrics** (06:39) — How to interpret modern UI performance indicators to understand the actual user experience during initial loading.
1. **Fixing cumulative layout shift with images** (08:47) — Defining specific dimensions and utilizing placeholders for dynamic images prevents visual instability on slow connections.
1. **Optimizing CSS to improve interactivity times** (12:41) — Techniques for reducing render-blocking styles and hunting down unused CSS rules using browser developer tools.
1. **Enhancing perceived load time with splash screens** (16:57) — Configuring the application manifest file to display a splash screen bridges visual gaps for mobile users before complete interactive load.
1. **Implementing offline capabilities using service workers** (19:58) — Strategies for active asset caching, managing unpredictable endpoint failures, and serving customized offline fallback HTML pages.
1. **Reviewing optimization improvements in Lighthouse** (23:37) — A final demonstration showing how applying technical structural changes dramatically boosts overall application metrics for performance.
1. **Handling third-party variability and caching tools** (27:14) — Managing unpredictable dependencies with fallback content and migrating to standard libraries to streamline the development cycle.

## Related Moments

- [Questions on styling extensions and progressive web app potential](https://www.wearedevelopers.com/videos/766-from-zero-to-hero-nextjs-13-and-tailwind-css-for-beginners) (from "From Zero to Hero: NextJS 13 and Tailwind CSS for Beginners")
- [Defining progressive web apps and their core advantages](https://www.wearedevelopers.com/videos/45-progressive-web-apps-the-next-big-thing) (from "Progressive Web Apps - The next big thing")
- [Core capabilities of progressive web applications](https://www.wearedevelopers.com/videos/832-project-fugu-extending-the-web) (from "Project Fugu: Extending the web")
- [Evaluating progressive web apps for mobile deployment](https://www.wearedevelopers.com/videos/170-intro-to-flutter-development) (from "Intro to Flutter Development")
- [PWA adoption models and bridging native capabilities](https://www.wearedevelopers.com/videos/293-native-web-apps-are-we-there-yet) (from "Native Web Apps: Are We There Yet?")
- [Enabling offline capabilities and application installation via service workers](https://www.wearedevelopers.com/videos/438-making-of-paint-js-org-a-web-component-based-productivity-pwa) (from "Making of paint.js.org—a Web Component-based Productivity PWA")

## Related Articles

- [Native Web Apps: Are We There Yet?](https://www.wearedevelopers.com/magazine/83-native-web-apps-are-we-there-yet)
- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)
- [Dev Digest 139 - Soft and hard queries](https://www.wearedevelopers.com/magazine/487-dev-digest-139-soft-and-hard-queries)
- [Dev Digest 103 - Superb Owl Trafficking](https://www.wearedevelopers.com/magazine/388-dev-digest-103-superb-owl-trafficking)

## Related Jobs

- [Senior Software Engineer, React (Websites & Martech)](https://www.wearedevelopers.com/jobs/ext/1605272-senior-software-engineer-react-websites-martech) at **Bitpanda**
- [Senior Web Designer, Growth](https://www.wearedevelopers.com/jobs/ext/102722-senior-web-designer-growth) at **Intercom, Inc.**
- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1304673-software-engineer) at **Bitpanda**
- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1377585-software-engineer) at **Bitpanda**
- [Senior Software Engineer, React (Investing & Trading)](https://www.wearedevelopers.com/jobs/ext/1937625-senior-software-engineer-react-investing-trading) at **Bitpanda**