思い通りにいかないのがWebなんて割り切りたくないから (Gunma.web #4 2011/02/12)

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

Present by ぱろっと(@parrot_studio)
for Gunma.web #4
2011/02/12

Profile

Twitter : @parrot_studio
hatena/github : parrot_studio

Recent Work
・rdgc-dm 0.2.2
2011/01/22 Released!!

・“RO”gue #2 - The White Maze -
Coming Soon ...?

・Trying to make something with “Scala”

Chapter I

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

今回のテーマ：
Webサイトが重くなる原因

例：とあるWeb企業にて

よく言われること：
サーバサイドプログラムが遅い

CPU処理速度の比較

Core i7 2600(3.4GHz)

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

0 4000 8000 12000

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から動的に読み込み

jQueryで単純に書くと・・・

// 県に対応する地区の取得function
var get_addr_list = function(cd){
// 呼ばれるたびに通信発生
return $.getJSON(url, {p: cd});
}

A県→B県→A県と操作する場合
A県に対するレスポンスは同じ
=> 通信の無駄(´･ω･`)

APIの結果をキャッシュしよう！
var cache = {};
var get_addr_list = function(cd){
// キャッシュされていなかったら通信してGET
if (! cache[cd]) {
cache[cd] = $.getJSON(url, {p: cd});
}
return cache[cd];
}

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

・APIに副作用がある
（実行のたびに結果が変わる）

・データが巨大/複雑すぎる
（ブラウザの使用メモリが莫大に）

（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になるよ
(´･ω･)(･ω･｀)ﾈｰ

思い通りにいかないのがWebなんて割り切りたくないから (Gunma.web #4 2011/02/12)

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (7)

En vedette

En vedette (10)

Similaire à 思い通りにいかないのがWebなんて割り切りたくないから (Gunma.web #4 2011/02/12)

Similaire à 思い通りにいかないのがWebなんて割り切りたくないから (Gunma.web #4 2011/02/12) (20)

Plus de parrotstudio

Plus de parrotstudio (14)

Dernier

Dernier (12)