High Performance Web Design

21,260
-1

Published on

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

Published in: Design
3 Comments
36 Likes
Statistics
Notes
No Downloads
Views
Total Views
21,260
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
114
Comments
3
Likes
36
Embeds 0
No embeds

No notes for slide

High Performance Web Design

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

    Clipping is a handy way to collect important slides you want to go back to later.

×