How we built Housing Go Chrome Dev Summit 2016

Transcript

1. How we built it !
2. Rahul Yadav Team Lead, Front-end, Housing.com @dxtr026
3. “Home buying is a one-time activity for majority of our users”
4. Challenges Low end phones
5. Old Website Monolithic Architecture Code Bloat Performance Suffered
6. Better Discovery
7. Cost 0 150 300 Native App Mobile Web INR 250 INR 5
8. Browser Support
9. 30% faster page load 10% longer average session 40% lower bounce rate 38% more conversions tinyurl.com/housingPWA Housing Go
10. Ritesh Kumar Front-end developer, Housing.com @ritz078
11. • Assets delivery • First [Meaningful] Paint • First JS enabled interaction • Returning user experience
12. Assets Delivery
13. Traditional website waterfall HTML CSS JS Render Starts Document Interactive
14. HTML Streaming
15. Partial HTML - 4.2 KB preconnect preload inline-css
16. Full HTML - 15 KB
17. Preload
18. First [Meaningful] Paint
19. First Paint First Meaningful Paint
20. Server Side Rendering
21. App Shell Model - First Load Nexus 5 - 3G (1.6 Mbps/768 Kbps 300 ms RTT) Loading Screen of Purgatory White screen of death Meaningful Content 2.2s 7s
22. SSR enabled White screen of death Meaningful Content Nexus 5 - 3G (1.6 Mbps/768 Kbps 300 ms RTT) 2.3s
23. Basic Meaningful content without JavaScript
24. Lazy Load & JS enabled interaction “Lesser the JS, faster the interaction time”
25. Code Splitting using
26. JS & CSS Sharding Hash: 3385819cba20c36c8271 Version: webpack 2.1.0-beta.25 Time: 26022ms Asset Size Chunks Chunk Names manifest.js.gz 1.4 kB 25 [emitted] manifest vendor.js.gz 64 kB 21, 25 [emitted] vendor app.js.gz 39.6 kB 22, 25 [emitted] app homeView.js.gz 11.5 kB 2, 25 [emitted] homeView searchView.js.gz 32.1 kB 1, 25 [emitted] searchView filterView.js.gz 14 kB 8, 25 [emitted] filterView notifyView.js.gz 9.21 kB 9, 25 [emitted] notifyView projectsDedicatedView.js.gz 30.5 kB 0, 25 [emitted] projectsDedicatedView resaleDedicatedView.js.gz 23.9 kB 5, 25 [emitted] resaleDedicatedView pushNotificationsView.js.gz 1.81 kB 17, 25 [emitted] pushNotificationsView offlineView.js.gz 1.81 kB 18, 25 [emitted] offlineView app.css.gz 1.37 kB 22, 25 [emitted] app lazyView.css.gz 3.79 kB 23, 25 [emitted] lazyView homeView.css.gz 2.54 kB 2, 25 [emitted] homeView searchView.css.gz 2.89 kB 1, 25 [emitted] searchView filterView.css.gz 1.5 kB 8, 25 [emitted] filterView notifyView.css.gz 1.16 kB 9, 25 [emitted] notifyView pushNotificationsView.css.gz 1.48 kB 17, 25 [emitted] pushNotificationsView resaleDedicatedView.css.gz 4.22 kB 5, 25 [emitted] resaleDedicatedView projectsDedicatedView.css.gz 6.82 kB 0, 25 [emitted] projectsDedicatedView offlineView.css.gz 368 bytes 18, 25 [emitted] offlineView
27. Route Based Chunks
28. <Route name="search" path="search" getComponent={(location, cb) => { require.ensure([], (require) => { require('views/searchView') requireStyle("searchView").then(() => { cb(null, require("views/searchView").default) loadView("detailsView") }) }, "searchView") }} />
29. Intent Based Chunks
30. notifyView.js loads once this is clicked 32 KB
31. First [Meaningful] Paint JS enabled interaction Nexus 5 - 3G (1.6 Mbps/768 Kbps 300 ms RTT) 2.3 s 4.2 s
32. Push Render Pre-cache Lazy-load
33. Returning Users
34. Pre-cache using Service Workers importScripts('sw-toolbox.js') // pre caching const resources = ['filterView.js','detailsView.js','searchView.js'] toolbox.precache(resources) // runtime caching toolbox.router.get('(.*).js', toolbox.cacheFirst, { origin: /.housingcdn.com/, mode: 'cors', cache: { name: 'js-assets', maxEntries: 20 } })
35. First Visit First meaningful paint : 712 ms JS enabled interaction : 1.1 s First meaningful paint : 2.2s JS enabled interaction : 4.2 s Repeated Visit Nexus 5 - 3G (1.6 Mbps/768 Kbps 300 ms RTT)
36. Add to Home Screen Push Notifications Better Conversions
37. Offline Navigation Active link. Navigation allowed in offline mode
38. Credential Management API
39. Maintenance
40. Continuous Integration
41. File sizes
42. Route based Statistics
43. Network Waterfall & TimeLine http://tinyurl.com/housingPWACi
44. Whats’s Next ?
45. React preact + preact-compat
46. PWA AMP http://tinyurl.com/housingAMP
47. Thank You! Rahul Yadav @dxtr026 Ritesh Kumar @ritz078 @housingengg @engineering-housing