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

How to Create a Performance-First Culture [2018 WebPerfDays Amsterdam]

How to Create a Performance-First Culture [2018 WebPerfDays Amsterdam]

If you've ever wondered why all your performance efforts feel like such a painful uphill slog within your organization, then this talk is for you. Creating a strong web performance culture means getting people to care, showing them what they can do to help, and giving them positive reinforcement when you get results. Here are some proven tips and best practices to help you create a healthy, happy, celebratory performance culture.

Tammy Everts

November 16, 2018
Tweet

More Decks by Tammy Everts

Other Decks in Technology

Transcript

  1. @tameverts
    #WebPerfDays
    How to create a
    performance-first culture

    View full-size slide

  2. @tameverts
    WPOstats.com

    View full-size slide

  3. 2009 Cut average load time from 6s to 1.2s
    7-12% increase in conversion rate + 25% increase in PVs
    Average load time increased to 5s
    User feedback: “I will not come back to this site again.”
    Re-focused on performance
    0.4% increase in conversion rate
    2010
    2011
    @tameverts #WebPerfDays

    View full-size slide

  4. 1. No front-end measurement
    2. Constant feature development
    3. Badly implemented third-parties
    4. Waiting too long to tackle
    performance problems

    View full-size slide

  5. During a performance
    optimization sprint

    View full-size slide

  6. After a performance
    optimization sprint

    View full-size slide

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

    View full-size slide

  8. Identify what people
    care about

    View full-size slide

  9. ❑ bounce rate
    ❑ cart size
    ❑ conversions
    ❑ revenue
    ❑ time on site
    What do people care about?
    #WebPerfDays
    @tameverts
    ❑ page views
    ❑ search traffic
    ❑ user satisfaction
    ❑ user retention
    ❑ ???

    View full-size slide

  10. Who they are What they care about What to show them
    Executives
    Competition
    Business impact
    Benchmarks (filmstrips and videos)
    Correlation charts (perf + KPIs)
    Marketing
    Third parties
    Traffic + engagement
    SEO
    Third-party performance
    Correlation charts (perf + bounce rate)
    Lighthouse SEO audits
    Devs / engineers Well, lots of stuff, probably Consult with perf team
    @tameverts #WebPerfDays

    View full-size slide

  11. BBC loses an additional 10% of users for every
    additional second it takes their site to load
    Ancestry.com saw a 7% increase in
    conversions after improving load time by 64%
    FT.com reduced desktop load times to 1.5s
    and mobile to 2.1s and increased user
    engagement by 30%
    @tameverts #WebPerfDays

    View full-size slide

  12. Fire up people’s
    competitive spirit

    View full-size slide

  13. Collaborate on
    performance budgets

    View full-size slide

  14. Thresholds YOU create for metrics
    that are meaningful for YOUR site
    https://addyosmani.com/blog/performance-budgets/
    Milestone timings (e.g. start render)
    Quantity-based (e.g. image weight)
    Rules-based (e.g. Lighthouse scores)

    View full-size slide

  15. A good performance budget
    should show you…
    What your budget is
    When you go out of bounds
    How long you’re out of bounds
    When you’re back within budget

    View full-size slide

  16. Who What Metric
    Ops Back-end issues TTFB
    Marketing
    Most important content
    Third parties
    SEO
    Hero rendering times
    Custom metrics
    Lighthouse SEO score
    Devs / engineers
    How well page is built
    Performance issues
    Start Render, Speed Index
    Lighthouse Performance score
    @tameverts #WebPerfDays

    View full-size slide

  17. Give people ownership over
    their performance budgets.
    Make sure they get alerts when
    their budgets are exceeded.

    View full-size slide

  18. Share just
    the right amount

    View full-size slide

  19. How often is often enough?
    Wall monitors and dashboards 24/7
    Alerts in realtime (to people who can make fixes)
    Reports no more than 1X week

    View full-size slide

  20. Score some easy wins

    View full-size slide

  21. “The dull boring stuff”
    ~Andy Davies
    Scripts (especially third parties)
    Images
    Unneeded code
    Deferring assets where possible

    View full-size slide

  22. issue 1
    image quality and
    compression
    issue 2
    image sprite
    blocking page load

    View full-size slide

  23. 2-second improvement
    in median page load time
    almost doubled mobile conversions

    View full-size slide

  24. Don’t forget
    to celebrate!

    View full-size slide

  25. #ring_the_bell

    View full-size slide

  26. thanks!
    @tameverts
    speedcurve.com/blog

    View full-size slide