This document outlines 10 web performance lessons for the 21st century. The lessons are: 1) Measure first, optimize bottlenecks second 2) Measure what matters 3) Get a performance budget 4) Write JavaScript efficiently using mostly functions 5) Write code efficiently using mostly HTML 6) Consider static functional programming as JavaScript may not be enough 7) Observe how browsers work behind the scenes 8) Build fast organizations 9) Have courage in your minimalism 10) Sometimes keeping it simple with 9 lessons is enough. The document provides explanations and examples for each lesson along with relevant links to additional resources.
74. Web Performance: Leveraging the Metrics that Most Affect User Experience: https://www.youtube.com/watch?v=6Ljq-Jn-EgU&t=898s
First (Contentful) Paint
Custom Metric
Lighthouse metrics
This process we follow, this cycle we ride
75. The search is not over
Last Painted Hero = max(largest heading, largest image)
76. Lesson 2:
Measure
what
matters
How I learned to stop worrying and love UX metrics:
https://www.youtube.com/watch?v=lLR_nGA5t5g
WEB PERFORMANCE METRICS
109. Hyperapp
•Standalone React+Redux
•400 lines of code I can reason about
•Elm architecture, very few concepts to learn - fits in my head
•Matches my JS preferences - no this/new/classes
•Loads fast by default
110. Hyperapp
•Standalone React+Redux
•400 lines of code I can reason about
•Elm architecture, very few concepts to learn - fits in my head
•Matches my JS preferences - no this/new/classes
•Loads fast by default
111. Hyperapp
•Standalone React+Redux
•400 lines of code I can reason about
•Elm architecture, very few concepts to learn - fits in my head
•Matches my JS preferences - no this/new/classes
•Loads fast by default
112.
113. Hyperapp
•Standalone React+Redux
•400 lines of code I can reason about
•Inspired by Elm architecture, very few concepts to learn - fits in my head
•Matches my JS preferences - no this/new/classes
•Loads fast by default
114. Hyperapp
•Standalone React+Redux
•400 lines of code I can reason about
•Inspired by Elm architecture, very few concepts to learn - fits in my head
•Matches my JS preferences - no this/new/classes
•Loads fast by default
____ extends Component
@Component
115. Hyperapp
•Standalone React+Redux
•400 lines of code I can reason about
•Inspired by Elm architecture, very few concepts to learn - fits in my head
•Matches my JS preferences - no this/new/classes
•Loads fast by default
116. Hyperapp
•Standalone React+Redux
•400 lines of code I can reason about
•Inspired by Elm architecture, very few concepts to learn - fits in my head
•Matches my JS preferences - no this/new/classes
•Loads fast by default
163. Lesson 5:
Write code.
Not too much.
Mostly HTMLstream based partial async hydration
How to Survive the Single Page App-ocalypse: https://www.youtube.com/watch?v=1SRO-1HBE6E
222. Lesson 7: Observe the not so
secret life of your browser
Browser Rendering Optimization: https://eu.udacity.com/course/browser-rendering-optimization--ud860
BROWSER
223.
224. What I need my website to do?
1. Download and render most important elements of the page
225. What I need my website to do?
1. Download and render most important elements of the page
“You don't need all that other crap.
Have courage in your minimalism.”
http://idlewords.com/talks/website_obesity.htm
226. What I need my presentation to do?
1. Cover the most important elements of the talk
254. What should we teach children today to
prepare them for the world of tomorrow?
255. 1. Measure first, optimise bottleneck second
2. Measure what matters
3. Get yourself performance budget
4. Write JS. Not too much.
5. Write code. Not too much. Mostly HTML.
6. Embrace static FP. You may need more than JS.
7. Observe not so secret live of your browser
8. Bad system will beat good people every single time
9. Have courage in your minimalism
10.Sometimes 9 is enough
256. 1. Measure first, optimise bottleneck second
2. Measure what matters
3. Get yourself performance budget
4. Write JS. Not too much. Mostly functions.
5. Write code. Not too much. Mostly HTML.
6. Embrace static FP. You may need more than JS.
7. Observe not so secret live of your browser
8. Bad system will beat good people every single time
9. Have courage in your minimalism
10.Sometimes 9 is enough
257. 1. Measure first, optimise bottleneck second
2. Measure what matters
3. Get yourself performance budget
4. Write JS. Not too much. Mostly functions.
5. Write code. Not too much. Mostly HTML.
6. Embrace static FP. You may need more than JS.
7. Observe not so secret life of your browser
8. Bad system will beat good people every single time
9. Have courage in your minimalism
10.Sometimes 9 is enough
258. 1. Measure first, optimise bottleneck second
2. Measure what matters
3. Get yourself performance budget
4. Write JS. Not too much. Mostly functions.
5. Write code. Not too much. Mostly HTML.
6. Embrace static FP. You may need more than JS.
7. Observe not so secret life of your browser
8. Make or join faster organisation
9. Have courage in your minimalism
10.Sometimes 9 is enough
259. 1. Measure first, optimise bottleneck second
2. Measure what matters
3. Get yourself performance budget
4. Write JS. Not too much. Mostly functions.
5. Write code. Not too much. Mostly HTML.
6. Embrace static FP. You may need more than JS.
7. Observe not so secret life of your browser
8. Make or join faster organisation
9. Have courage in your minimalism
10.Sometimes 9 is enough
260. 1. Measure first, optimise bottleneck second
2. Measure what matters
3. Get yourself performance budget
4. Write JS. Not too much. Mostly functions.
5. Write code. Not too much. Mostly HTML.
6. Embrace static FP. You may need more than JS.
7. Observe not so secret life of your browser
8. Make or join faster organisation
9. Have courage in your minimalism
10. Sometimes 9 is enough