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.

Transcript

1. @tameverts #WebPerfDays How to create a performance-first culture
2. @tameverts WPOstats.com
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
4. 1. No front-end measurement 2. Constant feature development 3. Badly implemented third-parties 4. Waiting too long to tackle performance problems
5. During a performance optimization sprint
6. After a performance optimization sprint
7. Everyone who touches a page should care about the performance of that page.
9. Identify what people care about
10. ❑ bounce rate ❑ cart size ❑ conversions ❑ revenue ❑ time on site What do people care about? #WebPerfDays @tameverts ❑ page views ❑ search traffic ❑ user satisfaction ❑ user retention ❑ ???
11. 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
12. 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
14. Fire up people’s competitive spirit
18. Collaborate on performance budgets
19. 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)
20. 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
22. 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
23. Give people ownership over their performance budgets. Make sure they get alerts when their budgets are exceeded.
24. Share just the right amount
28. 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
29. Score some easy wins
30. “The dull boring stuff” ~Andy Davies Scripts (especially third parties) Images Unneeded code Deferring assets where possible
31. issue 1 image quality and compression issue 2 image sprite blocking page load
32. 2-second improvement in median page load time almost doubled mobile conversions
33. Don’t forget to celebrate!
36. #ring_the_bell
37. thanks! @tameverts speedcurve.com/blog