Long Life Web Performance Optimization
-
Upload
koji-ishimoto -
Category
Design
-
view
105 -
download
0
description
Transcript of Long Life Web Performance Optimization
~ 心理学から考えるWebパフォーマンス ~Long Life Web Performance Optimization
Koji IshimotoWeb Designer
September 25, 2010dotcoder session 4
October 16, 2010WCAF Vol.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
Boomerang.js
Beyond Design
Philip Tellis at Yahoo!
Web Performance News
W3C Web Performance WG
API for Measuring Performance
Boomerang.js
Beyond Design
Philip Tellis 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
Philip Tellis 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
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 users than I do with power users. ”
Fred Wilson (Union Square Ventures)
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 Resourcesby Google
other4.21
Styleshhets3.22
Scripts7.09
Images29.39
Reducing HTTP Requests
CSS 3
Application Cache
Resource Package
SPDY
<!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
Reducing HTTP Requests
CSS 3
Application Cache
Resource Package
SPDY
<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
SPDY: An experimental protocolfor a faster web
Reducing HTTP Requests
CSS 3
Application Cache
Resource Package
SPDY
SPDY: An experimental protocolfor a faster web
多重化ストリーム
リクエストの優先付け
HTTPヘッダー圧縮
Reducing HTTP Requests
CSS 3
Application Cache
Resource Package
SPDY
(‘・ω・` )...常に走り続けなければならない
The Human Doesn’t Change
>>>
Perception認知・知覚・感受・体感
チェッカーシャドウ錯視
チェッカーシャドウ錯視
#6B6B6B
エビングハウス錯視
エビングハウス錯視
20 year old are in reality
3:0360 year old are in reality
3:40
Perceived 3 minutes
Why time flies in old age - New Scientist
年齢
地理的条件
文化・気候
体温
Time Perception
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
Speedスピードは重要じゃない!?
1934年 フィウメで生まれる
1956年 アメリカ合衆国に渡る
1970年 シカゴ大学心理学科教授
1999年 シカゴ大学を定年退職
クレアモント大学院大学教授に就任
Mihaly Csikszentmihalyi
!ow
“1つの活動に深く没入しているので
他の何ものも問題とならなくなる状態
注意が自由に個人の目標達成のために
投射されている状態 ”
What is “FLOW”?
明確な目的
専念と集中
活動と意識の融合
時間感覚のゆがみ
直接的で即座な反応
能力の水準と難易度とのバランス
自分で制御している感覚
活動に本質的な価値がある
Components of Flow
明確な目的
専念と集中
活動と意識の融合
時間感覚のゆがみ
直接的で即座な反応
能力の水準と難易度とのバランス
自分で制御している感覚
活動に本質的な価値がある
Components of Flow
(‘・ω・` )...人間は曖昧である
Practice
Interface
Designing Web Interfaces直接的で即座な反応
自分で制御している感覚
Feedbackフィードバック
Feedback Pattern
Live Preview
Progressive Rendering
Progress Indication
TWITTERPASSWORDCONFIGURATION
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! +0.7%
Pagination! +2.3%
Satisfaction! +0.7%
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
Minimize animation
Flow in Web Design
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/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
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