心理学から考えるWebパフォーマンス
Long LifeWeb Performance Optimization
Koji Ishimoto
Web Designer
September 25, 2010
dotcoder session 4
...
Machine機械は変わる
Human人間は変わらない
News最近のパフォーマンス事情
Practiceプラクティス
Conclusionまとめ
Web Performance is Dead?
Web Performance News
W3C Web Performance WG
API for Measuring Performance
Boomerang.js
Beyond Design
Web Performance News
W3C Web Performance WG
API for Measuring Performance
Boomerang.js
Beyond Design
Navigation Timing
Resource Timing
User Timing
Web Performance News
W3C Web Performance WG
API for Measuring Performance
Bo...
PhilipTellis at Yahoo!
Web Performance News
W3C Web Performance WG
API for Measuring Performance
Boomerang.js
Beyond Design
PhilipTellis at Yahoo!
<head>
<script type=”text/javascript”>
var start = (new Date).getTime();
</script>
</head>
<body>
<...
PhilipTellis at Yahoo!
<script src="boomerang.js"></script>
<script type="text/javascript">
BOOMR.init({
user_ip: "<user's...
Web Performance News
W3C Web Performance WG
API for Measuring Performance
Boomerang.js
Beyond Design
“ Speed is the most important feature.
If your application is slow, people won’t
use it. I see this more with mainstream
u...
WPO常に最重要課題である
The Machine Improve
Moore’s Law
イメージマップ
CSSスプライト
インライン画像
スクリプトおよびスタイルシートの結合
HTTPリクエストを減らす
Reducing HTTP Requests
CSS 3
Application Cache
Resource Package
SPDY
iPhone4をCSS3で描いてみた! - Re:Dzine
IE8 Safari
Web Metrics: Number of Resources
by Google
other
4.21
Styleshhets
3.22
Scripts
7.09
Images
29.39
Reducing HTTP Requests
CSS 3
Application Cache
Resource Package
SPDY
<!DOCTYPE HTML>
<html manifest="cache.manifest">
cache.manifest
-----------------------------------
CACHE MANIFEST
help.ht...
Reducing HTTP Requests
CSS 3
Application Cache
Resource Package
SPDY
<link rel="resource-package"
type="application/zip"
href="site-resources.zip" />
manifest.txt
----------------------------...
SPDY:
An experimental protocol
for a faster web
Reducing HTTP Requests
CSS 3
Application Cache
Resource Package
SPDY
SPDY:
An experimental protocol
for a faster web
多重化ストリーム
リクエストの優先付け
HTTPヘッダー圧縮
Reducing HTTP Requests
CSS 3
Application Ca...
( ・ω・`)...常に走り続けなければならない
The Human Doesn’t Change
>>>
Perception認知・知覚・感受・体感
チェッカーシャドウ錯視
チェッカーシャドウ錯視
#6B6B6B
エビングハウス錯視
エビングハウス錯視
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 Scienti...
年齢
地理的条件
文化・気候
体温
Time Perception
About.com, rated slowest by our users,
was actually the fastest site (average: 8 seconds).
Amazon.com, rated as one of the...
Speedスピードは重要じゃない!?
1934年 フィウメで生まれる
1956年 アメリカ合衆国に渡る
1970年 シカゴ大学心理学科教授
1999年 シカゴ大学を定年退職
クレアモント大学院大学教授に就任
Mihaly Csikszentmihalyi
flow
1つの活動に深く没入しているので
他の何ものも問題とならなくなる状態
注意が自由に個人の目標達成のために
投射されている状態
What is “FLOW”?
明確な目的
専念と集中
活動と意識の融合
時間感覚のゆがみ
直接的で即座な反応
能力の水準と難易度とのバランス
自分で制御している感覚
活動に本質的な価値がある
Components of Flow
明確な目的
専念と集中
活動と意識の融合
時間感覚のゆがみ
直接的で即座な反応
能力の水準と難易度とのバランス
自分で制御している感覚
活動に本質的な価値がある
Components of Flow
( ・ω・`)...人間は曖昧である
Practice
Interface
DesigningWebInterfaces
直接的で即座な反応
自分で制御している感覚
Feedbackフィードバック
Feedback Pattern
Live Preview
Progressive Rendering
Progress Indication
TWITTER
PASSWORD
CONFIGURATION
Feedback Pattern
Live Preview
Progressive Rendering
Progress Indication
Visual Header - Fast to compute
Results - Slower to compute
Visual Header - Fast to compute
Results - Slower to compute
Time to Click ~9% faster
Query refinement +2.2%
Clicks overall...
Feedback Pattern
Live Preview
Progressive Rendering
Progress Indication
Clear navigation
Match challenge to skills
Simplicity
Importance
Design for fun and utility
Avoid cutting-edge technology
...
Conclusion
Browserブラウザは進化し続けている
Psychology知覚や認知についても考える
Long Life Web Performance Optimization
Thank you!
http://t32k.com/mol
http://twitter.com/t32k
http://standards.mitsue.co.jp/archives/001473.html
http://yahoo.github.com/boomerang/doc/
http://www.google.com/intl/ja/ev...
http://www.flickr.com/photos/uxud/3838080583/
http://www.flickr.com/photos/kretyen/2526860812/
http://en.wikipedia.org/wiki/...
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Upcoming SlideShare
Loading in …5
×

Long Life Web Performance Optimization

3,170 views

Published on

Published in: Design, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,170
On SlideShare
0
From Embeds
0
Number of Embeds
820
Actions
Shares
0
Downloads
16
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

×