Slide 1

Slide 1 text

The 7 Habits of Highly Effective Performance Teams @tameverts #perfnow

Slide 2

Slide 2 text

@tameverts WPOstats.com

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

“The largest hurdle to creating and maintaining stellar site performance is the culture of your organization. Lara Hogan designingforperformance.com

Slide 5

Slide 5 text

“No matter the size or type of team, it can be a challenge to educate, incentivize, and empower those around you. “Performance more often comes down to a cultural challenge, rather than simply a technical one.” Lara Hogan designingforperformance.com

Slide 6

Slide 6 text

Educate Incentivize Empower

Slide 7

Slide 7 text

@tameverts #perfnow

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

2009 Improved average load time from 6s à 1.2s 7-12% increase in conversion rate + 25% increase in PVs Average load time degraded 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 #perfnow

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

1. Performance is a marathon, not a sprint

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

q Having a plan q Setting clear goals q Rigorous tracking (and fun tools) q Building community spirit q Celebrating milestones Marathon training involves… @tameverts #perfnow

Slide 16

Slide 16 text

2. Have a champion higher up

Slide 17

Slide 17 text

3. Then build a cross-disciplinary team

Slide 18

Slide 18 text

Awesome tools ≠ Enough

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Embrace performance from the ground up. Embed engineers into other teams. Enlist performance ambassadors. Teach people how to use (or at least understand) the monitoring tools you use. #perfnow @tameverts

Slide 24

Slide 24 text

It’s perilously easy to accidentally become a gatekeeper.

Slide 25

Slide 25 text

4. Set shared goals

Slide 26

Slide 26 text

We first went to the engineering leaders, and then we went to our product leader. Our pitch was totally different... Reefath Rajali // PayPal chasingwaterfalls.io/episodes/episode-two-with-reefath-rajali/

Slide 27

Slide 27 text

“When we went to our product leaders, we spoke more about the business numbers and the business benefits. “When we spoke to our engineering leaders, it was more about our consumer delight.” Reefath Rajali // PayPal chasingwaterfalls.io/episodes/episode-two-with-reefath-rajali/

Slide 28

Slide 28 text

Find out what people care about

Slide 29

Slide 29 text

❑ bounce rate ❑ cart size ❑ conversions ❑ revenue ❑ time on site ❑ page views ❑ SEO ❑ user happiness ❑ user retention ❑ competitors @tameverts #perfnow

Slide 30

Slide 30 text

If they care about business metrics…

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

If they care about user engagement…

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

If they care about SEO…

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

If they care about third parties…

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

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 Content Third-party performance Correlation charts (perf + bounce rate) Lighthouse SEO audits Image size Devs / engineers Well, lots of stuff, probably Consult with perf team @tameverts #perfnow

Slide 45

Slide 45 text

5. Make everyone accountable

Slide 46

Slide 46 text

Performance budgets addyosmani.com/blog/performance-budgets/ Milestone timings (e.g. start render) Quantity-based (e.g. image weight) Rules-based (e.g. Lighthouse scores)

Slide 47

Slide 47 text

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 @tameverts #perfnow

Slide 48

Slide 48 text

https://www.zillow.com/tech/bigger-faster-more-engaging-budget/

Slide 49

Slide 49 text

https://www.zillow.com/tech/bigger-faster-more-engaging-budget/

Slide 50

Slide 50 text

Who What Metric Ops Back-end issues TTFB Marketing Most important content Third parties SEO Hero rendering times, LCP Blocking CPU time Lighthouse SEO score Devs / engineers How well pages are built Performance issues Start Render, Speed Index Lighthouse Performance score @tameverts #perfnow

Slide 51

Slide 51 text

Give people ownership

Slide 52

Slide 52 text

“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/

Slide 53

Slide 53 text

“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/

Slide 54

Slide 54 text

6. Communicate

Slide 55

Slide 55 text

“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/

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

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 Meetups, hackathons, etc. monthly (if possible) @tameverts #perfnow

Slide 63

Slide 63 text

7. Don’t forget to celebrate!

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

!!!

Slide 68

Slide 68 text

medium.com/the-telegraph-engineering

Slide 69

Slide 69 text

Score some easy wins

Slide 70

Slide 70 text

“The dull boring stuff” ~Andy Davies Scripts (especially third parties) Images Extraneous code Defer assets where possible

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

In summary…

Slide 73

Slide 73 text

1. Know that performance is a marathon, not a sprint 2. Have a higher-up champion 3. Build cross-disciplinary teams 4. Set shared goals 5. Make everyone accountable 6. Communicate 7. Celebrate! @tameverts #perfnow

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

Thanks! @tameverts speedcurve.com/blog