Performance Optimizations for Progressive Web Apps
Struggling to get your website to load in less than 5 seconds on a mobile phone? Switching pages are a little sluggish? You’re not alone! Most web developers can build a responsive site, but fail to meet performance requirements for mobile. Using the latest PRPL pattern and Progressive Web API’s, you can provide a compelling alternative to native apps, as long as performance remains your top feature.
This talk will cover the architecture for Xfinity xFi, an enterprise PWA for Comcast, built with Web Components. We’ll then dive into the Chrome performance tools to optimize xFi loading time down by more than half. You’ll walk away knowing what it takes to create a successful PWA and how to find slow downs in your app startup.
Outline
- Intro + Sites developed
- Why Performance Matters
- Past Desktop Era
- Current Mobile Era
- The need for Speed
- PWA Intro + Goals
- PWA vs Native
- PWA Features
- Service Workers Overview
- Performance Optimizations
- Measuring Performance
- Javascript Startup Performance
- Why Frameworks slow down app startup
- Future of Frameworks with Web Components
- Architecture of Xfinity xFi site
- Understanding the PRPL Pattern
- Understanding Critical Path for App Startup
- Code Splitting
- Performance Testing + Optimizations for xFi
About Christopher Lorenzo
Chris has worked at Comcast since 2007 – currently as a Distinguished Engineer. He enjoys building/motivating teams and ramping up new projects including Xfinity Home and Xfinity xFi using the latest patterns and web primitives. Outside of Comcast I am a Google Developer Expert in Web Technologies and I love hiking and chilling on the beach.
More About Chris »
About John Riviello
John Riviello created his first hypertext document on the Internet in 1996 and has been obsessed with building for the web ever since. He spends his days as Engineering Fellow and Lead Frontend Developer at Comcast, where he works on the Xfinity customer websites and web applications. He is a Google Developer Expert in Web Technologies and
the author of the LinkedIn Learning course “CSS to Sass: Converting an Existing Site.” In his free time, he prefers surfing waves over surfing the Internet.