PRPL Pattern with Webpack and React

PRPL with &

Grgur Grisogono @ggrgur

Modus Create @moduscreate

Grgur Grisogono

Software Architect@moduscreate

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

53% of visitors abandon sites if it

takes more than 3 seconds to load

Google DoubleClick

Mobify

100msdecrease in loading

1.11%conversion increase

1kbJavaScript

1msParse Time

Avg Content/Page

2010

113 kB 702 kB

httparchive.org

2016

420 kB 2469 kB

Year

JS All

Download on 3G 4 seconds

Cost of 420kB JS

Parse time 400+ ms

CACHING

1

2

GOALSMinimum Time to Initial Impression

Minimum Time to Interactive

Strategy Technology

PRPL:

Push

Render

Pre-cache

Lazy-load

critical resources

route

successor routes

routes on demand

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

bit.ly/prpl-wpack

Demo🍿Bundled SPA

vs Chunks & Preloading

No add-ons🚫📶Regular 3Gbandwidth throttling

5x CPU throttling 🐢 No caching💾

Testing Environment

23.0KB

67.7KB

App Core Size34% of the original

600.0ms

1,550.0ms

Core DL Time38% of the original

256.0ms

870.0ms

Scripting Time29% of the original

1,750ms

3,000ms

Time to Interactive58% of the original

+14% conversion 💰

Branches: step-0 to step-6

Try yourselfbit.ly/prpl-wpack

Reach out! 🙌

moduscreate.com @moduscreate

Grgur Grisogono @ggrgur