Your SlideShare is downloading. ×
0
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Long Life Web Performance Optimization
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Long Life Web Performance Optimization

2,230

Published on

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

No Downloads
Views
Total Views
2,230
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
12
Comments
0
Likes
2
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. 心理学から考えるWebパフォーマンス Long LifeWeb Performance Optimization Koji Ishimoto Web Designer September 25, 2010 dotcoder session 4 October 16, 2010 WCAF Vol.4
  • 2. Machine機械は変わる Human人間は変わらない News最近のパフォーマンス事情 Practiceプラクティス Conclusionまとめ
  • 3. Web Performance is Dead?
  • 4. Web Performance News W3C Web Performance WG API for Measuring Performance Boomerang.js Beyond Design
  • 5. Web Performance News W3C Web Performance WG API for Measuring Performance Boomerang.js Beyond Design
  • 6. Navigation Timing Resource Timing User Timing Web Performance News W3C Web Performance WG API for Measuring Performance Boomerang.js Beyond Design
  • 7. PhilipTellis at Yahoo! Web Performance News W3C Web Performance WG API for Measuring Performance Boomerang.js Beyond Design
  • 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. 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. Web Performance News W3C Web Performance WG API for Measuring Performance Boomerang.js Beyond Design
  • 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. WPO常に最重要課題である
  • 13. The Machine Improve
  • 14. Moore’s Law
  • 15. イメージマップ CSSスプライト インライン画像 スクリプトおよびスタイルシートの結合 HTTPリクエストを減らす
  • 16. Reducing HTTP Requests CSS 3 Application Cache Resource Package SPDY iPhone4をCSS3で描いてみた! - Re:Dzine IE8 Safari
  • 17. Web Metrics: Number of Resources by Google other 4.21 Styleshhets 3.22 Scripts 7.09 Images 29.39
  • 18. Reducing HTTP Requests CSS 3 Application Cache Resource Package SPDY
  • 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. Reducing HTTP Requests CSS 3 Application Cache Resource Package SPDY
  • 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. SPDY: An experimental protocol for a faster web Reducing HTTP Requests CSS 3 Application Cache Resource Package SPDY
  • 23. SPDY: An experimental protocol for a faster web 多重化ストリーム リクエストの優先付け HTTPヘッダー圧縮 Reducing HTTP Requests CSS 3 Application Cache Resource Package SPDY
  • 24. ( ・ω・`)...常に走り続けなければならない
  • 25. The Human Doesn’t Change
  • 26. >>>
  • 27. Perception認知・知覚・感受・体感
  • 28. チェッカーシャドウ錯視
  • 29. チェッカーシャドウ錯視 #6B6B6B
  • 30. エビングハウス錯視
  • 31. エビングハウス錯視
  • 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. 年齢 地理的条件 文化・気候 体温 Time Perception
  • 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. Speedスピードは重要じゃない!?
  • 36. 1934年 フィウメで生まれる 1956年 アメリカ合衆国に渡る 1970年 シカゴ大学心理学科教授 1999年 シカゴ大学を定年退職 クレアモント大学院大学教授に就任 Mihaly Csikszentmihalyi
  • 37. flow
  • 38. 1つの活動に深く没入しているので 他の何ものも問題とならなくなる状態 注意が自由に個人の目標達成のために 投射されている状態 What is “FLOW”?
  • 39. 明確な目的 専念と集中 活動と意識の融合 時間感覚のゆがみ 直接的で即座な反応 能力の水準と難易度とのバランス 自分で制御している感覚 活動に本質的な価値がある Components of Flow
  • 40. 明確な目的 専念と集中 活動と意識の融合 時間感覚のゆがみ 直接的で即座な反応 能力の水準と難易度とのバランス 自分で制御している感覚 活動に本質的な価値がある Components of Flow
  • 41. ( ・ω・`)...人間は曖昧である
  • 42. Practice
  • 43. Interface
  • 44. DesigningWebInterfaces 直接的で即座な反応 自分で制御している感覚
  • 45. Feedbackフィードバック
  • 46. Feedback Pattern Live Preview Progressive Rendering Progress Indication TWITTER PASSWORD CONFIGURATION
  • 47. Feedback Pattern Live Preview Progressive Rendering Progress Indication
  • 48. Visual Header - Fast to compute Results - Slower to compute
  • 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. Feedback Pattern Live Preview Progressive Rendering Progress Indication
  • 51. Clear navigation Match challenge to skills Simplicity Importance Design for fun and utility Avoid cutting-edge technology Minimize animation FlowinWebDesign
  • 52. Conclusion
  • 53. Browserブラウザは進化し続けている
  • 54. Psychology知覚や認知についても考える
  • 55. Long Life Web Performance Optimization
  • 56. Thank you! http://t32k.com/mol http://twitter.com/t32k
  • 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. 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

×