O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
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 e...
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
GOALS
Minimum
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)
Minim...
bit.ly/prpl-wpack
Demo
🍿
Bundled SPA
vs
Chunks & Preloading
No add-ons🚫📶Regular 3G
bandwidth throttling
5x CPU
throttling
🐢 No caching💾
Testing Environment
23.0KB
67.7KB
App Core Size
34% of the original
600.0ms
1,550.0ms
Core DL Time
38% of the original
256.0ms
870.0ms
Scripting Time
29% of the original
1,750ms
3,000ms
Time to Interactive
58% of the original
+14% conversion 💰
Branches:
step-0 to step-6
Try yourself
bit.ly/prpl-wpack
Reach out! 🙌
moduscreate.com
@moduscreate
Grgur Grisogono
@ggrgur
Próximos SlideShares
Carregando em…5
×

PRPL Pattern with Webpack and React

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

  • Entre para ver os comentários

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

×