Champions of Performance

Culture & Performance Budgets

@jakob_anderson

jakobanderson.com

slides.com/jakobanderson

Jakob Anderson

Familysearch Frontier Core Engineer,
Performance Champion

© 2016 Jakob Anderson

All images not owned by author are Creative Commons, free, or public domain, unless otherwise noted

@jakob_anderson

jakobanderson.com

slides.com/jakobanderson

Champion

[cham-pee-uh n]
noun: a person who fights for or defends any person or cause

Perf

[perf]
noun: web performance

Why are we here?

Users are counting on our perf

Why Perf?

Perf affects conversions

Lighter, Faster Pages work more reliably in slow internet

  • Africa, Pacific Islands
  • Mobile web
  • Bad wifi ( "lie-fi", "faux-g" )

get more done.

  • Patience
  • Time
  • Interactive Tempo

"Doherty Threshold"

  • IBM, from 1982 report
  • 400ms = tipping point

Doherty Threshhold: http://www.vm.ibm.com/devpages/jelliott/evrrt.html
​Summary: http://daverupert.com/2015/06/doherty-threshold/

When a computer and its users interact at a pace that ensures that neither has to wait on the other, productivity soars ... and its quality tends to improve.

IBM, The Economic Value of Rapid Response Time

Some perf excuses
we've heard

It's fast on my machine.

~ overheard ~

We have a captive audience. They have to use us.

~ overheard ~

I can't work on performance, because reasons

~ overheard ~

Our users are invested enough that they don’t really mind waiting

~ overheard ~

We just have to get the features done. Performance will have to be a later enhancement

~ overheard ~

It’s the backends' fault,
nothing I can do

~ overheard ~

what options
do we have?

ignore it :(

"Performance cops" :(

"Performance Janitors" :(

OR ...

Build a
"Performance Culture"

(IN 3 steps)

awareness
education
action

Awareness

Get VIPs invested

  • Use comparisons
  • webpagetest.org/compare
  • Compare local to global
  • Show VIPs performance / conversion relationship
  • wpostats.com for examples

53% of visits to mobile sites are abandoned after 3 seconds according to research from Google's DoubleClick.

 wpostats.com

Staples reduced median homepage load time by 1 second and reduced load time for the 98th percentile by 6 seconds. As a result, they saw a 10% increase in their conversion rate.

 wpostats.com

GQ cut load time by 80% and saw an 80% increase in traffic. Median time spent on the site also increased by 32%.

 wpostats.com

When YouTube introduced a version of their pages that was 90% lighter, they saw a large increase in traffic in areas with poor connectivity such as Southeast Asia, South America, Africa and Siberia.

 wpostats

Walmart saw up to a 2% increase in conversions for every 1 second of improvement in load time. Every 100ms improvment also resulted in up to a 1% increase in revenue.

 wpostats.com

Netflix saw a 43% decrease in their bandwidth bill after turning on GZip.

 wpostats.com

Removing one client-side redirect from Google's DoubleClick resulted in a 12% improvement in click-through rate.

 wpostats.com

Get VIPs to Feel IT,
so they empower others

༼ ༎ຶ ෴ ༎ຶ༽

#throttlethursday

           _.-,=_"""--,_
        .-" =/7"   _  .3#"=.
      ,#7  " "  ,//)#d#######=.
    ,/ "      # ,i-/###########=
   /         _)#sm###=#=# #######\
  /         (#/"_`;\//#=#\-#######\
 /         ,d####-_.._.)##P########\
,        ,"############\\##bi- `\| Y.
|       .d##############b\##P'   V  |
|\      '#################!",       |
|C.       \###=############7        |
'###.           )#########/         '
 \#(             \#######|         /
  \B             /#######7 /      /
   \             \######" /"     /
    `.            \###7'       ,'
      "-_          `"'      ,-'
         "-._           _.-"
             """"---""""

Agree on a perf budget

  • Line in the sand
  • You don't dare cross
  • Must return "boolean", not "meh"

User-centric metric

  • Speed Index
  • Visually Complete
  • Manual Timings with performance.mark()

User-centric
Performance Budget

  • Not everyone should pass currently
  • Attainable, given hard work and sacrifice
  • Enough context to be reproducible to anyone

hold on,
i'm going to try science

because science

RUM & SYNTH

11+ TESTS

MEDIANS

P90s

NEVER AVERAGES

Clear metrics:
"Perf Report Card Dashboard"

 

  • In org-visible space
  • Released regularly
  • Automated

Perf visible during dev: "PerfBar"

  • Have perf stats visible during development and testing
  • Use metrics that correlate directly to user experience
  • Constrained pagetype, bandwidth & screen-size scenarios

Etsy Example: Quarterly perf reports

  • Current  previous
  • Track multiple pages, pagetypes
  • Baseline: track stack and global template
  • Releasing this to public convinced Etsy engineers and management to improve performance

 
education
 

Share Best Practices

  • Regular training "best-practices"

#codemix

Skills Workshops

WebDev Book Club

Brown Bag

PerfRomance

10% time

#webperf

 
 
Action

Check yo self

  • Continuously audit your site
  • Make pre-prioritized bugs
  • Do against current prod
  • Against anything yet to launch
  • Continuously audit
  • Make rules

Check yo 3rd-parties

  • No document.write()
  • async only
  • Maximum # bytes
  • gzip if over 1K
  • Efficient cache
  • Maximum # calls

Enforce best practices

  • git commit -m "perf sins"
  • ^^ Make that impossible.
  • Agree with industry and org peers

Celebrate performance successes

  • Perf budget goal
  • Celebrate improvements
  • Individual CHAMPIONS
  • Whole teams
  • Entire org

celebrating your wins
will motivate your team
to become

performance champions

Who owns perf?

We All
own
performance

TRAFFIC COPS

JANITORS...

CHAMPIONS

We don't need a few performance experts, we need an org full of people with a passion for performance

Me, just now

thank you

( fight for the user )

@jakob_anderson

jakobanderson.com

slides.com/jakobanderson

Champions of Performance

By Jakob Anderson

Champions of Performance

How do we improve performance culture for good?

  • 1,290