Performance beyond the page load

We talk about http performance all the time in front-end land. But we rarely touch on performance after the page load has complete.

In this talk we'll step through how to measure performance, how to diagnose performance issues. What these weird terms like paint, reflow, style recalculation, composite and how they relate to CSS. We'll even talk about what that 60fps number everyone keeps banging on about and how it relates to building websites.

Slides from CSSConf 2015 in New York

Transcript

1. PERFORMANCE BEYOND THE PAGE LOAD Ryan Seddon
2. @RYANSEDDON Team Lead @ Zendesk
3. WORLDS LONGEST FLIGHT FROM MELBOURNE fact
4. PAGE LOAD DRILLED INTO US
5. SLOW SITES LOSE PEOPLE1 1 Webperformancetoday.com
6. PAGE LOAD SPEED still super !IMPORTANT
8. ONLY THE BEGINNING of the journey
9. HTTP/2
10. BEST PRACTICE HTTP/2 MAKES OBSOLETE
11. STORY FOR ANOTHER TALK
12. UI PERFORMANCE
13. aerotwist.com
14. httparchive.org
15. BROWSER RENDERING PIPELINE has 4 stages
16. 1. STYLE RECALCULATION
17. 2. LAYOUT/REFLOW
18. Reflow is the process by which the geometry of the layout engine's formatting objects are computed — Chris Waterson
20. 3. PAINT/RASTERIZE PAINT
21. 4. COMPOSITE
22. PHEW THAT WAS A LOT TO TAKE IN let's look at simple demo
23. ALWAYS BE COMPOSITING
24. TRANSFORM & OPACITY csstriggers.com
25. 60FPS / 16.6MS REQUESTANIMATIONFRAME()
26. NON TRIVIAL DEMO
27. REMEMBER THIS?
28. CONTAINMENT It was isolated why does it affect the page?
29. Demo
30. CONTAINMENT SPEC A proposal to give authors control of what can be isolated
31. .modal { // Don't trigger costly layouts, // style recalcs for other elements // isolate this subtree contain: strict; ... }
32. ...BUT On a static page this is fine
33. 60FPS IS A TARGET
34. REAL WORLD EXAMPLE
35. HOUDINI TASK FORCE
36. ...develop features that explain the “magic” of Styling and Layout on the web
37. ▸ Specifying the box model ▸ Improving the CSSOM ▸ Explaining CSS & Layout
38. PERFORMANCE IS HARD
39. THANKS