Successfully reported this slideshow.

PRPL Pattern with Webpack and React

10

Share

Upcoming SlideShare
The PRPL Pattern
The PRPL Pattern
Loading in …3
×
1 of 20
1 of 20

PRPL Pattern with Webpack and React

10

Share

Download to read offline

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

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

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

PRPL Pattern with Webpack and React

  1. 1. PRPL with & Grgur Grisogono @ggrgur Modus Create @moduscreate
  2. 2. Grgur Grisogono Software Architect
 @moduscreate
  3. 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. 4. 53% of visitors abandon sites if it takes more than 3 seconds to load Google DoubleClick
  5. 5. Mobify 100msdecrease in loading 1.11%conversion increase
  6. 6. 1kbJavaScript 1msParse Time
  7. 7. Avg Content/Page 2010 113 kB 702 kB httparchive.org 2016 420 kB 2469 kB Year JS All
  8. 8. Download on 3G 4 seconds Cost of 420kB JS Parse time 400+ ms
  9. 9. CACHING 1 2 GOALS Minimum Time to Initial Impression Minimum Time to Interactive
  10. 10. Strategy Technology PRPL:
  11. 11. Push Render Pre-cache Lazy-load critical resources route successor routes routes on demand
  12. 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. 13. bit.ly/prpl-wpack Demo 🍿 Bundled SPA vs Chunks & Preloading
  14. 14. No add-ons🚫📶Regular 3G bandwidth throttling 5x CPU throttling 🐢 No caching💾 Testing Environment
  15. 15. 23.0KB 67.7KB App Core Size 34% of the original
  16. 16. 600.0ms 1,550.0ms Core DL Time 38% of the original
  17. 17. 256.0ms 870.0ms Scripting Time 29% of the original
  18. 18. 1,750ms 3,000ms Time to Interactive 58% of the original +14% conversion 💰
  19. 19. Branches: step-0 to step-6 Try yourself bit.ly/prpl-wpack
  20. 20. Reach out! 🙌 moduscreate.com @moduscreate Grgur Grisogono @ggrgur

×