Save 37% off PRO during our Black Friday Sale! »

Performance Enhancement - Testing Positive

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.

79024f1fe6d866159a95868721136084?s=128

Brian Muenzenmeyer

November 12, 2014
Tweet

Transcript

  1. Web Performance Enhancement Testing Positive

  2. Brian Muenzenmeyer Software Developer UX/UI @ Roydan

  3. None
  4. None
  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

  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  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
  38. None
  39. None
  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

  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  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

  85. None
  86. None
  87. Performance is perception

  88. None
  89. Images Half the problem

  90. None
  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

  100. None
  101. Performant. Are we there yet?

  102. Before and After Huh Firefox?

  103. None
  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
  110. None
  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!

  126. None
  127. Test hypotheses with experiments

  128. None
  129. Experiments yield data Consult your analytics Observe

  130. Data informs decisions about content and execution

  131. Content + Execution = Performance

  132. None
  133. None
  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