Delivering 60 FPS in the browser - Crash course on web performance (Fluent 2013)

Slides: www.igvita.com/slides/2013/flu...
From the ground up introduction to the field of web performance optimization: network bottlenecks, the document parsing and evaluation pipeline, visual layout, javascript, and more. We'll investigate each in order and then pull it all together through case studies and hands-on examples.

[@pumbo_nv]

Still relevant in 2021.

[@pumbo_nv]

though the dev tools have changed significantly

[@georgeb8637]

23:42 - annotate
26:45 repaint on cpu and upload to GPU
29:00 - css animation on the GPU (vs in JavaScript the screen would have to be repainted every time) since GPU stores each card in a layer that can be later accessed
44:15 - JavaScript needs to be blocked, in case it does rewrite the page
7:33 - 5 frames per second 😢
9:38 - offset css experiment
13:55 - rendering
16:24 - demo dev tools
19:00 - frames with costly effects
20:39 - identify expensive pixels

[@indoxperia]

great vids