The document discusses the importance of performance in Progressive Web Apps (PWAs), highlighting the shift in UX expectations for offline experiences and the use of app shell models. It provides practical tips for developers on resource utilization, service workers, and performance testing tools like Lighthouse and web page tests. Key optimization strategies include minimizing load times through efficient script management and using appropriate image formats.

1. ⚡ High Performance PWAs ⚡
FITC Spotlight: Web Performance
March 23rd 2019
Hasan Ahmad
Principal Consultant @ Aquent DEV6
Co-Lead @ Developer Circles Toronto

2. About Me
https://dev6.com
https://www.facebook.com/groups/
DeveloperCirclesToronto/
Twitter:
@has_ibr_ahm

3. What about PWA performance?
If you’re not interested in making a PWA primarily for the
performance benefits…why are you interested in PWAs?!

6. Offline Experiences
• Traditional core UX differentiator for native vs. web
• Now you can’t blame the network/back-end
• App Shell Model: Content vs Presentation
https://developers.google.com/web/fundamentals/architecture/
app-shell

8. !
!
!

12. Mobile to Desktop Progressiveness
• Most developers are familiar with UI design issues
(Responsive design)
• Less often considered: resource utilization
• Should you do real-time video processing on a low-spec mobile
device?
• Should you consume that much network bandwidth?

14. Service Workers
• A special type of Web Worker
• Updating client-side cached data
• Push Notifications

15. Where do I start?
• DevTools
• Gecko Profiler
• Web Page Test! Shout-out to Patrick Meenan!
• Test My Site
• RAIL
1. Response
2. Animation
3. Idle
4. Load
• Lighthouse
• Response & Load Audits

19. First Contentful Paint
Time To Interactive
First Meaningful Paint
First CPU Idle
Estimated Input Latency

20. RESPONSE
Respond to user input under 100ms
~50ms to process input
~50ms to render updates

21. ANIMATION & IDLE
• Mostly dealt with at a JavaScript level
https://developers.google.com/web/fundamentals/perfor
mance/rendering/optimize-javascript-execution
• Avoid setTimeout or setInterval for visual updates; always use
requestAnimationFrame instead.
• Move long-running JavaScript off the main thread to Web
Workers.
• Use micro-tasks to make DOM changes over several frames.

22. LOAD
• Scripts & Stylesheets
• Compression
• Load relevant files per device
• Images
• Do you need all of them?
• Remove META data
• Use appropriate formats
• Compression

23. Thanks!
https://dev6.com
https://www.facebook.com/groups/DeveloperCirclesToronto/
http://devctorontohackathon2019.splashthat.com/
https://twitter.com/has_ibr_ahm