デザインから考えるハイパフォーマンスWebサイト

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

6. 80:20
Browser : Server

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

19. Performance Analyzers

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

32. Performance 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%

48. COOKPAD Premium Services

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

56. Know Your Audience

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

68. Consistent Design

69. Clean Code

70. High Performance Site!

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