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

Navigation Timing

Resource Timing

User Timing




Boomerang.js

Beyond Design

Philip Tellis at Yahoo!




Boomerang.js

Beyond Design


<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>




Boomerang.js

Beyond Design




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


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-----------------------------------


CSS 3

Application Cache

Resource Package

SPDY


CSS 3

Application Cache

Resource Package

SPDY

SPDY: An experimental protocolfor a faster web


CSS 3

Application Cache

Resource Package

SPDY

SPDY: An experimental protocolfor a faster web

多重化ストリーム

リクエストの優先付け

HTTPヘッダー圧縮


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

“１つの活動に深く没入しているので

他の何ものも問題とならなくなる状態

注意が自由に個人の目標達成のために

投射されている状態 ”

What is “FLOW”?

明確な目的

専念と集中

活動と意識の融合

時間感覚のゆがみ

直接的で即座な反応

能力の水準と難易度とのバランス

自分で制御している感覚

活動に本質的な価値がある

Components of Flow

(‘･ω･` ）...人間は曖昧である

Practice

Interface

Designing Web Interfaces直接的で即座な反応

自分で制御している感覚

Feedbackフィードバック

Feedback Pattern

Live Preview

Progressive Rendering

Progress Indication

TWITTERPASSWORDCONFIGURATION

Feedback Pattern

Live Preview


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


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://t32k.com/mol/




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://ja.wikipedia.org/wiki/%E3%83%A0%E3%83%BC%E3%82%A2%E3%81%AE%E6%B3%95%E5%89%87

http://ja.wikipedia.org/wiki/%E3%83%A0%E3%83%BC%E3%82%A2%E3%81%AE%E6%B3%95%E5%89%87







http://ja.wikipedia.org/wiki/%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC%E3%82%B7%E3%83%A3%E3%83%89%E3%83%BC%E9%8C%AF%E8%A6%96

http://ja.wikipedia.org/wiki/%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC%E3%82%B7%E3%83%A3%E3%83%89%E3%83%BC%E9%8C%AF%E8%A6%96

http://ja.wikipedia.org/wiki/%E3%82%A8%E3%83%93%E3%83%B3%E3%82%B0%E3%83%8F%E3%82%A6%E3%82%B9%E9%8C%AF%E8%A6%96

http://ja.wikipedia.org/wiki/%E3%82%A8%E3%83%93%E3%83%B3%E3%82%B0%E3%83%8F%E3%82%A6%E3%82%B9%E9%8C%AF%E8%A6%96





http://ja.wikipedia.org/wiki/%E3%83%95%E3%83%AD%E3%83%BC

http://ja.wikipedia.org/wiki/%E3%83%95%E3%83%AD%E3%83%BC



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/prettypetal/4306983458/

Credits



























