The "Offline-first" breakpoint

JS

JS I Turned Off JavaScript for a Whole Week and It Was Glorious wired.com/2015/11/i-turned-off-javascript-for-a-whole-week-and-it-was-glorious

JS I Turned Off JavaScript for a Whole Week and It Was Glorious wired.com/2015/11/i-turned-off-javascript-for-a-whole-week-and-it-was-glorious

Lots of Luck…

W00t w00t Webkit prefix

My priorities in life: Turn off JS without any particular reason, Because I am a web hipster!! TTYL Turn off JS without any particular reason, Because I am a web hipster!! TTYL

Според w3 DO NOT RE-INVENT !!

You need more happiness on your web !

PLAY WHILE DOWNLOADING !! HOLY FUCKING SHIT !!

“Performance Matters”

Firefox Download Page

But .. Isn’t this a web app ?

Kurir test

Step 1 Markup the content

Step 1 Markup the content

https://blog.twitter.com/2012/improving-performance-on-twittercom

Step 2 Unblock your scripts

Step 2 Unblock your scripts

Lie to the user for perf. profit Step 3 Lie to the user for perf. profit

Requirement for first render Step 4 Don’t make web fonts a Requirement for first render

Requirement for first render Step 4 Don’t make web fonts a Requirement for first render https://github.com/filamentgroup/loadCSS

Requirement for first render Step 4 Don’t make web fonts a Requirement for first render

Step 5 Render with lvl 1’s CSS

Step 5 Render with lvl 1’s CSS

Optimizing for a full cache Step 6 Optimizing for a full cache

Optimizing for a full cache Step 6 Optimizing for a full cache What usually should happen: - Start with CSS & JS Load Render markup content CSS/JS loaded Execute CSS/JS But… - Start with CSS & JS Load - CSS/JS loaded Execute CSS/JS Render markup content

Optimizing for a full cache Step 6 Optimizing for a full cache Quickfix #hehe

LIE-FI

OFFLINE

Treat the network as an enhancement Step 7 Treat the network as an enhancement

Treat the network as an enhancement ( ‘d’ serviceworker) Step 7 Treat the network as an enhancement ( ‘d’ serviceworker)

Treat the network as an enhancement ( ‘d’ serviceworker) Step 7 Treat the network as an enhancement ( ‘d’ serviceworker) Page ServiceWorker Network Cache

Treat the network as an enhancement ( ‘d’ serviceworker) Step 7 Treat the network as an enhancement ( ‘d’ serviceworker) sw.js

Treat the network as an enhancement ( ‘d’ serviceworker) Step 7 Treat the network as an enhancement ( ‘d’ serviceworker) Page ServiceWorker Network Cache

Treat the network as an enhancement ( ‘d’ serviceworker) Step 7 Treat the network as an enhancement ( ‘d’ serviceworker) sw.js

Treat the network as an enhancement ( ‘d’ serviceworker) - fetch Step 7 Treat the network as an enhancement ( ‘d’ serviceworker) - fetch sw.js

That’s IT