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.

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!