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

Performance

10f09362b16fa3c853e7fd679e6d5b0e?s=47 Erin Brown
November 18, 2013

 Performance

How do we define performance in regard to building web sites? We present simple optimization techniques for code, defensive design and briefly introduce the concept of development operations. Presented to a graduate-level web interactivity class.

10f09362b16fa3c853e7fd679e6d5b0e?s=128

Erin Brown

November 18, 2013
Tweet

Transcript

  1. PERFORMANCE WEB INTERACTIVITY • NOV. 18, 2013

  2. WHAT IS PERFORMANCE? • the execution of an action •

    fulfillment of a promise or request; implementation • ability to perform; efficiency • the manner in which a mechanism performs
  3. MY NOT-SO-EXCELLENT ADVENTURE WITH A BMW…

  4. PERFORMANCE? • Dad: driving machine • Mom: safety • Me:

    simplicity
  5. –TIM BERNERS-LEE “The trick.... is to make sure that each

    limited mechanical part of the Web, each application, is within itself composed of simple parts that will never get too powerful.”
  6. ESSENTIAL CHARACTERISTICS • simplicity • universality • degradability

  7. CONSIDER… • the Internet is an infinite medium • new

    access points emerge daily • Zeldman: 99.9 percent of web sites are obsolete
  8. WHY OPTIMIZE? • Zeldman: reduction in code = reduction in

    costs • time & bandwidth is money • 40 percent of users will abandon a site after 3 sec.
  9. –MY MOM (YOURS, TOO) “You only get one chance to

    make a good first impression.”
  10. –BRIAN LILES “Good development is knowing why versus how.”

  11. HICKS’ LAW • the time it takes for for a

    person to make a decision as a result of the possible choices available • more choices increase decision time • also known as the rate of gain of information
  12. FITTS’ LAW • the time required to rapidly move to

    a target area is a function of the distance to the target and the size of the target • models the act of pointing, physically or virtually
  13. WEB • multiple browsers • multiple platforms • multiple resolutions

    • non-traditional platforms • desired result: fast, functional, ease-of-use, visual
  14. MOBILE • multiple browsers • multiple devices • multiple resolutions

    • bandwidth considerations • desired result: fast, functional, ease-of-use, simplicity
  15. ACCESSIBILITY • text-to-speech • braille • screen magnifiers • assistive

    technology • desired result: ease-of-use, navigable, well-structured
  16. WEB CRAWLERS • valid code • semantic web • site

    architecture • site restrictions • desired result: structure, meaning, organization
  17. LESS IS MORE

  18. EXAMPLE: NAVIGATION • http://jsfiddle.net/45RP8/ • Web: optimized for Hicks’ Law,

    Fitts’ Law • Mobile: easily modified with CSS • Accessibility: structure (http://jsfiddle.net/45RP8/1/) • Crawlers see page identity, navigation, site structure
  19. EXAMPLE: STYLING • Can we improve this? http://jsfiddle.net/rNeQ5/ • Yes!

    http://jsfiddle.net/rNeQ5/1/
  20. TIPS FOR CODE • DRY: Don’t repeat yourself • Consider

    the tools available to you • Keep structure, presentation and behavior separate • Aim to have each object do one thing right • Experiment! Benchmark! Refactor!
  21. DEFENSIVE DESIGN

  22. WHAT IF… • You went to a store to buy

    a broom and an employee directed you to the electronics section? • You lost an airline ticket minutes before a flight and customer service makes you wait? • You go to purchase a new gadget and the salesman confuses you with acronyms?
  23. CONSIDER… • 404 errors • form errors • server errors

    • inaccurate search results
  24. DEV OPS

  25. CLOUD COMPUTING • server flexibility • space • speed •

    bandwidth
  26. CLOUD SERVICES • Digital Ocean (https://www.digitalocean.com/) • Engine Yard (https://www.engineyard.com/)

    • Heroku (https://www.heroku.com/) • Rackspace (http://www.rackspace.com/)
  27. TIPS & RESOURCES

  28. TIPS • Set up a test platform with VirtualBox •

    Test your site in the wild • Be wary of frameworks • Adjust to your metrics • Guide your users
  29. TOOLS • Code: Google Developer Tools, FireBug • Optimization: PageSpeed,

    YSlow • Accessibility: Fangs, Accessibility Dev Tools
  30. BOOKS • “Web Standards Solutions” by Dan Cederholm • “Bulletproof

    Web Design” by Dan Cederholm • “Designing with Web Standards” by Jeff Zeldman • “Defensive Design for the Web” by 37 Signals • “Access by Design” by Sarah Horton
  31. Thanks!