Your SlideShare is downloading. ×
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,172

Published on

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

No Downloads
Views
Total Views
2,172
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

×