Outrun the 🐻! Performance Optimizations for Progressive Web Apps

By Chris Lorenzo

Elevator Pitch

Struggling to get your website to load in less than 5 seconds on a mobile phone? You’re not alone! At Comcast we’ve built many responsive sites and work hard at optimizing for performance. Using the latest PRPL pattern and Progressive Web API’s, we provide a compelling alternative to native apps.

Description

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 Google Polymer. 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.

Notes

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 PWA
  • Understanding the PRPL Pattern
  • Understanding Critical Path for App Startup
    • Code Splitting
    • CSS Optimization
  • Performance Testing + Optimizations for xFi