State of Speed Tools [This.JavaScript]

State of Speed Tools [This.JavaScript]

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

96270e4c3e5e9806cf7245475c00b275?s=128

Addy Osmani

March 06, 2019
Tweet

Transcript

  1. Speed Tools A short update from Chrome addyosmani@

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

    it away.
  3. The loading journey

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

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

  7. None
  8. Proprietary + Confidential Proprietary + Confidential “Our Lighthouse score is

    25!” Engineering Team
  9. 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 ”
  10. 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
  11. Proprietary + Confidential LightWallet

  12. Proprietary + Confidential lighthousebot for CI 12 Bundlesize

  13. None
  14. Proprietary + Confidential Proprietary + Confidential “We crossed the perf

    budget. ... Increase the budget!” We want to avoid this..
  15. Proprietary + Confidential

  16. None
  17. None
  18. None
  19. Confidential - Open questions - What can we do better?