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

How to Create Impact in a Changing Tech Landscape [PerfNow 2023]

Tammy Everts
November 03, 2023

How to Create Impact in a Changing Tech Landscape [PerfNow 2023]

In this talk at the 2023 performance.now() conference, I shared best practices to chase impact in our current landscape of smaller teams, aggressive goals, and an ever-growing tech stack. Topics include how to:

• Identify your critical rendering path
• Focus on the pages that matter
• Fix the low-hanging fruit
• Manage expectations
• Use performance budgets to fight regressions
• Quantify success – and brag about it!

Tammy Everts

November 03, 2023
Tweet

More Decks by Tammy Everts

Other Decks in Technology

Transcript

  1. How to Create Impact
    in a Changing Landscape
    @tameverts
    webperf.social/@tammy
    #PerfNow

    View full-size slide

  2. Work smarter,
    not harder.

    View full-size slide

  3. Work smarter,
    not harder.

    View full-size slide

  4. @tameverts
    webperf.social/@tammy

    View full-size slide

  5. TTFB DNS FCP FMP
    LCP CLS FID TBT
    TTI INP OMG WTF

    View full-size slide

  6. 77% of developers have assumed more responsibility
    for testing in the last year
    @tameverts

    View full-size slide

  7. Problems for the company
    Opportunities for the individual

    View full-size slide

  8. Run toward unsolved problems

    View full-size slide

  9. Am I looking at the right metrics?
    Are my optimizations working?
    Am I reporting effectively?
    Am I involving the right people at the right time?
    Am I motivating my team? Am *I* motivated?
    Am I proving business value? Does my company care?
    Define potential unsolved problems
    by asking yourself…

    View full-size slide

  10. Chasing impact
    is a healthy mental model
    for your career

    View full-size slide

  11. Chasing impact
    is a healthy mental model
    for your career
    Challenges your comfort zone

    View full-size slide

  12. Chasing impact
    is a healthy mental model
    for your career
    Challenges your comfort zone
    Treats your skills as a means to an end

    View full-size slide

  13. Don’t do the hard stuff until
    you’ve done the easy stuff.

    View full-size slide

  14. Don’t do the hard stuff until
    you’ve done the easy stuff.
    If you’re doing the hard stuff,
    make sure it actually makes
    a difference.

    View full-size slide

  15. common sense

    View full-size slide

  16. uncommon sense

    View full-size slide

  17. Focus on what matters

    View full-size slide

  18. *tangential book recommendation

    View full-size slide

  19. 56 resources
    13 blocking CSS
    4 blocking JS
    24 non-blocking JS
    12 images
    2 custom fonts
    1 HTML

    View full-size slide

  20. Optimizing the critical rendering
    path refers to prioritizing the
    display of content that relates to
    the current user action.
    Ilya Grigorik (2013)
    web.dev/articles/critical-rendering-path

    View full-size slide

  21. smashingmagazine.com/
    2023/10/speedcurve-fight-main-thread/
    The Fight for the Main Thread
    Geoff Graham

    View full-size slide

  22. Not all pages are equal
    (Some are more equal than others)

    View full-size slide

  23. 1. Product
    2. Category
    3. Home
    4. Cart
    5. Search
    @tameverts

    View full-size slide

  24. 1. Article
    2. Search
    3. Department
    4. Home
    5. About
    @tameverts

    View full-size slide

  25. Find the low-hanging fruit

    View full-size slide

  26. “The dull boring stuff”
    ~Andy Davies

    View full-size slide

  27. Scripts (especially third parties)

    View full-size slide

  28. Scripts (especially third parties)
    Images

    View full-size slide

  29. Scripts (especially third parties)
    Images
    Extraneous code

    View full-size slide

  30. Scripts (especially third parties)
    Images
    Extraneous code
    Undeferred resources

    View full-size slide

  31. Small changes
    can have a huge impact

    View full-size slide

  32. Shaved 15KB off logo
    Ran A/B test
    Increased bookings
    chasingwaterfalls.io/episodes/episode-one-with-malek-hakim/
    @tameverts

    View full-size slide

  33. 1. Compressed images
    2. Deferred image sprite
    that was blocking rendering
    3. Optimized CSS and JS
    on the critical rendering path
    @tameverts

    View full-size slide

  34. 2s improvement in median load time
    almost doubled mobile conversions
    @tameverts

    View full-size slide

  35. Manage expectations

    View full-size slide

  36. Manage expectations
    (including your own)

    View full-size slide

  37. Dan Gayle // Crate & Barrel
    "I don't know if this helps anyone,
    but one thing I've been stressing
    to our dev teams at Crate and Barrel
    is this: We’re not trying to speed up the
    website by 500ms. We’re trying to speed up
    the website by 100ms, five times.
    Or 50ms, ten times.”

    View full-size slide

  38. "Getting teams to think incrementally has
    proven to be more effective than trying to do
    everything all at once. It's less stressful,
    it's faster to implement, and everyone,
    including product managers, seems to get it.
    Smaller projects get more buy-in than
    megalithic projects that span multiple sprints
    or multiple teams.”
    Dan Gayle // Crate & Barrel

    View full-size slide

  39. "It's not to say that large, structural
    issues shouldn't be addressed, but
    while we're waiting for someday to
    come around, we can do what we
    can now to improve in smaller
    chunks that ultimately add up.”
    Dan Gayle // Crate & Barrel

    View full-size slide

  40. Know your performance plateau

    View full-size slide

  41. The performance plateau is the
    point at which changes to your
    website’s rendering metrics cease
    to matter because you’ve bottomed
    out in terms of business and user
    engagement metrics.
    speedcurve.com/blog/web-performance-plateau/

    View full-size slide

  42. speedcurve.com/blog/web-performance-plateau/

    View full-size slide

  43. speedcurve.com/blog/web-performance-plateau/

    View full-size slide

  44. Fight regression

    View full-size slide

  45. devops.com/survey-sees-spike-in-untested-code-leading-to-a-devops-crisis/
    @tameverts

    View full-size slide

  46. devops.com/survey-sees-spike-in-untested-code-leading-to-a-devops-crisis/
    @tameverts

    View full-size slide

  47. 77% of developers have assumed more responsibility
    for testing in the last year
    @tameverts

    View full-size slide

  48. Renato Sinohara // Westwing
    “My company used to do 'focus
    weeks' for performance, and I have
    found that to be ineffective.
    We now have a continuous process
    for monitoring and improvement,
    and it works much better.”

    View full-size slide

  49. “Funny enough, the key was not the
    improvements themselves, but frequently
    monitoring to understand changes. Regular
    meetings to spot changes and investigate what
    caused them. This was the spark for a constant
    flow of ideas on how to improve things, plus free
    flow of 'low hanging fruits'. Results were
    staggering. Developers keep thinking about
    performance and keep learning more as we go.”
    Renato Sinohara // Westwing

    View full-size slide

  50. Performance budgets FTW

    View full-size slide

  51. speedcurve.com/blog/performance-budgets/

    View full-size slide

  52. speedcurve.com/blog/performance-budgets/

    View full-size slide

  53. MVB
    Minimum Viable Budgets

    View full-size slide

  54. Meaningful
    content
    Usable out
    of the box
    Broad
    browser
    support
    Synthetic RUM
    Correlates to
    business/UX
    Time to First Byte ★ ★ ★ ★ ☆
    Start Render ☆ ★ ★ ★ ★ ★
    Largest Contentful Paint ☆ ★ ★ ★ ★
    Last Painted Hero ☆ ★ ★ ★
    Cumulative Layout Shift ☆ ☆ ★ ★
    Long Tasks ★ ★ ★ ★ ☆
    Interaction to Next Paint ★ ★ ★ ★
    @tameverts

    View full-size slide

  55. Share the load

    View full-size slide

  56. Everyone who touches
    a page should care
    about the performance
    of that page

    View full-size slide

  57. “One of the original directives of
    the performance team
    was we weren’t going
    to set ourselves up
    to be performance cops.”
    Dan Chilton, Vox Media
    responsivewebdesign.com/podcast/vox-media-performance/

    View full-size slide

  58. “We weren’t going to go around slapping people on
    the wrist, saying, ‘You built an article that broke the
    page size budget! You have to take that down or
    change that immediately!’
    “Our goal setting out was to set up best practices,
    make recommendations, and be a resource within the
    company that people can turn to when they have to
    make performance-related decisions.”
    Dan Chilton, Vox Media
    responsivewebdesign.com/podcast/vox-media-performance/

    View full-size slide

  59. Give people ownership

    View full-size slide

  60. If your marketing team is responsible for adding
    and maintaining third-party tags, they should:
    For example…

    View full-size slide

  61. If your marketing team is responsible for adding
    and maintaining third-party tags, they should:
    For example…
    • Have a basic understanding of the metrics (such as Long Tasks Time)
    • Collaborate on setting the budget
    • Receive alerts when the budget is violated
    • Participate (or at least have visibility) in identifying and fixing the issue

    View full-size slide

  62. Measure success

    View full-size slide

  63. “We, as engineers,
    should learn how
    to show the impact
    on anything we do.”
    Malek Hakim // Priceline
    chasingwaterfalls.io/episodes/episode-one-with-malek-hakim/

    View full-size slide

  64. We moved from 6th place to 3rd place
    in our competitive dashboard.

    View full-size slide

  65. We moved from 6th place to 3rd place
    in our competitive dashboard.
    We optimized (or removed) a third party
    and reduced bounce rate from 87.5% to 62.1%.

    View full-size slide

  66. youtube.com/watch?v=cXLOIIJ1UaE
    Harry Roberts // From Milliseconds to Millions // PerfNow 2019

    View full-size slide

  67. speedcurve.com/customers/tag/ab-testing/

    View full-size slide

  68. We moved from 6th place to 3rd place
    in our competitive dashboard.
    We optimized a third party
    and reduced bounce rate from 87.5% to 62.1%.
    We improved LCP by 0.8 seconds
    and increased conversion rate from 4.2% to 5.3%.

    View full-size slide

  69. We moved from 6th place to 3rd place
    in our competitive dashboard.
    We optimized a third party
    and reduced bounce rate from 87.5% to 62.1%.
    We improved LCP by 0.8 seconds
    and increased conversion rate from 4.2% to 5.3%.
    We prevented 3 regressions to LCP from going live,
    and prevented degradation to conversion rate.
    @tameverts

    View full-size slide

  70. Celebrate victories!

    View full-size slide

  71. WPOstats.com

    View full-size slide

  72. Increase your impact
    Identify your critical rendering path

    View full-size slide

  73. Increase your impact
    Identify your critical rendering path
    Focus on the pages that matter

    View full-size slide

  74. Increase your impact
    Identify your critical rendering path
    Focus on the pages that matter
    Fix the low-hanging fruit

    View full-size slide

  75. Increase your impact
    Identify your critical rendering path
    Focus on the pages that matter
    Fix the low-hanging fruit
    Manage expectations

    View full-size slide

  76. Increase your impact
    Identify your critical rendering path
    Focus on the pages that matter
    Fix the low-hanging fruit
    Manage expectations
    Use performance budgets to fight regressions

    View full-size slide

  77. Increase your impact
    Identify your critical rendering path
    Focus on the pages that matter
    Fix the low-hanging fruit
    Manage expectations
    Use performance budgets to fight regressions
    Quantify success – and brag about it!

    View full-size slide

  78. There’s no magic.
    Show up with a plan.
    Do the work.
    Be patient.

    View full-size slide

  79. There’s no magic.
    Show up with a plan.
    Do the work.
    Be patient.
    Be kind.

    View full-size slide

  80. Thank you!
    @tameverts
    webperf.social/@tammy

    View full-size slide

  81. Critical Rendering Path // Ilya Grigorik
    web.dev/articles/critical-rendering-path/
    The Fight for the Main Thread // Geoff Graham
    smashingmagazine.com/2023/10/speedcurve-fight-main-thread/
    Vox Media Performance // Dan Chilton
    responsivewebdesign.com/podcast/vox-media-performance/
    Why You Need to Know Your Site’s Performance Plateau
    speedcurve.com/blog/web-performance-plateau/
    Survey Sees Spike in Untested Code Leading to a DevOps Crisis
    devops.com/survey-sees-spike-in-untested-code-leading-to-a-devops-crisis/
    A Complete Guide to Performance Budgets
    speedcurve.com/blog/performance-budgets/
    Scaling a Culture of Performance // Malek Hakim
    chasingwaterfalls.io/episodes/episode-one-with-malek-hakim/
    From Milliseconds to Millions // Harry Roberts
    youtube.com/watch?v=cXLOIIJ1UaE
    @tameverts

    View full-size slide