Why Is My LiveView Slow and What Can I Do About It
summary
An internal QA deploy UI built on LiveView becomes slow once the dataset grows: the backend keeps sending big diffs while the front-end JS cannot update the DOM fast enough. Use Chrome DevTools (Network websocket messages, Performance tab, Task Manager) to prove it: websocket messages include entire list (1,000 items → ~35,000 byte payloads), front-end work grows and falls behind, and a demo at speedy.fly.dev shows reconnections; switching to live components reduce payload to a third and adding paginate or show fewer elements fixes the lag; heartbeat defaults to 30,000 ms and debounce/aggregation also help.
AI-written summary · about
chapters (16)
- 0:00LiveView performance problem
- 1:47Root cause of slowness
- 3:55LiveView as JavaScript app
- 5:00Live demo setup
- 9:42Chrome DevTools debugging
- 12:10Live components for updates
- 14:41Paginating large lists
- 18:15CPU analysis with Task Manager
- 20:23Heartbeat interval tuning
- 24:24Call stack analysis
- 27:34Debugging techniques summary
- 30:07Real-time page debouncing
- 32:14Heartbeat configuration
- 33:56GenServer broadcasting
- 35:00LiveView future
- 36:54Q&A on lazy rendering
related talks
40mThe Power & Performance of Phoenix LiveView
29mClient Says Your Awesome Web App Works Slowly. Now What?
49mEffortless Performance Debugging
50mOptimizing Performance of Web Apps: Removing Bottlenecks for a Better Experience
01h 03mSpeed up your Web Application
01h 01mWhen the interface lags
17mVisualising Front-End Performance Bottlenecks
01h 23mWhy Slow?