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

Once you go PRPL - FullStackFest

Houssein Djirdeh
September 07, 2017
46
0

Once you go PRPL - FullStackFest

Houssein Djirdeh

September 07, 2017

Transcript

65 slides

  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

More Decks by Houssein Djirdeh

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

Featured

See All Featured
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
1.4k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
2
1.7k
The #1 spot is gone: here's how to win anyway
tamaranovitovic
4
1.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
53
4k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
Navigating Team Friction
lara
192
16k
Practical Orchestrator
shlominoach
192
12k
Evolving SEO for Evolving Search Engines
ryanjones
0
360
My Coaching Mixtape
mlcsv
0
390
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
1
610
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
2
2.1k