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. 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
  2. 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.”
  3. 7.

    CONSIDER… • the Internet is an infinite medium • new

    access points emerge daily • Zeldman: 99.9 percent of web sites are obsolete
  4. 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.
  5. 9.

    –MY MOM (YOURS, TOO) “You only get one chance to

    make a good first impression.”
  6. 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
  7. 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
  8. 13.

    WEB • multiple browsers • multiple platforms • multiple resolutions

    • non-traditional platforms • desired result: fast, functional, ease-of-use, visual
  9. 14.

    MOBILE • multiple browsers • multiple devices • multiple resolutions

    • bandwidth considerations • desired result: fast, functional, ease-of-use, simplicity
  10. 15.

    ACCESSIBILITY • text-to-speech • braille • screen magnifiers • assistive

    technology • desired result: ease-of-use, navigable, well-structured
  11. 16.

    WEB CRAWLERS • valid code • semantic web • site

    architecture • site restrictions • desired result: structure, meaning, organization
  12. 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
  13. 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!
  14. 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?
  15. 24.
  16. 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/)
  17. 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
  18. 29.

    TOOLS • Code: Google Developer Tools, FireBug • Optimization: PageSpeed,

    YSlow • Accessibility: Fangs, Accessibility Dev Tools
  19. 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
  20. 31.