Performance beyond the page load

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

8677c9f7c0f6d947bf318c1430d00bfd?s=128

ryanseddon

June 19, 2015
Tweet

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

  7. None
  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
  19. None
  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