$30 off During Our Annual Pro Sale. View Details »

Building Performance for the Long Term

Building Performance for the Long Term

Performance matters to your users. And the importance of performance doesn't dim over time - if anything, users expect better performance this year than they experienced last year. Performance is important for the long-term. While your company's aims and structure may change, its commitment to performance should not.

This talk provides strategies that build performance culture from the long term. From starting a performance culture at your company to educating and empowering teams to understand and own their products' performance, this talk presents tools and strategies that you can use to make performance last at your company.

Smashing Conference London, 2018

Allison McKnight

February 09, 2018
Tweet

More Decks by Allison McKnight

Other Decks in Programming

Transcript

  1. KSPRATTART.ETSY.COM
    Building Performance
    FOR THE LONG TERM
    ALLISON MCKNIGHT
    @aemcknig
    Smashing Conference
    London 2018

    View Slide

  2. FREEFOLDING.ETSY.COM

    View Slide

  3. “We build for the long term.”

    View Slide

  4. Without a performance culture,
    performance is not sustainable.

    View Slide

  5. PIEINTHESKYCRAFTS.ETSY.COM

    View Slide

  6. Getting buy-in
    Understanding performance
    Empowering teams
    To infinity and beyond
    AGENDA
    SORADESIGNS.ETSY.COM

    View Slide

  7. LINMREGEL.ETSY.COM

    View Slide

  8. LIXXIEBERRY.ETSY.COM

    View Slide

  9. Getting buy-in for performance

    View Slide

  10. SCANDIPRINTSTUDIO.ETSY.COM
    GETTING BUY-IN
    • Performance work isn’t given priority
    • At your company
    • On your team

    View Slide

  11. Time, resources, and support
    necessary for performance work
    GETTING BUY-IN FROM

    YOUR BOSS

    View Slide

  12. Makes performance work
    sustainable by involving creators
    GETTING BUY-IN FROM

    YOUR COWORKERS

    View Slide

  13. SEWCADENCE.ETSY.COM
    Which business metrics are
    most important for your company?

    View Slide

  14. Link performance to
    business metrics

    View Slide

  15. 160 KB
    added images
    12%
    increase in

    bounce rate
    MOLLYMCSHABBY.ETSY.COM

    View Slide

  16. MOUNTAINMOLEHILL.ETSY.COM

    View Slide

  17. www.wpostats.com

    View Slide

  18. www.wpostats.com

    View Slide

  19. performance
    business

    View Slide

  20. But those sites were slow.
    Our site isn’t slow!
    Very Important Person,
    Your Company

    View Slide

  21. SALOMIJOUBERT.ETSY.COM

    View Slide

  22. But those sites were slow.
    Our site isn’t slow!
    Very Important Person,
    Your Company

    View Slide

  23. Show, don’t tell

    View Slide

  24. View Slide

  25. View Slide

  26. Be accountable to your users

    View Slide

  27. Site Performance Report

    View Slide


  28. Site Performance Report

    View Slide

  29. “Load time is important, the quicker, the better!”
    “Looks like great improvements to me! Can’t wait to
    see how other features are going to be optimized!
    Thanks for working so hard engineering team!”
    “Cool! Keep up the good work.”
    Comments

    View Slide

  30. Understanding performance

    View Slide

  31. SCANDIPRINTSTUDIO.ETSY.COM
    UNDERSTANDING PERFORMANCE
    • You don’t know how fast (or slow) your users’
    experiences are
    • You don’t know why your users’ experiences are fast
    (or slow)

    View Slide

  32. JEANLUCBEGHINPRINTS.ETSY.COM

    View Slide

  33. ❤ Metrics ❤
    • How is my site’s performance?
    • How is my site’s performance changing?
    • Where are performance issues coming from?

    View Slide

  34. Metrics
    • How is my site’s performance?
    • How is my site’s performance changing?
    • Where are performance issues coming from?



    View Slide

  35. Synthetic
    Real User
    Monitoring (RUM)

    View Slide

  36. Synthetic
    • Artificial page loads
    • Controlled, consistent environment
    XRAYANN.ETSY.COM
    “Why does my site

    perform this way?”

    View Slide

  37. XRAYANN.ETSY.COM
    Real User
    Monitoring (RUM)
    • Timing from real users
    • Represents your user base
    “How is my site performing
    for my real users?”

    View Slide

  38. DEFINITELY BOTH
    DEFINITELY BOTH
    DEFINITELY BOTH

    View Slide

  39. Empower teams

    View Slide

  40. SCANDIPRINTSTUDIO.ETSY.COM
    • Your organization understands the value of
    performance
    • You have built infrastructure that helps you understand
    your site’s performance
    EMPOWERING TEAMS

    View Slide

  41. Integrate performance into

    product workflows

    View Slide

  42. ❤ Graphs ❤

    View Slide

  43. 43

    View Slide

  44. 44

    View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  49. NAUSICAADISTRIBUTION.ETSY.COM

    View Slide

  50. Always be

    A/B testing!
    NAUSICAADISTRIBUTION.ETSY.COM

    View Slide

  51. ADRAGONFLYSVINTAGE.ETSY.COM
    ?

    View Slide

  52. 50%

    View Slide

  53. 100%
    50%

    View Slide

  54. Always be

    integrating!
    NAUSICAADISTRIBUTION.ETSY.COM

    View Slide

  55. Sonic
    Search experience performance improvements
    2
    Make the market page more shiny
    Pages impacted A/B test
    Negatively impacting
    1 page

    View Slide

  56. Sonic
    Make the homepage more shiny
    market
    variant
    control

    View Slide

  57. Help teams understand why
    performance is changing

    View Slide

  58. Synthetic
    XRAYANN.ETSY.COM
    “Why does my site

    perform this way?”

    View Slide

  59. View Slide

  60. View Slide

  61. Teach tools and practices

    View Slide

  62. Performance Budgets
    Metric How to measure Target
    Total page load time RUM, 95th percentile 2 seconds
    Speed Index WebPagetest (Dulles, Cable) 1,200
    Total page weight - web WebPagetest (signed in) 2000 KB
    Total page weight - mobile WebPagetest (signed in) 1000 KB

    View Slide

  63. Performance Budgets
    Metric How to measure Target
    Total page load time RUM, 95th percentile 2 seconds
    Speed Index WebPagetest (Dulles, Cable) 1,200
    Total page weight - web WebPagetest (signed in) 2000 KB
    Total page weight - mobile WebPagetest (signed in) 1000 KB
    Current performance

    Understanding of performance/
    business metric link

    View Slide

  64. Performance Budgets
    Metric How to measure Target
    Total page load time RUM, 95th percentile 2 seconds
    Speed Index WebPagetest (Dulles, Cable) 1,200
    Total page weight - web WebPagetest (signed in) 2000 KB
    Total page weight - mobile WebPagetest (signed in) 1000 KB
    Be specific!

    View Slide

  65. Performance Budgets
    • Make optimizations to the new feature to get within budget
    • Optimize or remove an existing feature to make space
    • Don’t include the new feature
    this is okay

    View Slide

  66. Make informed decisions

    about tradeoffs
    PERFORMANCE BUDGETS

    View Slide

  67. To infinity and beyond

    View Slide

  68. Expand

    View Slide

  69. You don’t have to start
    measuring everything all at once
    TO INFINITY AND BEYOND

    View Slide

  70. Iterate

    View Slide

  71. Maintain expertise

    View Slide

  72. Celebrate performance

    View Slide

  73. View Slide

  74. CREATE A CULTURE THAT
    values performance
    AND empowers teams

    View Slide

  75. THANK YOU!

    View Slide