PRPL Pattern with Webpack and React
•
10 likes•5,469 views
Optimizing web app delivery speed with PRPL pattern. Interactive demo with Webpack and React sample code. Project available with an incremental 7-step process for free on GitHub. Presentation from Split.JS Meetup. GitHub project: https://github.com/ModusCreateOrg/react-dynamic-route-loading-es6/tree/steps/6-no-helmet-scripttags
Report
Share
PRPL Pattern with Webpack and React
- 1. PRPL with & Grgur Grisogono @ggrgur Modus Create @moduscreate
- 3. Cras justo, dapibus ac facilisis in, egestas eget quam. ⚠ Problems 🌍 Mobile web is slow 📱 ⚛ Avg mobile device is low/mid end Computing moved to client side
- 4. 53% of visitors abandon sites if it takes more than 3 seconds to load Google DoubleClick
- 5. Mobify 100msdecrease in loading 1.11%conversion increase
- 7. Avg Content/Page 2010 113 kB 702 kB httparchive.org 2016 420 kB 2469 kB Year JS All
- 8. Download on 3G 4 seconds Cost of 420kB JS Parse time 400+ ms
- 9. CACHING 1 2 GOALS Minimum Time to Initial Impression Minimum Time to Interactive
- 12. Request App Shell Route Interactive Preload chunks Dependencies Routes Dependencies Possible successors (HTTP2 Push) Minimal architecture Pre-render Preload APIs Switch route Execute JS Cache PRPL Workflow
- 13. bit.ly/prpl-wpack Demo 🍿 Bundled SPA vs Chunks & Preloading
- 14. No add-ons🚫📶Regular 3G bandwidth throttling 5x CPU throttling 🐢 No caching💾 Testing Environment
- 15. 23.0KB 67.7KB App Core Size 34% of the original
- 16. 600.0ms 1,550.0ms Core DL Time 38% of the original
- 17. 256.0ms 870.0ms Scripting Time 29% of the original
- 18. 1,750ms 3,000ms Time to Interactive 58% of the original +14% conversion 💰
- 19. Branches: step-0 to step-6 Try yourself bit.ly/prpl-wpack
- 20. Reach out! 🙌 moduscreate.com @moduscreate Grgur Grisogono @ggrgur