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?!

4.
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

5.
!
!
!

6.
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?

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

8.
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

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

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

11.
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.

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

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