Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Brian Muenzenmeyer

November 12, 2014

Other Decks in Technology


  1. Per ∙ form ∙ ance per form ance thoroughly, completely

    furnish state or condition of provide what is needed hmmm
  2. wait, so, not speed!? • Performance is much more than

    speed • Performance is perception • Performance is content meets execution • Performance is design
  3. 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. But the numbers are all going the wrong way… •

    How are the top sites staying performant? • “How does the 1% live?”
  5. Order of Operations 1. Reduce Network Traffic • Compress •

    Cache 2. Reduce Asset Size • CSS, Javascript • Images 3. Think & Deliver Different
  6. JS

  7. ;(

  8. 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
  9. #’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
  10. so what are the big sites doing? • Increasing #

    of domains • Leveraging CDNs for EVERYTHING, including HTML. • Increasing Compressed Responses • Breaking the rules
  11. Breaking the rules! • Data URI or SVG, with fallback

    to PNG https://github.com/filamentgroup/grunticon
  12. Test everything, including assumptions • Is that youtube video the

    right content for such a critical real estate?
  13. • Is that youtube video the right content for such

    a critical real estate? • Can all of our users reach this content?
  14. • 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?
  15. 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
  16. 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