PWAs: the Application Shell & the well of surprises
When it comes to performance, we’ll usually take all the help we can get. The app shell model – an architecture for building PWAs – can make a huge difference… but better keep in mind it may hold a few surprises for you.
domContentLoaded navigationStart loadEventEnd time to first paint time to first paint time to interactive time to first byte frames per second page load time speed Index time to first ad first contentful paint first meaningful paint hero elements domainLookupStart
Request Page Start building DOM Build CSSOM Run JS wait Continue DOM block style / layout / paint / comp GET /page Network Rendering GET /style GET /js CSS JS HMTL
distance light in vacuum light in fiber RTT London 5,585km 19ms 28ms 56ms Sydney 15,993km 53ms 80ms 160ms Thess 7,695km 26ms 38ms 76ms - Browser Networking, Ilya Grigorik Getting a byte from New York
Client (London) Server (New York) 0 ms SYN 28 ms SYN ACK ACK 56 ms 140 ms ChangeCipherSpec Finished ClientHello 84 ms ClientKeyExchange ChangeCipherSpec Finished ServerHello Cert ServerHelloDone 112 ms 168 ms TCP TLS
Client (London) Server (New York) 0 ms SYN 28 ms SYN ACK ACK 56 ms Application 196 ms 140 ms ChangeCipherSpec Finished ClientHello 84 ms ClientKeyExchange ChangeCipherSpec Finished ServerHello Cert ServerHelloDone 112 ms 168 ms TCP TLS
Client (London) Server (New York) 0 ms SYN 28 ms SYN ACK ACK 56 ms Application 196 ms 140 ms ChangeCipherSpec Finished ClientHello 84 ms ClientKeyExchange ChangeCipherSpec Finished ServerHello Cert ServerHelloDone 112 ms 168 ms Application 224 ms TCP TLS
Client (London) Server (New York) 0 ms SYN 28 ms SYN ACK ACK 56 ms Application 196 ms 140 ms ChangeCipherSpec Finished ClientHello 84 ms ClientKeyExchange ChangeCipherSpec Finished ServerHello Cert ServerHelloDone 112 ms 168 ms Application 224 ms 11011010 TCP TLS
Request Page Start building DOM Build CSSOM Run JS wait Continue DOM block style / layout / paint / comp GET /page GET /style GET /js css js html with a critical path to improve…
What can service workers do? a few front end Devs That would only involve… It would be just cross cut change that would eliminate the network Cache stuff Even… cache the HTML document
What can service workers do? a few front end Devs That would only involve… It would be just cross cut change that would eliminate the network once and for all !! Cache stuff Even… cache the HTML document
Surprise #2 /index.html meet Opaque responses • Responses to requests made to a remote origin when CORS is not enabled • status == 0 • no access to headers
Surprise #2 /index.html meet Opaque responses • Responses to requests made to a remote origin when CORS is not enabled • status == 0 • no access to headers • no access to body
Surprise #2 /index.html meet Opaque responses • Responses to requests made to a remote origin when CORS is not enabled • status == 0 • no access to headers • no access to body • Using a CDN? => your assets on a remote origin
Detail #1 /index.html App has been updated. Click here to reload •Set ShellVersion in index.html •Add ShellVersion HTTP Header to all XHR requests •Bump it on every release/deploy based on watched files
Detail #1 /index.html App has been updated. Click here to reload •Set minimum supported version •Return client error HTTP status (e.g. 430) if below minimum
Detail #2 /index.html no big deal bug? ENV.SW_TYPE=“NOOP” self.addEventListener('install', function () { self.skipWaiting(); console.log('NOOP service worker installed'); }); self.addEventListener('activate', function (event) { event.waitUntil(clients.claim()); console.log('NOOP service worker activated'); });
Surprise #3 /index.html We removed SSR. To go beyond user perceived performance and ACTUALLY load faster, you need to approach the idea of… offline first
pavlakis
ohakutsu
takefumiyoshii
mackey0225
nano72mkn
eddie
uhooi
niftycorp
masatoshiitoh
nijieinfra
toricky6
kishida
pospome
bkeepers
lemiorhan
addyosmani
vanstee
afnizarnur
danielanewman
panda_program
thoeni
jmmastey
mongodb
keavy
jonyablonski