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

1. PRPL with &
Grgur Grisogono
@ggrgur
Modus Create
@moduscreate

2. Grgur
Grisogono
Software Architect
@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

6. 1kbJavaScript
1msParse Time

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

10. Strategy
Technology
PRPL:

11. Push
Render
Pre-cache
Lazy-load
critical resources
route
successor routes
routes on demand

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