High Performance Web Design

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%

> 心理的・感情的な違和感を感じないのは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

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

表層 ‒ 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

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

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