Visualising Front-End Performance Bottlenecks

Explore techniques for measuring, analyzing, and fixing slow-running JavaScript code using browser APIs in this 17-minute conference talk from React Summit 2020. Discover the importance of measuring performance metrics that matter to users, especially on living room devices like Smart TVs. Learn about the Measure Analysis Cycle, profiling the main thread, and understanding the anatomy of a frame. Gain insights into custom hooks for instrumentation, virtualization techniques, lazy loading, and handling TV browser constraints. Implement practical strategies to visualize and address front-end performance bottlenecks, ensuring a smoother user experience across various devices.

Introduction
Who am I
The Zone
Living Room Devices
Smart TVs
Performance problems
What customers prefer
Useful quotes
Agenda
Measure Analysis Cycle
Demo
Profile
Main Thread
Anatomy of a Frame
How We Measure
Why Measure
Mark
Interaction
Instrumentation Code
Custom Hook
Copy Paste
Reload Demo
Baseline
Element
Virtualization
Lazy Loading
Horizontal Example
TV Constraints
Browsers
No developer tools