Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@tameverts WPOstats.com

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

During a performance optimization sprint

Slide 6

Slide 6 text

After a performance optimization sprint

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Identify what people care about

Slide 10

Slide 10 text

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

Slide 11

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Fire up people’s competitive spirit

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Collaborate on performance budgets

Slide 19

Slide 19 text

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)

Slide 20

Slide 20 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

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Share just the right amount

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 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

Slide 29

Slide 29 text

Score some easy wins

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Don’t forget to celebrate!

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

#ring_the_bell

Slide 37

Slide 37 text

thanks! @tameverts speedcurve.com/blog