Successfully reported this slideshow.

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

1

Share

Upcoming SlideShare
エコなWebサーバー
エコなWebサーバー
Loading in …3
×
1 of 54
1 of 54

More Related Content

More from parrotstudio

Related Books

Free with a 14 day trial from Scribd

See all

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

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

×