Link to slides - docs.google.com/presentation/d/1COVwZyc9VZdezI05xCUh-kP8qRtvR-VXKR33siZ49hU Session Overview Modern web applications are JavaScript heavy. JavaScript ecosystem is such that you get a lot of tools, libraries, and the framework for free. The cost of using a framework could be very high. During this talk, I will take the audience through the Jabong PWA implementation using preact. I will talk about how we applied the domain-driven design approach to make some important architecture decisions upfront to choose our technology stack e.g preact, preact-router, in-house state management container (similar to redux). I will also talk about performance optimizations techniques we have used to achieve a perfect Lighthouse Score “100”. WPT report is available here webpagetest.org/lighthouse.php?test=190527_5T_a65fb33950a68ca88897b4ea3ceb66a5 This talk will cover how we have reduced the JavaScript footprint drastically using preact and related libraries. Also, we will talk about the code-splitting in the preact app that allowed us to render a fully interactive page with just 18kb of JavaScript less than react size. These are some of the latest web and browser technologies we have implemented. ZERO render-blocking requests Intersection Observer Lazy load images using Intersection Observer Replace onScroll with Intersection Observer Preload critical requests Hybrid rendering RequestAnimationFrame for visual changes Passive Listeners Precache future routes with serviceworker Route-based & Component-based Code Splitting HTTP/2 - Server push and multiplexing Preconnect third-party domains (only the important once, not all) Maximize GPU usage Using the latest image formats for different browsers Progressive jpeg and WebP Network API & DPR-based Image delivery Web Font optimization