Performance Enhancement - Testing Positive

Creating high-performance experiences is both art and science - but it's never an accident. In an ever-increasing landscape of choice and expectations for your users, you must learn to leverage tools, process, and those around you to craft optimal outcomes.

Let's start with the basics - and then do some deep dives into techniques deployed against real-life use cases. Measure progress throughout the workflow, and bring your message front and center, faster. Challenge yourself, your coworkers, and your boss to design, develop, and deliver performance.

Transcript

1. Web Performance Enhancement Testing Positive
2. Brian Muenzenmeyer Software Developer UX/UI @ Roydan
5. Let’s talk about performance Know what I’m talkin’ bout?
6. 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
7. “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
8. “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
9. Etymology What does performance mean?
10. Per ∙ form ∙ ance per form ance thoroughly, completely furnish state or condition of provide what is needed hmmm
11. wait, so, not speed!? • Performance is much more than speed • Performance is perception • Performance is content meets execution • Performance is design
12. Performance needs to be a vital part of the craft of delivering content to
13. humans and machines
14. Performance needs to be woven into design, development, and deployment
15. Performance needs to be measured (before, during, after)
16. Performance is both art & engineering
17. “Why are we talking about this?” After all, it’s 2014 you know…
18. Let’s look at some data Top 1000 Alexa Sites 2010-Present
19. Average page requests are increasing http://httparchive.org/trends.php?s=Top1000&minlabel=Nov+15+2010&maxlabel=Oct+15+2014#bytesTotal&reqTotal
20. http://httparchive.org/trends.php?s=Top1000&minlabel=Nov+15+2010&maxlabel=Oct+15+2014#bytesTotal&reqTotal
21. http://httparchive.org/trends.php?s=Top1000&minlabel=Nov+15+2010&maxlabel=Oct+15+2014#bytesTotal&reqTotal
22. http://httparchive.org/trends.php?s=Top1000&minlabel=Nov+15+2010&maxlabel=Oct+15+2014#bytesTotal&reqTotal
23. http://httparchive.org/trends.php?s=Top1000&minlabel=Nov+15+2010&maxlabel=Oct+15+2014#bytesTotal&reqTotal
24. http://httparchive.org/trends.php?s=Top1000&minlabel=Nov+15+2010&maxlabel=Oct+15+2014#bytesTotal&reqTotal
31. But wait, good news: speed is ~constant
32. and this matters…
33. Performance is $$$
34. http://www.slideshare.net/devonauerswald/walmart-pagespeedslide/37
35. http://o04151985.kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/ 60% speed increased donations 14%
36. Performance is attention
37. 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
40. https://www.flickr.com/photos/jayfine/5070639788/sizes/z/
41. But the numbers are all going the wrong way… • How are the top sites staying performant? • “How does the 1% live?”
42. more on that later
43. Performance - Foundations Let’s start a performance journey with a real-life use case
44. roydan.com wordpress | sales & marketing content | not mobile-optimized | modest traffic
45. Is it performant? Let’s measure up
46. webpagetest.org
55. Data in Hand… “Tell me what you measure, and I will tell you how I behave.”
56. Order of Operations 1. Reduce Network Traffic • Compress • Cache 2. Reduce Asset Size • CSS, Javascript • Images 3. Think & Deliver Different
57. Remember • Performance • Speed • Perception
58. Reduce Network Traffic A series of tubes
59. Compression at the server (GZIP) • Reducing payload through the network
60. Compression at the server (GZIP) Apache https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess • Reducing payload through the network
61. Compression at the server (GZIP) nginx
62. Compression at the server (GZIP) IIS
63. Success Looks Like This
64. Cache • Preventing repeat downloads
65. Caching https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess
66. Reduce Asset Size Concatenation and Minification
67. Concatenation • Combining assets to reduce network requests • CSS • JS • Images
68. this is where things get messy
69. http://www.slideshare.net/RGA/i-can-smell-your-cms
70. CSS …moreover, inside style.css…
71. 4 blocking network requests before rendering can start
72. JS
73. 5 more blocking network requests before rendering can start
74. ;(
75. 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
76. Grunt to the rescue http://gruntjs.com
77. Here’s the gameplan
78. Gather: Javascript https://gist.github.com/bmuenzenmeyer/9dd62b9def7c8e5fc55c
79. Transform: Javascript https://gist.github.com/bmuenzenmeyer/9dd62b9def7c8e5fc55c
80. Gather: CSS https://gist.github.com/bmuenzenmeyer/9dd62b9def7c8e5fc55c
81. Transform: CSS https://gist.github.com/bmuenzenmeyer/9dd62b9def7c8e5fc55c
82. Redeploy: Stop the modular madness
83. Redeploy: Hook
84. Results
87. Performance is perception
89. Images Half the problem
91. Compress images manually http://www.smushit.com
92. Compress images manually http://pnggauntlet.com/
93. roydan image compression
94. Compress images automatically https://github.com/gruntjs/grunt-contrib-imagemin
95. Remove Images Entirely • Sprite • Icon Fonts • CSS / data URI
96. Sprite
97. Icon Font https://icomoon.io/app/
98. CSS > Image
99. http://i.imgur.com/zmodH.gif
101. Performant. Are we there yet?
102. Before and After Huh Firefox?
104. #’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
105. There is a reason Google Fonts shows you this…
106. Advanced Topics Think & Deliver Different
107. Recall…
108. yet speed is constant
109. so what are the big sites doing? • Increasing # of domains • Leveraging CDNs for EVERYTHING, including HTML. • Increasing Compressed Responses • Breaking the rules
111. Breaking the rules! • In-lining critical CSS https://github.com/addyosmani/critical
112. Breaking the rules! • Data URI or SVG, with fallback to PNG https://github.com/filamentgroup/grunticon
113. Breaking the rules! • Icon Fonts https://icomoon.io/
114. Breaking the rules! • Font Loader https://github.com/typekit/webfontloader
115. Breaking the rules! • Splicing Fonts http://www.fontsquirrel.com/tools/webfont-generator
116. Breaking the rules! • Rather, create your own http://ricg.io/
117. Breaking the rules! • Picture Element
118. Breaking the rules! • srcset
119. Performance and Process Toward a more performant workflow
120. http://timkadlec.com/2013/01/setting-a-performance-budget/
121. Build bit by bit http://patternlab.io/
122. Test everything, including assumptions • Is that youtube video the right content for such a critical real estate?
123. • Is that youtube video the right content for such a critical real estate? • Can all of our users reach this content?
124. • 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?
125. Design is a hypothesis Ask Questions!
127. Test hypotheses with experiments
129. Experiments yield data Consult your analytics Observe
130. Data informs decisions about content and execution
131. Content + Execution = Performance
134. Next Steps Where to go from here
135. 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
136. 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
137. THANKS Follow me on Twitter @bmuenzenmeyer brianmuenzenmeyer.com | crunchyowl.com