Upload
grgur-grisogono
View
370
Download
1
Embed Size (px)
Citation preview
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