High Performance Web Design
35 likes•9,722 views
The document discusses high performance web design. It covers measuring performance using tools like YSlow and PageSpeed, as well as techniques to improve performance such as reducing HTTP requests by combining scripts and stylesheets, using CSS sprites, and inline images. The document also discusses how performance impacts businesses and provides examples of component weights and grades for different websites according to YSlow rules. It emphasizes the importance of clear objectives, consistent design, and clean code for building high performance sites.
High Performance Web Design
- 1. High Performance Web Design Koji Ishimoto Web Designer October 24, 2009 CSS Nite in ISHIKAWA Twitter:#CSSNiteIshikawa
- 3. Agenda
- 4. 1. What’s High Performance?
- 5. Essential Knowledge for Frontend Engineers
- 7. 2. Why High Performance?
- 8. +500ms 20% fewer searches
- 9. +100ms 1% drop in sales
- 10. Page views 11% Conversions 7% Customer satisfaction 16%
- 11. Response Times Jakob Nielson
- 12. Time is Money
- 13. 3. How do you measure it?
- 14. Performance Tools Packet Sniffers Performance Analyzers
- 15. Packet Sniffers
- 16. Fiddler Runs on Microsoft Windows
- 17. Firebug Net Panel Firefox add-on
- 18. Web Inspector Resources Panel Safari’s Web Inspector
- 20. Page Speed Firefox add-on
- 21. YSlow for Firebug Firefox add-on
- 22. Grade
- 23. Components Statistics
- 24. YSlow Grade Grade (score) Components Weights Yahoo! C (77) 28 889.4k Google A (97) 4 22.9k YouTube C (71) 24 178.0k Rakuten E (55) 111 940.2k Livedoor D (68) 71 367.1k Goo E (59) 61 275.8k Amazon D (67) 71 399.2k 2009/10/14 YSlow Ruleset applied: Classic(V1)
- 27. How to Use
- 28. You can’t improve what you can’t measure
- 29. 4. What should I do to improve?
- 30. 14 Steps to Faster Loading Web Sites
- 31. 20 More Best Practices
- 33. Too Many!
- 34. Make Fewer HTTP Requests
- 35. What’s HTTP Requests? Images Scripts Stylesheets Flash
- 36. Make Fewer HTTP Requests Image Maps CSS Sprites CSS Inline Images Combined Scripts and Stylesheets
- 38. Space Pen
- 39. Design Solutions
- 41. 5 Planes Model Jesse James Garrett
- 43. Visual Design Interface Design Navigation Design Information Design
- 44. Feng-GUI V2 Heatmap
- 47. CSS Nite Banner Test Original +116% +24.4%
- 49. Design is Not Decoration
- 51. Interface Design Navigation Design Information Design Interaction Design Information Architecture Functional Specifications Content Requirements
- 52. Spry Google Web Toolkit MooTools Ext JS MochiKit Dojo jQuery Prototype script.aculo.us Yahoo! User Interface Library
- 54. Web Analytics
- 58. Functional Specifications Content Requirements User Needs Site Objectives
- 60. Visitor Attention and Web Page Exposure
- 61. Why Web Users Scan Instead of Read Jakob Nielson
- 63. iPod Experience
- 64. One Page One Theme One Screen
- 65. Know What You Want
- 66. 5. Conclusion
- 67. Clear Objectives
- 69. Clean Code
- 71. Thank you!
- 72. See Also • http://warikiru.blogspot.com/2009/05/yslow-20-release.html • http://warikiru.blogspot.com/2009/03/web-site-performance-seminar-at-gomez.html • http://warikiru.blogspot.com/2008/12/design-fast-websites-dont-blame-rounded.html • http://warikiru.blogspot.com/2008/12/understanding-progressive-enhancement.html • http://warikiru.blogspot.com/2008/09/visitor-attention-and-web-page-exposure.html • http://www.ideaxidea.com/archives/2008/03/37_signals.html • http://journal.mycom.co.jp/news/2008/03/27/016/index.html • http://coliss.com/articles/build-websites/operations/web-performance-best-practices-from-google.html • Web — 14 • — • —5 • Design rule index— 100 • Even Faster Web Sites: Essential Knowledge for Frontend Engineers
- 73. Credits • http://www.flickr.com/photos/kenhurlford/986744061/ • http://www.flickr.com/photos/generated/99991779/ • http://www.flickr.com/photos/comphacker/3177112563/ • http://www.flickr.com/photos/jeffbelmonte/8228640/ • http://www.flickr.com/photos/pinksherbet/3206805049/ • http://www.flickr.com/photos/eflon/3465042138/ • http://www.flickr.com/photos/mikebaird/332877581/ • http://www.flickr.com/photos/dm-set/3493848714/ • http://www.flickr.com/photos/runtcake/2606448656/ • http://www.flickr.com/photos/jking89/3291408977/ • http://www.flickr.com/photos/wrote/2340192847/ • http://www.flickr.com/photos/qmnonic/266203795/ • http://www.flickr.com/photos/aubergene/380451857/ • http://www.flickr.com/photos/wolfgangstaudt/2051232504/ • http://www.flickr.com/photos/wwworks/1384954600/ • http://www.flickr.com/photos/nicole_hugo/3478088864/ • http://www.flickr.com/photos/scragz/2718035962/ • http://www.flickr.com/photos/elgrandee/2458845042/ • http://ja.wikipedia.org/wiki/ %E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:Jakob_Nielsen_1.jpg