PWAs are a newly emerging delivery format for web, desktop apps. The fact that they can be installed on a client device and behave like natively installed apps means that special care should be taken when designing and building these types of apps, above and beyond a typical browser-only web application. One of the most important (potential) differentiators in the user experience of a PWA app vs a traditional web app is the ability to provide a high-performance UI because of their ability to do things like cache resources offline, including entire pieces of Web UI code, and the use of background services. In this talk we are going to do an exhaustive overview of the entire landscape of building PWAs from a performance-first perspective.
Web development teams
Assumed Audience Knowledge
Web Development fundamentals
Large enterprise applications
Five Things Audience Members Will Learn
Why PWA’s require performance engineering
What tools are available to measure performance metrics
Offline caching strategies
Host device considerations: desktop and mobile
Taking advantage of background code: Service Workers
⚡ High Performance PWAs ⚡
FITC Spotlight: Web Performance
March 23rd 2019
Principal Consultant @ Aquent DEV6
Co-Lead @ Developer Circles Toronto
What about PWA performance?
If you’re not interested in making a PWA primarily for the
performance benefits…why are you interested in PWAs?!
• Traditional core UX differentiator for native vs. web
• Now you can’t blame the network/back-end
• App Shell Model: Content vs Presentation
Mobile to Desktop Progressiveness
• Most developers are familiar with UI design issues
• Less often considered: resource utilization
• Should you do real-time video processing on a low-spec mobile
• Should you consume that much network bandwidth?
• A special type of Web Worker
• Updating client-side cached data
• Push Notifications
Where do I start?
• Gecko Profiler
• Web Page Test! Shout-out to Patrick Meenan!
• Test My Site
• Response & Load Audits
First Contentful Paint
Time To Interactive
First Meaningful Paint
First CPU Idle
Estimated Input Latency
Respond to user input under 100ms
~50ms to process input
~50ms to render updates
ANIMATION & IDLE
• Avoid setTimeout or setInterval for visual updates; always use
• Use micro-tasks to make DOM changes over several frames.
• Scripts & Stylesheets
• Load relevant files per device
• Do you need all of them?
• Remove META data
• Use appropriate formats