Coding Web Performance

transcript

Coding Web Performance~Webパフォーマンス最適化のためのコーディング手法~

Koji IshimotoWeb Designer

April 17, 2010CSS Nite LP, Disk 9

Twitter:#cssnitelp9

CSS Nite LP, Disk 9 : Coder's Higher

Agendaビジネスインパクトとスタンス

ボトルネックはどこか？

とあるサイトの改善事例

今日のまとめ

ビジネスインパクトとスタンス

Business Impact and Stance

Google Ranking Algorithm2010.04.09

Google AdWords

Google Webmaster Tools

高速サイトがもたらす利益

再訪問数の増加

セッションあたりのPV数増加

コンバージョン率の改善

収益増加

顧客満足度の向上

インフラコスト・帯域幅の節約

Before After

Coder Coder + Performance

コーダー/デザイナーは忙しい

HTML5 / CSS3

JavaScript (jQuery)

Accessibility

Usability

Information Architecture

Web Analytics

Web Performance?

最小限の対策で最大限の効果

Where is the time spent?

HTTPWatch 7.0

Waterfall Chart

リクエストの各段階

Blocking - ブロッキング

DNS Lookup - DNSルックアップ

Connect - 接続

Send - 送信

Wait - 待機

Receieve - 受信

Cashe Read - キャッシュ読み込み

リクエストの各段階

Server

Client

接続の確立データ送信送信完了

最初の接続

最初のHTTPリクエスト

DNSルックアップ

DNS Lookup Connect

データ受信

受信完了

Receive

Waterfall Chart

Wait Time!待機時間

Wait Time!

Internet Explorer 6

Firefox 3.6

ホスト名毎の同時接続数

HTTP/1.1 の仕様では「ひとつのホスト名に対して

同時接続できるコンポーネント数は２つまで」と制限

IE6 IE7 IE8 Fx3.6 Chrome4 Safari4 Opera10

2 2 6 6 6 5 42 2

Waterfall Chart

Internet Explorer 6

Internet Explorer 6 (Blocking)

Blocking Time!ブロッキング

Blocking Time!

HTTPリクエストはコストが高い

Recommend Practice

CSS スプライト

データ URI スキーム

CSS, JS ファイルを結合する

CSS3 プロパティ

奥の手

CSS スプライト

複数の画像を1つの合成画像としてグループ化し

背景の位置指定を使って表示する方法

#globalNav ul li a { display: block; height: 28px; background-image: url(/img/common/hd/bg_globalnav.png);}

#globalNav #home.on a { background-position: 0 -60px;}

#globalNav #info.on a { background-position: -108px -60px;}

#globalNav #news.on a { background-position: -219px -60px;}

#globalNav #business.on a { background-position: -375px -60px;}

Before

CSS スプライト効果

{-150ms

CSS Sprites Non Sprites

スプライトのジレンマ

Pages - ページ数

Maintenance - 保守性

Optimization - 最適化

Maintenance Optimization

HTTP Requests 11-> 3 CSS Sprites

データURIスキーム

外部の画像ファイルを参照することなく

画像をマークアップ中に直接埋め込むことができる

書式 - data:[メディアタイプ][;base64],データ

.pageTop a { background: url(/img/common/ico_arrow.png) no-repeat;}

!.pageTop a { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAqCAMAAAC0q5rDAAAABGdBTUEAAKINwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAADAUExURenp6fLw7/b29vT09NjY2NPT05u20/7+/u3t7e/v7/Hw7/Pz8+/v7v39/fj4+Ofn5/Dv7/Hx8fLy8uXl5UF6tODg4Dl1sfz8Nvb2n5+ePj49ra2vv73gCMTEL32budBhC9TCv6i99Ftv3yaTB3IVufu8lTTkclSooenfZBBKpMzgPv3GrgrZHLTpldn4H2PYpnU7+zGd+WgNZtc...) no-repeat;}

データURIスキームの問題点

IE5 - 7 非対応

サイズ制限

Opera 7.2: 4.1KBまで

Internet Explorer 8: 32KBまで

Firefox 2: 100KBまで

HTTP Requests 1-> 0Data URI Scheme

(Non IE5-7)

CSS, JS ファイルを結合する

複数の外部CSS,JavaScriptファイルを

1つのCSS, JavaScriptファイルにまとめる

!<link rel="stylesheet" type="text/css" href="file/css/common.css" />

!<script type="text/javascript" src="file/js/common.js"></script>

HTTP Requests 6 -> 2 Combined Scripts and Stylesheets

CSS3 プロパティ

Box Shadow.hoge { box-shadow: 5px 5px 5px #666666; }

Border Radius.hoge { border-radius: 20px; }

Opacity / RGBA / HSLA.hoge {opacity:0.5; color:rgba(255,255,0,0.5); color:hsla(120,100%,50%,0.5);}

Gradient.hoge { background-image: linear-gradient(top, #000000, #cccccc); }

HTTP Requests ? -> 0 CSS Level 3

(Non IE)

(‘･ω･）`コマッタピョン....

Change Design!

デザインを考えなおしてみる

SmoothScroll機能って必要？-> ページ高とクリック数を調査し、廃止

検索ボタン画像って必要？

-> 検索数を調査し、Submitボタンに変更

HTTP Requests 2 -> 1+αChange Design!

Google Site Performance

HTTPリクエスト数は 32 ->17

平均読み込み時間は 0.5 秒

全体の上位 2 ％に入る高速サイト

2010/4/8 現在

今日のまとめ

Today’s Conclusion

今日のまとめ

ビジネスインパクトとスタンス

-> パフォーマンスを武器に効率よく対策すべし

-> HTTPリクエストはコストが高い

今日のまとめ

-> リクエスト数を減らす簡単な方法はないCSS スプライトデータ URI スキームCSS, JS ファイルを結合するCSS3 プロパティ

-> それは本当に必要なのか？

Thank you!

Blog: http://t32k.com/mol/Twitter : http://twitter.com/t32k/

URLshttp://t32k.com/mol/2010/04/using-site-speed-in-web-search-ranking/

http://t32k.com/mol/2010/04/data-uri-scheme/

http://t32k.com/mol/2010/04/httpwatch-6-2-basic-edtion/

http://t32k.com/mol/2010/03/performance-business/

http://t32k.com/mol/2009/11/introduction-to-web-performance/

http://t32k.com/mol/2009/11/high-performance-web-design/

http://www.slideshare.net/sigwyg/css3-for-tomorrow

http://www.phpied.com/css-performance-ui-with-fewer-images/

http://www.google.com/webmasters/tools/

http://adwords.google.com/support/aw/bin/answer.py?hl=jp&answer=93112

http://www.findmebyip.com/litmus/

Photo Creditshttp://www.flickr.com/photos/kkoshy/4035720581/

http://www.flickr.com/photos/38446022@N00/2940461586/

http://www.flickr.com/photos/38446022@N00/2940461918/

http://www.flickr.com/photos/lcledward/3600542728/

http://www.flickr.com/photos/nostri-imago/3582034044/

http://www.flickr.com/photos/consumerist/614750305/

http://www.flickr.com/photos/consumerist/614655989/

http://www.flickr.com/photos/mah_aaah/3660470519/