Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

High Performance PWAs

145 views

Published on

Hasan Ahmad
Aquent DEV6

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

Target Audience
Web development teams

Assumed Audience Knowledge
Web Development fundamentals

Objective
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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

High Performance PWAs

  1. 1. ⚡ High Performance PWAs ⚡ FITC Spotlight: Web Performance March 23rd 2019 Hasan Ahmad Principal Consultant @ Aquent DEV6 Co-Lead @ Developer Circles Toronto
  2. 2. About Me https://dev6.com https://www.facebook.com/groups/ DeveloperCirclesToronto/ Twitter: @has_ibr_ahm
  3. 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. 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. 5. ! ! !
  6. 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. 7. Service Workers • A special type of Web Worker • Updating client-side cached data • Push Notifications
  8. 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. 9. First Contentful Paint Time To Interactive First Meaningful Paint First CPU Idle Estimated Input Latency
  10. 10. RESPONSE Respond to user input under 100ms ~50ms to process input ~50ms to render updates
  11. 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. 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. 13. Thanks! https://dev6.com https://www.facebook.com/groups/DeveloperCirclesToronto/ http://devctorontohackathon2019.splashthat.com/ https://twitter.com/has_ibr_ahm

×