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