思い通りにいかないのがWebなんて 割り切りたくないから

Present by ぱろっと(@parrot_studio)

for Gunma.web #4

2011/02/12

Twitter : @parrot_studio

hatena/github : parrot_studio

Profile

・rdgc-dm 0.2.2

2011/01/22 Released!!

・“RO”gue #2 - The White Maze -

Coming Soon ...?

・Trying to make something with “Scala”

Recent Work

Chapter I

誰も僕を責めることはできない

今回のテーマ：

Webサイトが重くなる原因

例：とあるWeb企業にて

よく言われること：

サーバサイドプログラムが遅い

CPU処理速度の比較

0 4000 8000 12000

Pen4 3.0GHz

Core i7 2600(3.4GHz)

10倍以上 しかも8スレッド Σ(ﾟДﾟ；≡；ﾟдﾟ)

Firebugで

サイトの描画時間を計ってみる

青：DNSルックアップ

緑：接続

ベージュ：ブラウザの待ち

紫：サーバサイド処理

グラフの見方

HatenaのBlog

http://d.hatena.ne.jp/parrot_studio/

ROのBlog(FC2)

http://parrot.blog21.fc2.com//

描画時間（sec）

サーバサイド処理

全描画 （外部を除く）

Hatena 0.659 1.44 (<1.0)

RO(FC2) 0.649 6.6 (>5.0)

※外部：TwitterのBlogパーツや広告等

TCP/IP通信のステップ

（DNSルックアップ）

=> セッション確立

=> リクエスト送信

=> サーバ処理

=> レスポンス受信

（=> 描画・実行等）

ネットワーク通信が多いほど

総合的な画面描画は遅い

＝重い(´-ω-)

Chapter II

僕にその手を動かせというのか

どうやって

ネットワーク通信の無駄

を省くか(´･ω･)？

今回は

「画像」と「Ajax」

についてだけ

Case:1

多すぎるアイコン

リッチなデザインほど

細かいところまでアイコンで表現する

(´･ω･)(･ω･｀)ﾈｰ

よく見ると

ほとんどが

ブラウザの待ち

ブラウザの

同時接続数が4だとすると

100個の画像を読むのに

25回分の通信時間がいる(lllﾟДﾟ)

解決策の一例：

CSSスプライト

画像を一つにまとめて

CSSで一部を切り出して表示

div#icon_blue { width: 10px; height: 10px; background-image: url(/icons.png); background-repeat: no-repeat; background-position: 0 -20px; }

まとめる

画像の数が大幅に減るので

通信時間減少・キャッシュ有効

∠( ﾟдﾟ)／

But...

・画像を部分的に更新できない

・CSSを書くコスト増大

・ブラウザの描画コストが増える

・ユーザ投稿画像には使えない

サイトの傾向に応じて検討を

(｀･ω･´) b

Case:2

Ajaxの隠れた無駄

例：

都道府県に対応する地区を

APIから動的に読み込み

// 県に対応する地区の取得function

var get_addr_list = function(cd){

// 呼ばれるたびに通信発生

return $.getJSON(url, {p: cd});

}

jQueryで単純に書くと・・・

A県→B県→A県と操作する場合

A県に対するレスポンスは同じ

=> 通信の無駄(´･ω･`)

var cache = {};

var get_addr_list = function(cd){

// キャッシュされていなかったら通信してGET

if (! cache[cd]) {

cache[cd] = $.getJSON(url, {p: cd});

}

return cache[cd];

}

APIの結果をキャッシュしよう！

・APIに副作用がある

（実行のたびに結果が変わる）

・データが巨大/複雑すぎる

（ブラウザの使用メモリが莫大に）

こんな場合は（・A・）ｲｸﾅｲ!!

（DBにアクセスするコスト同様）

APIにアクセスするコストも考えよう

(`･ω･´)

Chapter III

すくいきれないもの

他にもある”遅くなる原因”

サーバサイドのプログラムが遅い

サーバが（ネットワーク的に）遠い

キャッシュを使ってない

サーバで圧縮をしてない（gzip / mod_pagespeed）

やり取りするファイルがでかい（圧縮されてない・無駄が多い等）

CSS/JSが外部ファイル化されてない（キャッシュがきかない）

CSSがheadの外にある（後から読まれるCSSは再描画発生でちらつく）

CSSが分散している（ファイルが複数・HTMLに不要な直書き）

CSSのセレクタが複雑すぎる

JSの書き方が重い（無駄な処理してない？ 書き換えを繰り返してない？）

AjaxでAPIを叩きすぎ（いっぺんにデータが取れない？ キャッシュできない？）

DOMツリーの走査に時間をかけすぎ（DOMが複雑ならidでコストダウン）

画像多すぎ（画像の数だけリクエストが投げられる）

etc...

原因は一つではないから

Firebug等のツールで確認が必要

詳しくは・・・

デザイナー

サーバ担当

プログラマー

それぞれできることがある

手を取り合って

ありがとうございました

(・∀・)人(・∀・)人(・∀・)

【おまけ】

せんせー(`･ω･´)ノ

ブラウザのキャッシュを使えば

画像を読み込まないんじゃ？

キャッシュを使っても

通信が発生する場合がある

（キャッシュ確認で通信 => コード304）

でも、Expiresヘッダを使えば 指定された期間通信しない

# Apacheの例 ExpiresActive On ExpiresType image/png “access plus 1 year”

せんせー、それだと画像を更新しても

再取得してもらえませんよ

(´･ω･)？

URLに細工しよう(｀･ω･´) b

src=“/images/icon.png?12345678”

※数値はファイルの更新時間

Rails等のフレームワークなら

自動でこういったURLになるよ

(´･ω･)(･ω･｀)ﾈｰ