思い通りにいかないのがwebなんて 割り切りたくないから (gunma.web #4...
DESCRIPTION
2011/02/12におこなったLT資料漫画はコミPo!で作成TRANSCRIPT
![Page 1: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/1.jpg)
思い通りにいかないのがWebなんて 割り切りたくないから
Present by ぱろっと(@parrot_studio)
for Gunma.web #4
2011/02/12
![Page 2: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/2.jpg)
Twitter : @parrot_studio
hatena/github : parrot_studio
Profile
![Page 3: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/3.jpg)
・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
![Page 4: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/4.jpg)
Chapter I
誰も僕を責めることはできない
![Page 5: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/5.jpg)
今回のテーマ:
Webサイトが重くなる原因
![Page 6: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/6.jpg)
例:とあるWeb企業にて
![Page 7: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/7.jpg)
![Page 8: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/8.jpg)
![Page 9: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/9.jpg)
![Page 10: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/10.jpg)
![Page 11: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/11.jpg)
よく言われること:
サーバサイドプログラムが遅い
![Page 12: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/12.jpg)
CPU処理速度の比較
0 4000 8000 12000
Pen4 3.0GHz
Core i7 2600(3.4GHz)
10倍以上 しかも8スレッド Σ(゚Д゚;≡;゚д゚)
![Page 13: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/13.jpg)
Firebugで
サイトの描画時間を計ってみる
![Page 14: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/14.jpg)
青:DNSルックアップ
緑:接続
ベージュ:ブラウザの待ち
紫:サーバサイド処理
グラフの見方
![Page 15: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/15.jpg)
HatenaのBlog
http://d.hatena.ne.jp/parrot_studio/
![Page 16: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/16.jpg)
ROのBlog(FC2)
http://parrot.blog21.fc2.com//
![Page 17: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/17.jpg)
描画時間(sec)
サーバサイド処理
全描画 (外部を除く)
Hatena 0.659 1.44 (<1.0)
RO(FC2) 0.649 6.6 (>5.0)
※外部:TwitterのBlogパーツや広告等
![Page 18: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/18.jpg)
TCP/IP通信のステップ
(DNSルックアップ)
=> セッション確立
=> リクエスト送信
=> サーバ処理
=> レスポンス受信
(=> 描画・実行等)
![Page 19: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/19.jpg)
ネットワーク通信が多いほど
総合的な画面描画は遅い
=重い(´-ω-)
![Page 20: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/20.jpg)
Chapter II
僕にその手を動かせというのか
![Page 21: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/21.jpg)
どうやって
ネットワーク通信の無駄
を省くか(´・ω・)?
![Page 22: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/22.jpg)
今回は
「画像」と「Ajax」
についてだけ
![Page 23: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/23.jpg)
Case:1
多すぎるアイコン
![Page 24: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/24.jpg)
リッチなデザインほど
細かいところまでアイコンで表現する
(´・ω・)(・ω・`)ネー
![Page 25: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/25.jpg)
よく見ると
ほとんどが
ブラウザの待ち
![Page 26: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/26.jpg)
ブラウザの
同時接続数が4だとすると
100個の画像を読むのに
25回分の通信時間がいる(lll゚Д゚)
![Page 27: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/27.jpg)
解決策の一例:
CSSスプライト
![Page 28: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/28.jpg)
画像を一つにまとめて
CSSで一部を切り出して表示
![Page 29: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/29.jpg)
div#icon_blue { width: 10px; height: 10px; background-image: url(/icons.png); background-repeat: no-repeat; background-position: 0 -20px; }
まとめる
![Page 30: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/30.jpg)
画像の数が大幅に減るので
通信時間減少・キャッシュ有効
∠( ゚д゚)/
![Page 31: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/31.jpg)
But...
・画像を部分的に更新できない
・CSSを書くコスト増大
・ブラウザの描画コストが増える
・ユーザ投稿画像には使えない
![Page 32: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/32.jpg)
サイトの傾向に応じて検討を
(`・ω・´) b
![Page 33: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/33.jpg)
Case:2
Ajaxの隠れた無駄
![Page 34: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/34.jpg)
例:
都道府県に対応する地区を
APIから動的に読み込み
![Page 35: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/35.jpg)
// 県に対応する地区の取得function
var get_addr_list = function(cd){
// 呼ばれるたびに通信発生
return $.getJSON(url, {p: cd});
}
jQueryで単純に書くと・・・
![Page 36: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/36.jpg)
A県→B県→A県と操作する場合
A県に対するレスポンスは同じ
=> 通信の無駄(´・ω・`)
![Page 37: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/37.jpg)
var cache = {};
var get_addr_list = function(cd){
// キャッシュされていなかったら通信してGET
if (! cache[cd]) {
cache[cd] = $.getJSON(url, {p: cd});
}
return cache[cd];
}
APIの結果をキャッシュしよう!
![Page 38: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/38.jpg)
・APIに副作用がある
(実行のたびに結果が変わる)
・データが巨大/複雑すぎる
(ブラウザの使用メモリが莫大に)
こんな場合は(・A・)イクナイ!!
![Page 39: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/39.jpg)
(DBにアクセスするコスト同様)
APIにアクセスするコストも考えよう
(`・ω・´)
![Page 40: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/40.jpg)
Chapter III
すくいきれないもの
![Page 41: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/41.jpg)
他にもある”遅くなる原因”
![Page 42: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/42.jpg)
サーバサイドのプログラムが遅い
サーバが(ネットワーク的に)遠い
キャッシュを使ってない
サーバで圧縮をしてない(gzip / mod_pagespeed)
やり取りするファイルがでかい(圧縮されてない・無駄が多い等)
CSS/JSが外部ファイル化されてない(キャッシュがきかない)
CSSがheadの外にある(後から読まれるCSSは再描画発生でちらつく)
CSSが分散している(ファイルが複数・HTMLに不要な直書き)
CSSのセレクタが複雑すぎる
JSの書き方が重い(無駄な処理してない? 書き換えを繰り返してない?)
AjaxでAPIを叩きすぎ(いっぺんにデータが取れない? キャッシュできない?)
DOMツリーの走査に時間をかけすぎ(DOMが複雑ならidでコストダウン)
画像多すぎ(画像の数だけリクエストが投げられる)
etc...
![Page 43: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/43.jpg)
原因は一つではないから
Firebug等のツールで確認が必要
![Page 44: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/44.jpg)
詳しくは・・・
![Page 45: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/45.jpg)
デザイナー
サーバ担当
プログラマー
それぞれできることがある
![Page 46: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/46.jpg)
手を取り合って
![Page 47: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/47.jpg)
ありがとうございました
(・∀・)人(・∀・)人(・∀・)
![Page 48: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/48.jpg)
【おまけ】
![Page 49: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/49.jpg)
せんせー(`・ω・´)ノ
ブラウザのキャッシュを使えば
画像を読み込まないんじゃ?
![Page 50: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/50.jpg)
キャッシュを使っても
通信が発生する場合がある
(キャッシュ確認で通信 => コード304)
![Page 51: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/51.jpg)
でも、Expiresヘッダを使えば 指定された期間通信しない
# Apacheの例 ExpiresActive On ExpiresType image/png “access plus 1 year”
![Page 52: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/52.jpg)
せんせー、それだと画像を更新しても
再取得してもらえませんよ
(´・ω・)?
![Page 53: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/53.jpg)
URLに細工しよう(`・ω・´) b
src=“/images/icon.png?12345678”
※数値はファイルの更新時間
![Page 54: 思い通りにいかないのがWebなんて 割り切りたくないから (Gunma.web #4 2011/02/12)](https://reader031.vdocuments.pub/reader031/viewer/2022020101/558e0cba1a28ab53318b4631/html5/thumbnails/54.jpg)
Rails等のフレームワークなら
自動でこういったURLになるよ
(´・ω・)(・ω・`)ネー