2012/6/10 Webのパフォーマンスを考える @ 【第三回】初心者向けホームページ勉強会
?
3 likes?1,103 views
2012/6/10の勉強会で使用したスライドです。 2012/5/19の内容を一部更新したものになります。
2012/6/10 Webのパフォーマンスを考える @ 【第三回】初心者向けホームページ勉強会
- 1. Webのパフォーマンスを考える ～WordPressと付き合うために～ @ 【第三回】初心者向けホームページ勉強会 2012/6/10 こばやし たけし / @tama200x
- 2. プロフィール こばやし たけし プログラマ－から、インフラエンジニア?ネットワークエンジニア を経て、現在はWeb部門?DTP部門のマネージャー Twitter: tama200x Facebook: http://www.facebook.com/tama200x
- 4. 性能改善...その前に ● サーバが原因？ ○ 安いレンタルサーバだから？ ○ 実はサーバが海外？ ● WordPressが遅い？ ○ プラグインが原因？ ○ テーマが原因？ ● それ以外に原因は？ ○ 回線が遅い？ ○ 実はPCが古くて遅い？
- 5. 原因はどこに？ Web DB WP MySQL い い が多 ズが多 スト数 サイ リ クエ ァイル サーバの性能不足 フ 転送 WPによる遅延 ブラウザレンダリング が 最適化されていない
- 6. 原因を调べるには <ブラウザで調べる> ● Firebug (Firefox) ● Chrome Developer Tools (Chrome) ● Yslow (Firefox/Chrome) ● PageSpeed (Firefox/Chrome) <サービスで調べる> ● Pingdom Tools ● GTmetrix etc
- 7. 原因を调べるには DEMO
- 8. ダウンロードの流れ① 1. DNSルックアップ ホスト名からIPアドレスを検索 2. 接続 1. DNSルックアップ Webサーバへ接続 DNSサーバ 3. 送信 CookieやPOSTの内容を送信 PC 4. 待機 Webサーバ側の処理待ち 5. 受信 2. 接続 Webサーバ サーバからデータを受信 3. 送信 5. 受信
- 10. ダウンロードの流れ③ http://php-ninja.com/ 300msec のウオーターフローの一部 html stylesheet stylesheet stylesheet HTMLファイルのダウンロード時間が全体 script のダウンロードに占める割合は約7% stylesheet script script script script 複数ファイル同時にダウンロードされる script ● 1ホストあたり2 (RFC2616 8.1.4) stylesheet image ● 1ホストあたり6 (主要なブラウザの image 実装) image image image image image script image ファイル読みだし完了4.25sec
- 11. 解决策 CDN/別サイト Web DB WP MySQL CDN/別サイト使用 ＝リクエスト数/ 転送ファイルサイズ の削減 削減 削減 ス ト数 サイズ リクエファイル サーバの性能改善 転送 WP固有の対策 ブラウザレンダリングの 最適化
- 12. 改善方法（フロントエンド） ● ブラウザレンダリングが最適化されていない → ブラウザレンダリング最適化 ● リクエスト数が多い → リクエスト数削減 → CDNや別サイト利用 → キャッシュの利用 ● 転送ファイルサイズが多い → 転送ファイルサイズの削減 → CDNや別サイト利用 → キャッシュ利用 ● WPによる遅延 → WordPressプラグインによる改善
- 13. 改善方法（バックエンド） ● サーバの性能不足 → サーバ侧の改善
- 14. 改善方法 ～ブラウザレンダリング最適化～ ● CSSの記述位置は先頭 → CSSファイルは同時ダウンロードされる → プログレッシブレンダリング ● HEADタグ内でのJavaScriptの記述位置は最後に → レンダリングやダウンロードを止める ● CSSの効率化 → 不要なスタイルを書かない → CSS記述方法を見直す ● 文字セットの指定 ● イメージサイズの指定
- 15. 改善方法 ～リクエスト数削減～ ● DNSルックアップの抑制 → 応答時間の削減 ● リダイレクトの抑制 → リクエスト数、応答時間の削減 ● 誤りのあるリクエストの抑制(ステータスコード404等) ● CSSスプライトによる 画像リクエスト数削減 (後述) ● 重複するリソースを単一URLで提供 → キャッシュ/ステータスコード304を活用し リクエスト数/転送ファイルを削減する
- 16. リクエスト数削減の例：CSSスプライト ● 複数のイメージを一つのファイルに統合し、 各イメージをCSSのbackground-potitionで位置指定して表 示する ● 画像のリクエスト数が大幅に削減できる http://k.yimg.jp/images/top/sp2/cmn/pic_all-120118.png
- 17. クエスト数削减の例：リダイレクトの影响 redirect html stylesheet stylesheet stylesheet リクエスト数の増 script image 大 redirect redirect image image image html 転送にかかる時 stylesheet stylesheet 間が増大 stylesheet script image image image image
- 18. 改善方法 ～CDNや別サイト利用～ ● ホスト毎の同時ダウンロード数上限 ○ yimg.jpの例 ● CDNの利用 ● 外部のjQuery、html5.jsを利用するメリット リクエスト数削減 jQuery https://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js http://ajax.aspnetcdn.com/ajax/jQuery/jquery-x.x.x.min.js http://code.jquery.com/jquery-x.x.x.min.js HTML5.js http://html5shiv.googlecode.com/svn/trunk/html5.js
- 19. CDNとは 大阪 東京 アメリカ西海岸 CDN サーバ CDN サーバ CDN サーバ 10ms～20ms 100ms～150ms
- 20. 改善方法 ～転送ファイルサイズ削減～ ● 画像ファイルサイズの最適化 ○ Smush.It ● テキストファイルのminification(縮小)化 ● gzipでファイルサイズを縮小 ○ mod_deflate (Apache 2.x) ○ mod_gzip (Apache 1.x)
- 21. 改善方法 ～ブラウザキャッシュ利用～ ● キャッシュ設定 → HTTP Cache-Control Header ○ metaタグ内の Expire属性 <meta http-equiv="expires" content="秒数またはGMT" /> ○ header set Cache-Control (Apache) ● 有効期限設定 → HTTP Expires Header ○ metaタグ内の Cache-Control属性 <meta http-equiv="Cache-Control" content="秒数またはGMT" /> ○ ExpiresDefalut / ExpiresByType (Apache) ※ Cache-ControlのMax-ageが存在する場合、Expiresを上書きする
- 22. ブラウザキャッシュ利用：キャッシュの流れ No ファイルが要求される ブラウザキャッシュに 格納されている？ Yes 期限内 Cache-Control/ Expiresを評価 期限外/no-cache LastModufy/ETagを サーバ側が新しい 評価 同じか、ブラウザ側が新しい ブラウザキャッシュから サーバからファイルを提 サーバから304で応答 ファイルを提供 供(200で応答) ※ Cache-ControlのMax-ageが存在する場合、Expiresを上書きする
- 23. ブラウザキャッシュ利用：キャッシュ利用の効果 http://php-ninja.com/ (初回) http://php-ninja.com/ (２回目) 54リクエスト 10リクエスト (+キャッシュから19リクエスト) 421.4KB 16.1KB (+キャッシュから295.7KB) http://php-ninja.com/ (YSlow)
- 24. 改善方法 ～WordPressプラグイン～ ● プラグインの数を最小限にする ● Head Cleaner → CSS/JSの再配置、統合に効果 ● WP Smush.It → 画像サイズ削減 ● キャッシュ系プラグイン ○ WP SuperCache ○ W3 Total Cache ○ Quick Cache ○ DB Cache Reloaded Fix
- 25. WordPressの404エラーについて ● 404.phpが存在しない場合には/index.php?error=404が呼 び出される ● 404.phpの先頭部分に以下の記述が必要。 → 検索エンジンにコンテンツが 存在しないことを通知(codex) <?php header("HTTP/1.1 404 Not Found"); ?> ● .htaccessにErrorDocumentを記述し静的ファイルを指定 → 404.phpよりもサーバ側の処理は少ない(codex)
- 26. 改善方法 ～サーバ側の改善～ ● Webサーバソフトウェアの入れ替え ○ nginx ● サーバ側キャッシュ ● php高速化 ● MySQL高速化
- 29. 参考书籍 ハイパフォーマンスwebサイト 続?ハイパフォーマンスwebサイト WordPress高速化&スマート運用ガイド
- 30. 参考資料 ● Web Performance Best Practices - Make the Web Faster — Google Developers https://developers.google.com/speed/docs/best-practices/rules_intro ● 効率の良いcssを書くための7箇条 | Screw-Axis http://screw-axis.com/2009/06/15/css-good-7-practices/ ● Browserscope (ブラウザ毎の同時ダウンロード数) http://www.browserscope.org/?category=network