Coding Web Performance

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

etc.


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ルックアップ

ISP

DNS Lookup Connect

データ受信

Wait

受信完了

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

Fx3.6

2

6

IE6


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


After


CSS スプライト効果

{-150ms

CSS Sprites Non Sprites


スプライトのジレンマ

Pages - ページ数

Maintenance - 保守性

Optimization - 最適化

Pages

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/reset-min.css" /><link rel="stylesheet" type="text/css" href="file/css/fonts-min.css" /><link rel="stylesheet" type="text/css" href="file/css/structure.css" />

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

<script type="text/javascript" src="file/js/jquery-min.js"></script><script type="text/javascript" src="file/js/jquery-plugin1.js"></script><script type="text/javascript" src="file/js/jquery-plugin2.js"></script>

!<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); }

etc.


HTTP Requests ? -> 0 CSS Level 3

(Non IE)


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


Change Design!


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

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

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

->

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


HTTP Requests 2 -> 1+αChange Design!


Google Site Performance


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/

http://t32k.com/mol/





Books


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/

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

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






















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

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


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/mah_aaah/3660470519/

http://www.flickr.com/photos/kkoshy/4035720581/

http://www.flickr.com/photos/kkoshy/4035720581/















Coding Web Performance

Design

coders higher

css sprites css nite

stylesheets css nite

books css nite lp

blockingcss nite lp

iecss nite lp

agendacss nite lp

beforecss nite lp