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

思い通りにいかないのがWebなんて割り切りたくないから Present by ぱろっと(@parrot_studio) for Gunma.web #4 2011/02/12

ProfileTwitter : @parrot_studiohatena/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で単純に書くと・・・// 県に対応する地区の取得functionvar 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 OnExpiresType image/png “access plus 1 year”

せんせー、それだと画像を更新しても再取得してもらえませんよ (´･ω･)？

URLに細工しよう(｀･ω･´) bsrc=“/images/icon.png?12345678” ※数値はファイルの更新時間

Rails等のフレームワークなら自動でこういったURLになるよ (´･ω･)(･ω･｀)ﾈｰ

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

by parrotstudio on Feb 13, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 75

Statistics