Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Long Life Web Performance Optimization

3,786 views

Published on

Published in: Design, Technology
  • Be the first to comment

Long Life Web Performance Optimization

  1. 1. 心理学から考えるWebパフォーマンス Long LifeWeb Performance Optimization Koji Ishimoto Web Designer September 25, 2010 dotcoder session 4 October 16, 2010 WCAF Vol.4
  2. 2. Machine機械は変わる Human人間は変わらない News最近のパフォーマンス事情 Practiceプラクティス Conclusionまとめ
  3. 3. Web Performance is Dead?
  4. 4. Web Performance News W3C Web Performance WG API for Measuring Performance Boomerang.js Beyond Design
  5. 5. Web Performance News W3C Web Performance WG API for Measuring Performance Boomerang.js Beyond Design
  6. 6. Navigation Timing Resource Timing User Timing Web Performance News W3C Web Performance WG API for Measuring Performance Boomerang.js Beyond Design
  7. 7. PhilipTellis at Yahoo! Web Performance News W3C Web Performance WG API for Measuring Performance Boomerang.js Beyond Design
  8. 8. PhilipTellis at Yahoo! <head> <script type=”text/javascript”> var start = (new Date).getTime(); </script> </head> <body> <script type=”text/javascript”> var pageLoad = (new Date).getTime() - start; </script> </body> Web Performance News W3C Web Performance WG API for Measuring Performance Boomerang.js Beyond Design
  9. 9. PhilipTellis at Yahoo! <script src="boomerang.js"></script> <script type="text/javascript"> BOOMR.init({ user_ip: "<user's ip address>", beacon_url: "/path/to/beacon.php" }); </script> Web Performance News W3C Web Performance WG API for Measuring Performance Boomerang.js Beyond Design
  10. 10. Web Performance News W3C Web Performance WG API for Measuring Performance Boomerang.js Beyond Design
  11. 11. “ Speed is the most important feature. If your application is slow, people won’t use it. I see this more with mainstream users than I do with power users. ” Fred Wilson (Union SquareVentures)
  12. 12. WPO常に最重要課題である
  13. 13. The Machine Improve
  14. 14. Moore’s Law
  15. 15. イメージマップ CSSスプライト インライン画像 スクリプトおよびスタイルシートの結合 HTTPリクエストを減らす
  16. 16. Reducing HTTP Requests CSS 3 Application Cache Resource Package SPDY iPhone4をCSS3で描いてみた! - Re:Dzine IE8 Safari
  17. 17. Web Metrics: Number of Resources by Google other 4.21 Styleshhets 3.22 Scripts 7.09 Images 29.39
  18. 18. Reducing HTTP Requests CSS 3 Application Cache Resource Package SPDY
  19. 19. <!DOCTYPE HTML> <html manifest="cache.manifest"> cache.manifest ----------------------------------- CACHE MANIFEST help.html style/default.css images/logo.png ----------------------------------- Reducing HTTP Requests CSS 3 Application Cache Resource Package SPDY
  20. 20. Reducing HTTP Requests CSS 3 Application Cache Resource Package SPDY
  21. 21. <link rel="resource-package" type="application/zip" href="site-resources.zip" /> manifest.txt ----------------------------------- javascript/jquery.js styles/reset.css styles/main.css images/save.png images/info.png ----------------------------------- Reducing HTTP Requests CSS 3 Application Cache Resource Package SPDY
  22. 22. SPDY: An experimental protocol for a faster web Reducing HTTP Requests CSS 3 Application Cache Resource Package SPDY
  23. 23. SPDY: An experimental protocol for a faster web 多重化ストリーム リクエストの優先付け HTTPヘッダー圧縮 Reducing HTTP Requests CSS 3 Application Cache Resource Package SPDY
  24. 24. ( ・ω・`)...常に走り続けなければならない
  25. 25. The Human Doesn’t Change
  26. 26. >>>
  27. 27. Perception認知・知覚・感受・体感
  28. 28. チェッカーシャドウ錯視
  29. 29. チェッカーシャドウ錯視 #6B6B6B
  30. 30. エビングハウス錯視
  31. 31. エビングハウス錯視
  32. 32. 20 year old are in reality 3:03 60 year old are in reality 3:40 Perceived 3 minutes Why time flies in old age - New Scientist
  33. 33. 年齢 地理的条件 文化・気候 体温 Time Perception
  34. 34. About.com, rated slowest by our users, was actually the fastest site (average: 8 seconds). Amazon.com, rated as one of the fastest sites by users, was really the slowest (average: 36 seconds). The Truth About Download Time
  35. 35. Speedスピードは重要じゃない!?
  36. 36. 1934年 フィウメで生まれる 1956年 アメリカ合衆国に渡る 1970年 シカゴ大学心理学科教授 1999年 シカゴ大学を定年退職 クレアモント大学院大学教授に就任 Mihaly Csikszentmihalyi
  37. 37. flow
  38. 38. 1つの活動に深く没入しているので 他の何ものも問題とならなくなる状態 注意が自由に個人の目標達成のために 投射されている状態 What is “FLOW”?
  39. 39. 明確な目的 専念と集中 活動と意識の融合 時間感覚のゆがみ 直接的で即座な反応 能力の水準と難易度とのバランス 自分で制御している感覚 活動に本質的な価値がある Components of Flow
  40. 40. 明確な目的 専念と集中 活動と意識の融合 時間感覚のゆがみ 直接的で即座な反応 能力の水準と難易度とのバランス 自分で制御している感覚 活動に本質的な価値がある Components of Flow
  41. 41. ( ・ω・`)...人間は曖昧である
  42. 42. Practice
  43. 43. Interface
  44. 44. DesigningWebInterfaces 直接的で即座な反応 自分で制御している感覚
  45. 45. Feedbackフィードバック
  46. 46. Feedback Pattern Live Preview Progressive Rendering Progress Indication TWITTER PASSWORD CONFIGURATION
  47. 47. Feedback Pattern Live Preview Progressive Rendering Progress Indication
  48. 48. Visual Header - Fast to compute Results - Slower to compute
  49. 49. Visual Header - Fast to compute Results - Slower to compute Time to Click ~9% faster Query refinement +2.2% Clicks overall! +0.7% Pagination! +2.3% Satisfaction! +0.7%
  50. 50. Feedback Pattern Live Preview Progressive Rendering Progress Indication
  51. 51. Clear navigation Match challenge to skills Simplicity Importance Design for fun and utility Avoid cutting-edge technology Minimize animation FlowinWebDesign
  52. 52. Conclusion
  53. 53. Browserブラウザは進化し続けている
  54. 54. Psychology知覚や認知についても考える
  55. 55. Long Life Web Performance Optimization
  56. 56. Thank you! http://t32k.com/mol http://twitter.com/t32k
  57. 57. http://standards.mitsue.co.jp/archives/001473.html http://yahoo.github.com/boomerang/doc/ http://www.google.com/intl/ja/events/io/2010/sessions/beyond-design-user-experience.html http://ja.wikipedia.org/wiki/ムーアの法則 http://code.google.com/intl/ja/speed/articles/web-metrics.html http://hacks.mozilla.org/2009/11/a-proposal-resource-packages-to-improve-performance/ http://www.chromium.org/spdy http://ja.wikipedia.org/wiki/チェッカーシャドウ錯視 http://ja.wikipedia.org/wiki/エビングハウス錯視 http://www.newscientist.com/article/mg15220571.700-why-time-flies-in-old-age.html http://www.uie.com/articles/download_time/ http://ja.wikipedia.org/wiki/フロー http://radar.oreilly.com/2009/06/bing-and-google-agree-slow-pag.html URLs
  58. 58. http://www.flickr.com/photos/uxud/3838080583/ http://www.flickr.com/photos/kretyen/2526860812/ http://en.wikipedia.org/wiki/File:PPTMooresLawai.jpg http://www.flickr.com/photos/titlap/3787618739/ http://www.flickr.com/photos/thepaperboy/4436923663/ http://www.flickr.com/photos/shiyazuni/3406692752/ http://www.flickr.com/photos/helleum/4350240392/ http://www.flickr.com/photos/mariachily/3382807043/ http://www.klett-cotta.de/uploads/tx_autoren/Csik_schreibtisch.jpg http://www.flickr.com/photos/ficken/2181846165/ http://www.flickr.com/photos/nikio/3899114449/ http://www.flickr.com/photos/the_tahoe_guy/4183278431/ http://www.flickr.com/photos/uxud/4235288699/ http://www.flickr.com/photos/prettypetal/4306983458/ Credits

×