Your SlideShare is downloading. ×

High Performance Web Design

20,490

Published on

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

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

Published in: Design
3 Comments
32 Likes
Statistics
Notes
No Downloads
Views
Total Views
20,490
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
112
Comments
3
Likes
32
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. High Performance Web Design Koji Ishimoto Web Designer October 24, 2009 CSS Nite in ISHIKAWA Twitter:#CSSNiteIshikawa
  • 2. Agenda            
  • 3. 1. What’s High Performance?
  • 4. Essential Knowledge for Frontend Engineers
  • 5. 80:20 Browser : Server
  • 6. 2. Why High Performance?
  • 7. +500ms 20% fewer searches
  • 8. +100ms 1% drop in sales
  • 9. Page views 11% Conversions 7% Customer satisfaction 16%
  • 10. Response Times       Jakob Nielson
  • 11. Time is Money
  • 12. 3. How do you measure it?
  • 13. Performance Tools   Packet Sniffers   Performance Analyzers
  • 14. Packet Sniffers
  • 15. Fiddler Runs on Microsoft Windows
  • 16. Firebug Net Panel Firefox add-on
  • 17. Web Inspector Resources Panel Safari’s Web Inspector
  • 18. Performance Analyzers
  • 19. Page Speed Firefox add-on
  • 20. YSlow for Firebug Firefox add-on
  • 21. Grade
  • 22. Components Statistics
  • 23. 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)
  • 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)
  • 25. How to Use            
  • 26. You can’t improve what you can’t measure
  • 27. 4. What should I do to improve?
  • 28. 14 Steps to Faster Loading Web Sites                            
  • 29. 20 More Best Practices                                        
  • 30. Performance Best Practices                                          
  • 31. Too Many!
  • 32. Make Fewer HTTP Requests
  • 33. What’s HTTP Requests?   Images   Scripts   Stylesheets   Flash
  • 34. Make Fewer HTTP Requests   Image Maps   CSS Sprites CSS   Inline Images   Combined Scripts and Stylesheets
  • 35. Space Pen
  • 36. Design Solutions
  • 37.      
  • 38. 5 Planes Model Jesse James Garrett
  • 39.      
  • 40. Visual Design Interface Design Navigation Design Information Design
  • 41. Case
  • 42. Feng-GUI V2 Heatmap
  • 43. CSS Nite Banner Test Original +116% +24.4%
  • 44. COOKPAD Premium Services
  • 45. Design is Not Decoration
  • 46.      
  • 47. Interface Design Navigation Design Information Design Interaction Design Information Architecture Functional Specifications Content Requirements
  • 48. Spry Google Web Toolkit Ext JS MochiKit MooTools Dojo jQuery Prototype script.aculo.us Yahoo! User Interface Library
  • 49. Web Analytics      
  • 50. Know Your Audience
  • 51.      
  • 52. Functional Specifications Content Requirements User Needs Site Objectives
  • 53. Visitor Attention and Web Page Exposure
  • 54. Why Web Users Scan Instead of Read         Jakob Nielson
  • 55. iPod Experience
  • 56. One Page One Theme One Screen
  • 57. Know What You Want
  • 58. 5. Conclusion
  • 59. Clear Objectives
  • 60. Consistent Design
  • 61. Clean Code
  • 62. High Performance Site!
  • 63. Thank you!
  • 64. 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
  • 65. 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

×