Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,708 views

Published on

2011/02/12におこなったLT資料
漫画はコミPo!で作成

Published in: Technology, Design
  • Be the first to comment

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

  1. 1. 思い通りにいかないのがWebなんて 割り切りたくないから Present by ぱろっと(@parrot_studio) for Gunma.web #4 2011/02/12
  2. 2. ProfileTwitter : @parrot_studiohatena/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で単純に書くと・・・// 県に対応する地区の取得functionvar 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 OnExpiresType image/png “access plus 1 year”
  48. 48. せんせー、それだと画像を更新しても 再取得してもらえませんよ (´・ω・)?
  49. 49. URLに細工しよう(`・ω・´) bsrc=“/images/icon.png?12345678” ※数値はファイルの更新時間
  50. 50. Rails等のフレームワークなら自動でこういったURLになるよ (´・ω・)(・ω・`)ネー

×