XKCD/Installing 

Once you go PRPL… @hdjirdeh 

PUSH critical resources RENDER initial route PRE-CACHE resources LAZY LOAD remaining routes P R L P 

No content

No content

No content

No content

CSS 

JS 

PNG 



JS JS 

as="script" as="style" as="font" as="audio" as="image" as="video" 



preload-webpack-plugin 

CAN I HAZ? Partial Support 

HTTP/2 Server Push 

No content

No content

Link: ; rel=preload; as=style Link: ; rel=preload; as=script 

No content

Link: ; rel=preload; as=style; nopush Link: ; rel=preload; as=script 

A Comprehensive Guide To HTTP/2 Server Push - Jeremy Wagner https://rebrand.ly/http2 

Pushing too much 

Pushing unused assets 

Cache? 

PUSH critical resources 

No content

Service workers 

A service worker is a script that runs in the background of your browser when you view a webpage. 

ADDING A SERVICE WORKER 1. Create the file and write the logic yourself 2. Use a library 

No content

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

No content

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); }); }); } if ('serviceWorker' in navigator) { window.addEventListener('load', function () { navigator.serviceWorker.register('/service-worker.js') 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); }); }); } 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); }); }); } 

No content

APPLICATION SHELL 

APPLICATION SHELL CONTENT 

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' 

npm install workbox-cli --save-dev // package.json "scripts": { //... "build": "{build} && workbox-cli generate:sw" } 

workbox-webpack-plugin 

DYNAMIC CONTENT 

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' } ] 

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 

networkFirst 

networkFirst cacheFirst fastest cacheOnly networkOnly 

APP SHELL + DYNAMIC CACHING 

OFFLINE SUPPORT + FASTER REPEAT VISITS 

CAN I HAZ? Under development 

Service Worker H2 Push 

PRE-CACHE resources 

BUNDLES 

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

CODE SPLITTING 

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' 

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' 

import Loadable from 'react-loadable'; import Loading from './loading.component'; const LoadableComponent = Loadable({ loader: () => import('./details.component'), loading: Loading, }); 

No content

WEBPACK BUNDLE ANALYZER 

bundlesize 

LAZY LOAD remaining routes 

PRPL PUSH critical resources RENDER initial route PRE-CACHE resources LAZY LOAD remaining routes 

TIME TO INTERACTIVE FIRST PAINT 

No content

@hdjirdeh