“Performance by Design”

on YouTube ↗40m

" summary

Argues that design choices materially change load and interaction metrics and gives concrete numbers and tools: a DoubleClick figure of 19s average mobile load, a 50% user drop by ~3s, DevTools audits showing 73% unused code and ~600ms JS execution, plus WebPageTest and SpeedCurve for measurement. Recommends shrinking the critical rendering path: reduce CSS/JS requests, manage font loading to avoid FOUT/FOIT and subset weights, pick image formats (JPEG/WebP/SVG), use chroma subsampling 4:2:0, compress and size images to save memory and battery.

AI-written summary · about

" chapters (36)

1. 0:00Intro
2. 0:37B.I.G. DATA
3. 1:04BEYONCSS
4. 1:48CALIFORNIA.
5. 2:24NATHAN CURTIS.
6. 2:48RUNNING.
7. 3:103.1 MILES.
8. 4:196'14 PER MILE.
9. 5:07PERFORMANCE BY DESIGN.
10. 6:31DOMCONTENTLOADED.
11. 6:54FIRST PAINT.
12. 7:09FIRST CONTENTFUL PAINT.
13. 7:21FIRST MEANINGFUL PAINT.
14. 7:41TIME TO INTERACTIVE.
15. 8:14PERFORMANCE.
16. 8:36NOVEMBER 2016
17. 8:52MOBILE ACCESS DESKTOP.
18. 9:34DESIGN WI CONSTRAINTS.
19. 11:023 SECONDS.
20. 11:1519 SECONDS.
21. 12:09CRITICAL RENDERING PATH.
22. 12:38KEEP IT SIMPLE.
23. 13:32CSS, JAVASCRIPT.
24. 16:26FONTS.
25. 16:59"WEB FONTS GIVE US THE FREEDOM TO READ TEXT THROUGH THE EYES OF TYPE DESIGNERS." - ZACH LEATHERMAN.
26. 18:00FOIT.
27. 19:55IMAGES.
28. 20:31FORMATS.
29. 21:11OPTIMIZING, COMPRESSION.
30. 22:51CHROMA SUBSAMPLING.
31. 23:24THE PRACTICE OF ENCODING IMAGES BY IMPLEMENTING LESS RESOLUTION FOR CHROMA INFORMATION THAN FOR LUMA INFORMATION, TAKING ADVANTAGE OF THE HUMAN VISUAL SYSTEM'S LOWER ACUITY FOR COLOR DIFFERENCES THAN FOR LUMINANCE
32. 24:24YCBCR: 4:2:0
33. 25:39COLOR.
34. 25:52WIDE COLOR GAMUT.
35. 27:53MEMORY.
36. 30:04MORE BATTERY.

" related talks

• 29mWeb Performance KinetosisEduardo Bouças · Mirror Conf 2017
• 39mGiving you ways to increase, but also explain site performance, to your boss.Peter Hedenskog · ColdFront 2014
• 33mRedefining Web PerformanceTim Kadlec · DeltaV Conference 2018
• 48mThink Fast, First: Empowering a Performance CultureAlfredo Lopez · LibertyJS 2019
• 36mNobody cares about web performance. It's hard, expensive and unneededVitalii Ruban · VinnytsiaJS 2021
• 20mLeveraging the power of service design to boost web performanceAnthonia Carter · #PerfMatters Conference 2019
• 26mDesigning for speed and hacking users perceptionMustafa Kurtuldu · DevFest Ukraine 2018
• 49mEffortless Performance DebuggingAnna Migas · ffconf 2019