high performance web design
DESCRIPTION
デザインから考えるハイパフォーマンスWebサイトTRANSCRIPT
High Performance Web Design~デザインから考えるハイパフォーマンスWebサイト ~
Koji IshimotoWeb Designer
October 24, 2009CSS Nite in ISHIKAWA
Twitter:#CSSNiteIshikawa
Blog : MOL
Twitter : t32k
1. パフォーマンスって？
2. なぜパフォーマンスなの？
3. どうやって計測するの？
4. 対策はどうすればよいの？
5. まとめ
6. 質疑応答
Agenda本日のアジェンダ
1. What’s High Performance?
Essential Knowledge for Frontend Engineers
80:20Browser : Server
2. Why High Performance?
0.5秒遅くなると、検索数が20%減少する
+500ms 20% fewer searches
0.1秒遅くなると、売り上げが1%減少する
+100ms 1% drop in sales
一般的に表示スピードが1秒遅くなると、
PVは11%、CVは7%、顧客満足度は16%ダウンする
Page views
Conversions
Customer satisfaction 16%
7%
11%
> 心理的・感情的な違和感を感じないのは0.1秒まで
> 思考の流れが妨げられないのは1秒まで
> 注意力を維持できる限界の時間は10秒まで
Jakob Nielson
Response Times反応時間の3つの重要限界
Time is Money
3. How do you measure it?
Performance Toolsパフォーマンスツール
> Packet Sniffers パケットスニファ
> Performance Analyzers パフォーマンスアナライザ
Packet Sniffers
FiddlerRuns on Microsoft Windows
Firebug Net PanelFirefox add-on
Web Inspector Resources PanelSafari’s Web Inspector
Performance Analyzers
Page SpeedFirefox add-on
YSlow for FirebugFirefox add-on
Grade
Components
Statistics
Grade (score) Components Weights
Yahoo! C (77) 28 889.4k
Google A (97) 4 22.9k
YouTube C (71) 24 178.0k
Rakuten E (55) 111 940.2k
Livedoor D (68) 71 367.1k
Goo E (59) 61 275.8k
Amazon D (67) 71 399.2k
2009/10/14 YSlow Ruleset applied: Classic(V1)
YSlow Grade
1. Firebugをインストールする
2. YSlowをインストールする
3. 計測したいページを表示する
4. ステータスバーのYSlowアイコンをクリック
5. Run Test ボタンを押す
6. 評価内容をチェックする
以下、3 ‒ 6の繰り返し
How to UseYSlowの使い方
You can’t improve what you can’t measure
4. What should I do to improve?
1. HTTPリクエストを減らす2. CDNを使う3. Expiresヘッダを設定する4. コンポーネントをgzipする5. スタイルシートは先頭に置く6. スクリプトは最後に置く7. CSS expressionの使用を控える8. JavaScriptとCSSは外部ファイル化する9. DNSルックアップを減らす10. JavaScriptを縮小化する11. リダイレクトを避ける12. スクリプトを重複させない13. ETagの設定を変更する14. AJAXをキャッシュ可能にする
14 Steps to Faster Loading Web Sites高速サイトを実現するための14のルール
1. バッファは早期にフラッシュする
2. AJAXリクエストにGETを使う
3. コンポーネントのポストロード
4. コンテンツのプレロード
5. DOM要素数の削減
6. ドメインをまたがってコンテンツを分離
7. iframeの数を最小化
8. 404を作ってしまわない
9. クッキーサイズを最小化
10. コンポーネントに対してクッキーフリードメインを使う
1. DOMアクセスを最小化
2. かしこいイベントハンドラを用意
3. @importよりもlinkを使う
4. フィルタの使用は避ける
5. 画像を最適化
6. CSS分割を最適化
7. HTMLにおいて画像をスケールさせない
8. faviconを小さく作成しさらにキャッシュを有効にする
9. 25KB以下にコンポーネントをキープする
10. コンポーネントを複数のドキュメントへパックする
20 More Best PracticesYSlowでA評価後の20のルール
1. ブラウザのキャッシュを活用
2. プロキシのキャッシュを活用
3. DNSルックアップを減らす
4. リダイレクトを減らす
5. 外部JavaScriptはまとめる
6. 外部CSSはまとめる
7. スタイルシートとスクリプトを最適化
8. 異なるホストから並列ダウンロード
9. クッキーのサイズを減らす
10. クッキーレスのドメインからスタティックなリソースをサポート
11. gzipでリソースを圧縮
12. 使用していないCSSは取り除く
13. JavaScriptのロードの遅延
14. JavaScriptの縮小化
15. CSSの縮小化
16. 画像の最適化
17. 一貫したURLからリソースを提供
18. CSSのセレクタは効率よく使用
19. CSS expressionは避ける
20. CSSはheadに配置
21. 画像のサイズ指定
Performance Best Practicesウェブパフォーマンスベストプラクティス
Too Many!
HTTPリクエストを減らす
Make Fewer HTTP Requests
> Images 画像
> Scripts スクリプト
> Stylesheets スタイルシート
> Flash フラッシュ
What’s HTTP Requests?HTTPリクエストとは？
> Image Maps イメージマップ
> CSS Sprites CSSスプライト
> Inline Images インライン画像
> Combined Scripts and Stylesheets スクリプトおよびスタイルシートの結合
Make Fewer HTTP RequestsHTTPリクエストを減らす
アメリカのNASAは、宇宙飛行士を最初に宇宙に送り込んだとき、無重力状態ではボールペンが書けないことを発見した。
これではボールペンを持って行っても役に立たない。
NASAの科学者たちはこの問題に立ち向かうべく、10年の歳月と120億ドルの開発費をかけて研究を重ねた。
その結果ついに、無重力でも上下逆にしても水の中でも氷点下でも摂氏300度でも、どんな状況下でもどんな表面にでも書けるボールペンを開発した！！
一方、ロシアは鉛筆を使った。
Space Pen
Design Solutions
1.目立たせたい！
2.多機能にしたい！
3.とりあえず、全部載せたい！
5 Planes ModelJesse James Garrett
1.目立たせたい！
2.多機能にしたい！
3.とりあえず、全部載せたい！
表層 ‒ Surface
Visual Design
骨格 - Skeleton
Interface Design
Navigation Design
Information Design
Feng-GUI V2Heatmap
+116% +24.4%Original
CSS Nite Banner Test2009/09/07 -2009/10/23 test:3271 conversion:71
COOKPAD Premium Services出典：CSS Nite in Ginza, Vol.32 成果を上げるユーザ中心ウェブサイト戦略 遠藤直紀
バナー画像の3倍の効果を上げる
＜
Design is Not Decoration
1.目立たせたい！
2.多機能にしたい！
3.とりあえず、全部載せたい！
骨格 - Skeleton Interface Design Navigation Design Information Design
構造 - Structure Interaction Design Information
Architecture
要件 - Scope
Functional Specifications
Content Requirements
AJAXライブラリの普及
SpryExt JS
DojojQueryYahoo! User Interface Library
PrototypeMochiKitMooTools
Google Web Toolkit
script.aculo.us
Rich Interaction
1. Google Analytics
2. Google Website Optimizer
3. User Heat
.
.
.
Web Analyticsウェブ解析
“何かを追加するのと、価値を追加するのはまったく別のことです
我々の仕事は価値を提供しているでしょうか。ときとして価値を追加することは何かを取り去ることでもあります。
フライドポテトにケチャップをかけすぎれば台無しになります。
価値とは加えることと取り去ることのバランスなのです。”
37 Signalsが仕事中に自問していること
Know Your Audience
1.目立たせたい！
2.多機能にしたい！
3.とりあえず、全部載せたい！
要件 - Scope
Functional Specifications
Content Requirements
戦略 - Strategy
User Needs
Site Objectives
長すぎるページ
Visitor Attention and Web Page ExposureClickTale Scrolling Research Report V2.0 - Part 2
> コンピュータ画面で読むのは目が疲れる。
> ウェブはユーザ主導型のメディアである。
> 他の何億ものページと競争しなくてはならない。
> 現代生活はあわただしい。
Jakob Nielson
Why Web Users Scan Instead of Readなぜウェブユーザは流し読みするのか
決断に要する時間は、選択肢が増えるほど長くなる。ヒック・ハイマンの法則
iPod Experience
1ページ 1テーマ 1スクリーン
One Page One Theme One Screen
Know What You Want
まとめ
5. Conclusion
Clear Objectives明確な目的
Consistent Design一貫性のあるデザイン
Clean Code簡潔なコード
High Performance Site!ハイパフォーマンスサイト
Thank you!
• http://warikiru.blogspot.com/2009/05/yslow-20-release.html
• http://warikiru.blogspot.com/2009/03/web-site-performance-seminar-at-gomez.html
• http://warikiru.blogspot.com/2008/12/design-fast-websites-dont-blame-rounded.html
• http://warikiru.blogspot.com/2008/12/understanding-progressive-enhancement.html
• http://warikiru.blogspot.com/2008/09/visitor-attention-and-web-page-exposure.html
• http://www.ideaxidea.com/archives/2008/03/37_signals.html
• http://journal.mycom.co.jp/news/2008/03/27/016/index.html
• http://coliss.com/articles/build-websites/operations/web-performance-best-practices-from-google.html
• ハイパフォーマンスWebサイト —高速サイトを実現する14のルール
• デザイニング・ウェブナビゲーション —最適なユーザーエクスペリエンスの設計
• ウェブ戦略としての「ユーザーエクスペリエンス」—5つの段階で考えるユーザー中心デザイン
• Design rule index—デザイン、新・100の法則
• Even Faster Web Sites: Essential Knowledge for Frontend Engineers
See Also
• http://www.flickr.com/photos/kenhurlford/986744061/
• http://www.flickr.com/photos/generated/99991779/
• http://www.flickr.com/photos/comphacker/3177112563/
• http://www.flickr.com/photos/jeffbelmonte/8228640/
• http://www.flickr.com/photos/pinksherbet/3206805049/
• http://www.flickr.com/photos/eflon/3465042138/
• http://www.flickr.com/photos/mikebaird/332877581/
• http://www.flickr.com/photos/dm-set/3493848714/
• http://www.flickr.com/photos/runtcake/2606448656/
• http://www.flickr.com/photos/jking89/3291408977/
• http://www.flickr.com/photos/wrote/2340192847/
• http://www.flickr.com/photos/qmnonic/266203795/
• http://www.flickr.com/photos/aubergene/380451857/
• http://www.flickr.com/photos/wolfgangstaudt/2051232504/
• http://www.flickr.com/photos/wwworks/1384954600/
• http://www.flickr.com/photos/nicole_hugo/3478088864/
• http://www.flickr.com/photos/scragz/2718035962/
• http://www.flickr.com/photos/elgrandee/2458845042/
• http://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:Jakob_Nielsen_1.jpg
Credits