Brian Muenzenmeyer
Software Developer UX/UI @ Roydan
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
Let’s talk about performance
Know what I’m talkin’ bout?
Slide 6
Slide 6 text
Performance since 1800
https://books.google.com/ngrams/graph?content=performance&year_start=1800&year_end=2008&corpus=15&smoothing=7&shar
e=&direct_url=t1%3B%2Cperformance%3B%2Cc0
Slide 7
Slide 7 text
“Performant” since 1970
https://books.google.com/ngrams/graph?content=performant&year_start=1800&year_end=2008&corpus=15&smoothing=7&share
=&direct_url=t1%3B%2Cperformant%3B%2Cc0
Slide 8
Slide 8 text
“Performant” since 1970
https://books.google.com/ngrams/graph?content=performant&year_start=1800&year_end=2008&corpus=15&smoothing=7&share
=&direct_url=t1%3B%2Cperformant%3B%2Cc0
Slide 9
Slide 9 text
Etymology
What does performance mean?
Slide 10
Slide 10 text
Per ∙ form ∙ ance
per
form
ance
thoroughly, completely
furnish
state or condition of
provide what is needed
hmmm
Slide 11
Slide 11 text
wait, so, not speed!?
• Performance is much more than speed
• Performance is perception
• Performance is content meets execution
• Performance is design
Slide 12
Slide 12 text
Performance needs to be a vital part of
the craft of delivering content to
Slide 13
Slide 13 text
humans and machines
Slide 14
Slide 14 text
Performance needs to be woven into
design, development, and deployment
Slide 15
Slide 15 text
Performance needs to be measured
(before, during, after)
Slide 16
Slide 16 text
Performance is both art & engineering
Slide 17
Slide 17 text
“Why are we talking about this?”
After all, it’s 2014 you know…
Slide 18
Slide 18 text
Let’s look at some data
Top 1000 Alexa Sites
2010-Present
Slide 19
Slide 19 text
Average page requests are increasing
http://httparchive.org/trends.php?s=Top1000&minlabel=Nov+15+2010&maxlabel=Oct+15+2014#bytesTotal&reqTotal
Your competition is…
Facebook
Apple
Twitter
Hulu
Wikipedia
A freaky Japanese YouTube channel
All of Google
Every startup ever
The nosey neighbor offering unsolicited advice
The hot teaching assistant
Mom and dad
Sloth
Inertia
FUD
Corporate bureaucracy
Memory lapses
Some hacker in Serbia you have never heard of
Modern Chinese secrets
…and more!
Erika Hall, Just Enough Research
4 blocking network requests before
rendering can start
Slide 72
Slide 72 text
JS
Slide 73
Slide 73 text
5 more blocking network requests
before rendering can start
Slide 74
Slide 74 text
;(
Slide 75
Slide 75 text
Here’s the situation
• Wordpress/plugins already are deploying js and css
• They are largely atomic solutions, not aware of each other (modularity FTW?)
• Want to combine with minimal impact
Remove Images Entirely
• Sprite
• Icon Fonts
• CSS / data URI
Slide 96
Slide 96 text
Sprite
Slide 97
Slide 97 text
Icon Font
https://icomoon.io/app/
Slide 98
Slide 98 text
CSS > Image
Slide 99
Slide 99 text
http://i.imgur.com/zmodH.gif
Slide 100
Slide 100 text
No content
Slide 101
Slide 101 text
Performant. Are we there yet?
Slide 102
Slide 102 text
Before and After
Huh Firefox?
Slide 103
Slide 103 text
No content
Slide 104
Slide 104 text
#’s are one thing. How does it feel?
• Remember, performance is more than speed, it’s perception
• Performance is providing what is needed
• Performance is decisions
Slide 105
Slide 105 text
There is a reason Google Fonts shows you this…
Slide 106
Slide 106 text
Advanced Topics
Think & Deliver Different
Slide 107
Slide 107 text
Recall…
Slide 108
Slide 108 text
yet speed is constant
Slide 109
Slide 109 text
so what are the big sites doing?
• Increasing # of domains
• Leveraging CDNs for EVERYTHING, including HTML.
• Increasing Compressed Responses
• Breaking the rules
Slide 110
Slide 110 text
No content
Slide 111
Slide 111 text
Breaking the rules!
• In-lining critical CSS
https://github.com/addyosmani/critical
Slide 112
Slide 112 text
Breaking the rules!
• Data URI or SVG, with fallback to PNG
https://github.com/filamentgroup/grunticon
Slide 113
Slide 113 text
Breaking the rules!
• Icon Fonts
https://icomoon.io/
Slide 114
Slide 114 text
Breaking the rules!
• Font Loader
https://github.com/typekit/webfontloader
Slide 115
Slide 115 text
Breaking the rules!
• Splicing Fonts
http://www.fontsquirrel.com/tools/webfont-generator
Slide 116
Slide 116 text
Breaking the rules!
• Rather, create your own
http://ricg.io/
Slide 117
Slide 117 text
Breaking the rules!
• Picture Element
Slide 118
Slide 118 text
Breaking the rules!
• srcset
Slide 119
Slide 119 text
Performance and Process
Toward a more performant workflow
Test everything, including assumptions
• Is that youtube video the right content
for such a critical real estate?
Slide 123
Slide 123 text
• Is that youtube video the right content
for such a critical real estate?
• Can all of our users reach this content?
Slide 124
Slide 124 text
• Is that youtube video the right content
for such a critical real estate?
• Can all of our users reach this content?
• Can we afford to deliver a player with
more browser support?
Slide 125
Slide 125 text
Design is a hypothesis
Ask Questions!
Slide 126
Slide 126 text
No content
Slide 127
Slide 127 text
Test hypotheses with experiments
Slide 128
Slide 128 text
No content
Slide 129
Slide 129 text
Experiments yield data
Consult your analytics
Observe
Slide 130
Slide 130 text
Data informs decisions about content
and execution
Slide 131
Slide 131 text
Content + Execution = Performance
Slide 132
Slide 132 text
No content
Slide 133
Slide 133 text
No content
Slide 134
Slide 134 text
Next Steps
Where to go from here
Slide 135
Slide 135 text
Where to go from here
• Measure your baseline
• Make a backlog
• Prioritize by impact
• Convince your boss
• Measure & report success
Font loading, image spriting & replacement, migrating off shared hosting, mobile
Slide 136
Slide 136 text
Where to go from here
• https://github.com/bmuenzenmeyer/performance
• http://timkadlec.com/2014/01/fast-enough
• http://www.filamentgroup.com/lab/performance-rwd.html
• http://bradfrost.com/blog/post/performance-as-design/
• http://perf-tooling.today/
• https://github.com/filamentgroup/Southstreet
• https://github.com/davidsonfellipe/awesome-wpo
Slide 137
Slide 137 text
THANKS
Follow me on Twitter @bmuenzenmeyer
brianmuenzenmeyer.com | crunchyowl.com