Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Once you go PRPL - FullStackFest

Avatar for Houssein Djirdeh Houssein Djirdeh
September 07, 2017
46
0

Once you go PRPL - FullStackFest

Avatar for Houssein Djirdeh

Houssein Djirdeh

September 07, 2017

More Decks by Houssein Djirdeh

See All by Houssein Djirdeh
Performance Empathy
Avatar for Houssein Djirdeh housseindjirdeh
0
220
The Art of Lazy Loading
Avatar for Houssein Djirdeh housseindjirdeh
0
580
GitPoint - Lunch and Learn
Avatar for Houssein Djirdeh housseindjirdeh
0
140
Progressive Web Apps - fullStackTO/FITC Web Unleashed
Avatar for Houssein Djirdeh housseindjirdeh
0
230
Once you go PRPL: SeattleJS
Avatar for Houssein Djirdeh housseindjirdeh
0
200

Featured

See All Featured
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
270
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
142
7.7k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
520
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
1k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.7k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
340
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
590
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
840
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.7k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.8k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
230
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.5k

Transcript

  1. XKCD/Installing

  2. Once you go PRPL… @hdjirdeh

  3. PUSH critical resources RENDER initial route PRE-CACHE resources LAZY LOAD

    remaining routes P R L P
  4. None
  5. None
  6. None
  7. None

  8. CSS

  9. JS

  10. PNG

  11. <link rel="preload" as="script" href="script.js"> <link rel="preload" as="script" href="script.js"> <html lang="en">

    <head> <link rel="stylesheet" href="styles.css"> </head> <body> <!--(>'-')> <('-'<)--> <script src="script.js"></script> </body> </html>

  12. JS JS

  13. <link rel="preload" as="script" href="script.js"> as="script" <link rel="preload" as="style" href="styles.css"> as="style"

    as="font" as="audio" as="image" as="video"

  14. <link rel="prefetch">

  15. preload-webpack-plugin <link rel="preload" href="chunk.cf7bd8260d685f704bd0.js" as="script"> <link rel="prefetch" href="chunk.cf7bd8260d685f704bd0.js">

  16. CAN I HAZ? Partial Support

  17. HTTP/2 Server Push

  18. None
  19. None

  20. Link: </app/style.css>; rel=preload; as=style Link: </app/script.js>; rel=preload; as=script

  21. None

  22. Link: </app/style.css>; rel=preload; as=style; nopush Link: </app/script.js>; rel=preload; as=script

  23. A Comprehensive Guide To HTTP/2 Server Push - Jeremy Wagner

    https://rebrand.ly/http2

  24. Pushing too much

  25. Pushing unused assets

  26. Cache?

  27. PUSH critical resources

  28. None

  29. Service workers

  30. A service worker is a script that runs in the

    background of your browser when you view a webpage.

  31. ADDING A SERVICE WORKER 1. Create the file and write

    the logic yourself 2. Use a library
  32. None

  33. npm install workbox-cli --global workbox-cli generate:sw

  34. None

  35. <script> if ('serviceWorker' in navigator) { window.addEventListener('load', function () {

    navigator.serviceWorker.register('/service-worker.js').then(function(){ // Registration was successful console.log('ServiceWorker registration successful!'); }).catch(function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); }); } </script> if ('serviceWorker' in navigator) { window.addEventListener('load', function () { navigator.serviceWorker.register('/service-worker.js') <script> if ('serviceWorker' in navigator) { window.addEventListener('load', function () { navigator.serviceWorker.register('/service-worker.js').then(function(){ // Registration was successful console.log('ServiceWorker registration successful!'); }).catch(function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); }); } </script> <script> if ('serviceWorker' in navigator) { window.addEventListener('load', function () { navigator.serviceWorker.register('/service-worker.js').then(function(){ // Registration was successful console.log('ServiceWorker registration successful!'); }).catch(function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); }); } </script>
  36. None

  37. APPLICATION SHELL

  38. APPLICATION SHELL CONTENT

  39. module.exports = { globDirectory: 'dist/', globPatterns: ['**/*.{js,png,svg,html,json}'], swDest: 'dist/service-worker.js', navigateFallback:

    '/index.html' }; module.exports = { globDirectory: 'dist/', globPatterns: ['**/*.{js,png,svg,html,json}'], swDest: 'dist/service-worker.js', navigateFallback: '/index.html', }; module.exports = { globDirectory: 'dist/', globPatterns: ['**/*.{js,png,svg,html,json}'], swDest: 'dist/service-worker.js', navigateFallback: '/index.html' }; globDirectory: 'dist/' globPatterns: ['**/*.{js,png,svg,html,json}'] swDest: 'dist/service-worker.js' navigateFallback: '/index.html'

  40. npm install workbox-cli --save-dev // package.json "scripts": { //... "build":

    "{build} && workbox-cli generate:sw" }

  41. workbox-webpack-plugin

  42. DYNAMIC CONTENT

  43. module.exports = { globDirectory: 'dist/', globPatterns: ['**/*.{js,png,svg,html,json}'], swDest: 'dist/service-worker.js', navigateFallback:

    '/index.html', runtimeCaching: [ { urlPattern: /^https:\/\/your.api.com\/.*/, handler: 'networkFirst' } ] }; runtimeCaching: [ { urlPattern: /^https:\/\/your.api.com\/.*/, handler: 'networkFirst' } ] module.exports = { globDirectory: 'dist/', globPatterns: ['**/*.{js,png,svg,html,json}'], swDest: 'dist/service-worker.js', navigateFallback: '/index.html', runtimeCaching: [ { urlPattern: /^https:\/\/your.api.com\/.*/, handler: 'networkFirst' } ] }; networkFirst cacheFirst fastest cacheOnly networkOnly runtimeCaching: [ { urlPattern: /^https:\/\/your.api.com\/.*/, handler: 'networkFirst' } ]

  44. runtimeCaching: [ { urlPattern: /^https:\/\/your.api.com\/.*/, handler: 'networkFirst' } ] module.exports

    = { globDirectory: 'dist/', globPatterns: ['**/*.{js,png,svg,html,json}'], swDest: 'dist/service-worker.js', navigateFallback: '/index.html', runtimeCaching: [ { urlPattern: /^https:\/\/your.api.com\/.*/, handler: 'networkFirst' } ] }; runtimeCaching: [ { urlPattern: /^https:\/\/your.api.com\/.*/, handler: 'networkFirst' } ] networkFirst

  45. networkFirst

  46. networkFirst cacheFirst fastest cacheOnly networkOnly

  47. APP SHELL + DYNAMIC CACHING

  48. OFFLINE SUPPORT + FASTER REPEAT VISITS

  49. CAN I HAZ? Under development

  50. Service Worker H2 Push

  51. PRE-CACHE resources

  52. BUNDLES

  53. 4KB - 200KB Size of JS frameworks, gzipped Restuta/framework-sizes.md GIST

  54. CODE SPLITTING

  55. export const routes: Routes = [ { path: '', redirectTo:

    'main', pathMatch: 'full' }, { path: 'main', component: MainComponent }, { path: 'details', loadChildren: 'details/details.module#DetailsModule' } ]; export const routes: Routes = [ { path: '', redirectTo: 'main', pathMatch: 'full' }, { path: 'main', component: MainComponent }, { path: 'details', loadChildren: 'details/details.module#DetailsModule' } ]; loadChildren: 'details/details.module#DetailsModule'

  56. export const routes: Routes = [ { path: '', redirectTo:

    'main', pathMatch: 'full' }, { path: 'main', component: MainComponent }, { path: 'details', loadChildren: 'details/details.module#DetailsModule' } ]; loadChildren: 'details/details.module#DetailsModule'

  57. import Loadable from 'react-loadable'; import Loading from './loading.component'; const LoadableComponent

    = Loadable({ loader: () => import('./details.component'), loading: Loading, });
  58. None

  59. WEBPACK BUNDLE ANALYZER

  60. bundlesize

  61. LAZY LOAD remaining routes

  62. PRPL PUSH critical resources RENDER initial route PRE-CACHE resources LAZY

    LOAD remaining routes

  63. TIME TO INTERACTIVE FIRST PAINT

  64. None

  65. @hdjirdeh