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

State of Speed Tools [This.JavaScript]

State of Speed Tools [This.JavaScript]

A quick overview of updates from Chrome's speed tooling initiatives.

Addy Osmani

March 06, 2019
Tweet

More Decks by Addy Osmani

Other Decks in Programming

Transcript

  1. Speed Tools
    A short update from Chrome
    addyosmani@

    View full-size slide

  2. If JavaScript
    doesn’t bring
    users joy, thank it
    and throw it away.

    View full-size slide

  3. The loading journey

    View full-size slide

  4. “Get interactive before 1.3x the visually ready time”

    View full-size slide

  5. “Synthetic”
    “Real User
    Monitoring (RUM)”

    View full-size slide

  6. Proprietary + Confidential
    Proprietary + Confidential
    “Our
    Lighthouse
    score is 25!”
    Engineering Team

    View full-size slide

  7. Proprietary + Confidential
    Proprietary + Confidential
    Hold the line: Performance Budgets
    Budget:
    ● 80KB/chunk
    ● 200KB total
    Result:
    ● Reduced Time to
    Interactive by 2 seconds
    Impact:
    ● Bounce Rate: 14%
    ● Average Duration: 31%
    ● Pages/session: 25%
    By setting a budget for tracking,
    and reporting build size deltas,
    we've prevented accidental
    changes that would have
    increased metrics like TTI, TTFMC
    and Time to First Tweet by over
    100%.

    Paul Armstrong
    Web Developer,
    Twitter

    View full-size slide

  8. Proprietary + Confidential
    Proprietary + Confidential
    Agree on a budget; then stick to it
    Project Timelines
    Proposal Discovery Design Development Launch
    Where we think performance happens
    Where we think performance happens
    Where performance needs to happen
    Proposal Discovery Design Development Launch
    Where we think performance happens
    Maintain performance budget
    Proposal Discovery Design Development Launch
    1:
    2:
    3:
    Source: The Path to Performance by Katie Kovalcin

    View full-size slide

  9. Proprietary + Confidential
    LightWallet

    View full-size slide

  10. Proprietary + Confidential
    lighthousebot for CI
    12
    Bundlesize

    View full-size slide

  11. Proprietary + Confidential
    Proprietary + Confidential
    “We crossed the
    perf budget.
    ...
    Increase the
    budget!”
    We want to avoid this..

    View full-size slide

  12. Proprietary + Confidential

    View full-size slide

  13. Confidential
    - Open questions -
    What can we do better?

    View full-size slide