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
   

   View Slide

2. @RYANSEDDON
   Team Lead @ Zendesk
   

   View Slide

3. WORLDS LONGEST FLIGHT FROM MELBOURNE
   fact
   

   View Slide

4. PAGE LOAD
   DRILLED INTO US
   

   View Slide

5. SLOW SITES LOSE PEOPLE1
   1 Webperformancetoday.com
   

   View Slide

6. PAGE LOAD SPEED
   still super
   !IMPORTANT
   

   View Slide

7. View Slide

8. ONLY THE BEGINNING
   of the journey
   

   View Slide

9. HTTP/2
   

   View Slide

10. BEST PRACTICE
    HTTP/2 MAKES OBSOLETE
    

    View Slide

11. STORY FOR ANOTHER TALK
    

    View Slide

12. UI PERFORMANCE
    

    View Slide

13. aerotwist.com
    

    View Slide

14. httparchive.org
    

    View Slide

15. BROWSER RENDERING PIPELINE
    has 4 stages
    

    View Slide

16. 1. STYLE RECALCULATION
    

    View Slide

17. 2. LAYOUT/REFLOW
    

    View Slide

18. Reflow is the process by which the
    geometry of the layout engine's
    formatting objects are computed
    — Chris Waterson
    

    View Slide

19. View Slide

20. 3. PAINT/RASTERIZE PAINT
    

    View Slide

21. 4. COMPOSITE
    

    View Slide

22. PHEW THAT WAS A LOT TO TAKE IN
    let's look at simple demo
    

    View Slide

23. ALWAYS BE COMPOSITING
    

    View Slide

24. TRANSFORM & OPACITY
    csstriggers.com
    

    View Slide

25. 60FPS / 16.6MS
    REQUESTANIMATIONFRAME()
    

    View Slide

26. NON TRIVIAL DEMO
    

    View Slide

27. REMEMBER THIS?
    

    View Slide

28. CONTAINMENT
    It was isolated why does it
    affect the page?
    

    View Slide

29. Demo
    

    View Slide

30. CONTAINMENT SPEC
    A proposal to give authors
    control of what can be
    isolated
    

    View Slide

31. .modal {
    // Don't trigger costly layouts,
    // style recalcs for other elements
    // isolate this subtree
    contain: strict;
    ...
    }
    

    View Slide

32. ...BUT
    On a static page this is
    fine
    

    View Slide

33. 60FPS IS A TARGET
    

    View Slide

34. REAL WORLD EXAMPLE
    

    View Slide

35. HOUDINI TASK FORCE
    

    View Slide

36. ...develop features that explain the
    “magic” of Styling and Layout on the
    web
    

    View Slide

37. ▸ Specifying the box model
    ▸ Improving the CSSOM
    ▸ Explaining CSS & Layout
    

    View Slide

38. PERFORMANCE IS HARD
    

    View Slide

39. THANKS
    

    View Slide