1. The "Offline-first" breakpoint

2. JS

3. 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

4. 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

5. Lots of Luck…

6. W00t w00t
Webkit prefix

7. 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

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

9. You need more
happiness on your web !

10. PLAY WHILE DOWNLOADING !!
HOLY FUCKING SHIT !!

14. “Performance Matters”

15. Firefox Download Page

19. But .. Isn’t this a web app ?

21. Kurir test

24. Step 1
Markup the content

25. Step 1
Markup the content

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

28. Step 2
Unblock your scripts

29. Step 2
Unblock your scripts

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

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

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

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

34. Step 5
Render with lvl 1’s CSS

35. Step 5
Render with lvl 1’s CSS

36. Optimizing for a full cache
Step 6
Optimizing for a full cache

37. 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

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

41. LIE-FI

42. OFFLINE

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

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

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

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

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

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

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

50. That’s IT