Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

ryanseddon

June 19, 2015
Tweet

More Decks by ryanseddon

Other Decks in Programming

Transcript

  1. PERFORMANCE BEYOND THE PAGE LOAD
    Ryan Seddon

    View full-size slide

  2. @RYANSEDDON
    Team Lead @ Zendesk

    View full-size slide

  3. WORLDS LONGEST FLIGHT FROM MELBOURNE
    fact

    View full-size slide

  4. PAGE LOAD
    DRILLED INTO US

    View full-size slide

  5. SLOW SITES LOSE PEOPLE1
    1 Webperformancetoday.com

    View full-size slide

  6. PAGE LOAD SPEED
    still super
    !IMPORTANT

    View full-size slide

  7. ONLY THE BEGINNING
    of the journey

    View full-size slide

  8. BEST PRACTICE
    HTTP/2 MAKES OBSOLETE

    View full-size slide

  9. STORY FOR ANOTHER TALK

    View full-size slide

  10. UI PERFORMANCE

    View full-size slide

  11. aerotwist.com

    View full-size slide

  12. httparchive.org

    View full-size slide

  13. BROWSER RENDERING PIPELINE
    has 4 stages

    View full-size slide

  14. 1. STYLE RECALCULATION

    View full-size slide

  15. 2. LAYOUT/REFLOW

    View full-size slide

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

    View full-size slide

  17. 3. PAINT/RASTERIZE PAINT

    View full-size slide

  18. 4. COMPOSITE

    View full-size slide

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

    View full-size slide

  20. ALWAYS BE COMPOSITING

    View full-size slide

  21. TRANSFORM & OPACITY
    csstriggers.com

    View full-size slide

  22. 60FPS / 16.6MS
    REQUESTANIMATIONFRAME()

    View full-size slide

  23. NON TRIVIAL DEMO

    View full-size slide

  24. REMEMBER THIS?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. 60FPS IS A TARGET

    View full-size slide

  30. REAL WORLD EXAMPLE

    View full-size slide

  31. HOUDINI TASK FORCE

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  34. PERFORMANCE IS HARD

    View full-size slide