Coding Session: Stunning Performance

on YouTube ↗16m

" summary

Demonstrates using the browser Performance API and PerformanceObserver to capture long task events and custom performance marks/measures, sending entries to an analytics endpoint (console in the demo). Reproduces a 7s scripting spike via a recursive Fibonacci function that emerges when the page has 42 images, adds performance.mark/measure around the problematic “guide image,” ships telemetry, and shows an optimization that reduces the measured latency from 8,300 ms to 54 ms in modern browsers (IE unsupported).

AI-written summary · about

" chapters (9)

1. 0:00Performance monitoring
2. 1:05Real user data
3. 2:55JavaScript bottleneck
4. 4:25Long tasks API
5. 6:37PerformanceObserver
6. 8:45Custom marks
7. 10:16Tracking long tasks
8. 12:56Before vs after
9. 14:39Performance takeaways

" related talks

• 01h 02mWeb Performance Tuning with browser APIsYaser Adel Mehraban · NDC London 2021
• 28mMeasuring User centric performanceLeonardo Zizzamia · Codemotion Rome 2018
• 17mVisualising Front-End Performance BottlenecksRichie McColl · React Summit 2020
• 40mPerformance PatternsStoyan Stefanov · JSConf.eu 2010
• 30mPerformance Tuning SecretsPeter Flynn · JSConf US 2013
• 59mWeb performance APIs you (probably) didn't know existedMatheus Albuquerque · NDC Oslo 2022
• 20mReal metrics for front-end performanceBen Schwarz · CSSConf Oakland 2014
• 50mWeb Performance APIs You (probably) Didn't Know ExistedMatheus Albuquerque · Build Stuff 2022