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のパフォーマンスを考える~WordPressと付き合うために~         @ 【第三回】初心者向けホームページ勉強会 2012/6/10こばやし たけし / @tama200x
プロフィールこばやし たけしプログラマ-から、インフラエンジニア・ネットワークエンジニアを経て、現在はWeb部門・DTP部門のマネージャーTwitter:    tama200xFacebook:   http://www.facebook.c...
本日のテーマWebのフォーマンス改善  (WordPressのパフォーマンス改善も少しだけ...)● パフォーマンスが悪い原因● フォーマンスの改善方法
性能改善...その前に●   サーバが原因?    ○ 安いレンタルサーバだから?    ○ 実はサーバが海外?●   WordPressが遅い?    ○ プラグインが原因?    ○ テーマが原因?●   それ以外に原因は?    ○ 回線...
原因はどこに?                                Web         DB                                WP          MySQL                    ...
原因を調べるには<ブラウザで調べる>  ● Firebug (Firefox)  ● Chrome Developer Tools (Chrome)  ● Yslow (Firefox/Chrome)  ● PageSpeed (Firefox...
原因を調べるには       DEMO
ダウンロードの流れ①                              1.   DNSルックアップ                                   ホスト名からIPアドレスを検索                  ...
ダウンロードの流れ②Firebugのネットタブ例:http://php-ninja.com/
ダウンロードの流れ③                          http://php-ninja.com/                300msec      のウオーターフローの一部        html stylesheet ...
解決策               CDN/別サイト                                    Web         DB                                    WP        ...
改善方法(フロントエンド)● ブラウザレンダリングが最適化されていない       → ブラウザレンダリング最適化● リクエスト数が多い       → リクエスト数削減       → CDNや別サイト利用       → キャッシュの利用●...
改善方法(バックエンド)● サーバの性能不足       → サーバ側の改善
改善方法 ~ブラウザレンダリング最適化~● CSSの記述位置は先頭    → CSSファイルは同時ダウンロードされる    → プログレッシブレンダリング● HEADタグ内でのJavaScriptの記述位置は最後に    → レンダリングやダウ...
改善方法 ~リクエスト数削減~● DNSルックアップの抑制         → 応答時間の削減●   リダイレクトの抑制         → リクエスト数、応答時間の削減●   誤りのあるリクエストの抑制(ステータスコード404等)●   CS...
リクエスト数削減の例:CSSスプライト● 複数のイメージを一つのファイルに統合し、  各イメージをCSSのbackground-potitionで位置指定して表  示する● 画像のリクエスト数が大幅に削減できる    http://k.yimg...
クエスト数削減の例:リダイレクトの影響    redirect        html stylesheet stylesheet stylesheet     リクエスト数の増       script      image     大   ...
改善方法 ~CDNや別サイト利用~● ホスト毎の同時ダウンロード数上限   ○ yimg.jpの例● CDNの利用● 外部のjQuery、html5.jsを利用するメリット        リクエスト数削減jQuery https://ajax....
CDNとは  大阪      東京         アメリカ西海岸CDN   サーバ CDN     サーバ        CDN   サーバ      10ms~20ms     100ms~150ms
改善方法 ~転送ファイルサイズ削減~● 画像ファイルサイズの最適化  ○ Smush.It● テキストファイルのminification(縮小)化● gzipでファイルサイズを縮小  ○ mod_deflate (Apache 2.x)  ○ ...
改善方法 ~ブラウザキャッシュ利用~● キャッシュ設定     → HTTP Cache-Control Header ○   metaタグ内の Expire属性     <meta http-equiv="expires" content="...
ブラウザキャッシュ利用:キャッシュの流れ                                         Noファイルが要求される             ブラウザキャッシュに                        格納...
ブラウザキャッシュ利用:キャッシュ利用の効果http://php-ninja.com/ (初回)   http://php-ninja.com/ (2回目)54リクエスト                      10リクエスト (+キャッシュ...
改善方法 ~WordPressプラグイン~● プラグインの数を最小限にする● Head Cleaner    → CSS/JSの再配置、統合に効果● WP Smush.It    → 画像サイズ削減● キャッシュ系プラグイン  ○ WP Sup...
WordPressの404エラーについて● 404.phpが存在しない場合には/index.php?error=404が呼  び出される● 404.phpの先頭部分に以下の記述が必要。      → 検索エンジンにコンテンツが         ...
改善方法 ~サーバ側の改善~● Webサーバソフトウェアの入れ替え ○ nginx● サーバ側キャッシュ● php高速化● MySQL高速化
改善方法 ~その他~● ソーシャル連携の課題● モバイルへの対応
まとめ● 自分ができることから手をつける● 簡単なところから手をつける
参考書籍       ハイパフォーマンスwebサイト             続・ハイパフォーマンスwebサイト       WordPress高速化&スマート運用ガイド
参考資料●   Web Performance Best Practices - Make the Web Faster &mdash; Google    Developers    https://developers.google.com...
Upcoming SlideShare
Loading in …5
×

2012/6/10 Webのパフォーマンスを考える @ 【第三回】初心者向けホームページ勉強会

1,679 views

Published on

2012/6/10の勉強会で使用したスライドです。
2012/5/19の内容を一部更新したものになります。

Published in: Technology
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

2012/6/10 Webのパフォーマンスを考える @ 【第三回】初心者向けホームページ勉強会

  1. 1. Webのパフォーマンスを考える~WordPressと付き合うために~  @ 【第三回】初心者向けホームページ勉強会 2012/6/10こばやし たけし / @tama200x
  2. 2. プロフィールこばやし たけしプログラマ-から、インフラエンジニア・ネットワークエンジニアを経て、現在はWeb部門・DTP部門のマネージャーTwitter: tama200xFacebook: http://www.facebook.com/tama200x
  3. 3. 本日のテーマWebのフォーマンス改善  (WordPressのパフォーマンス改善も少しだけ...)● パフォーマンスが悪い原因● フォーマンスの改善方法
  4. 4. 性能改善...その前に● サーバが原因? ○ 安いレンタルサーバだから? ○ 実はサーバが海外?● WordPressが遅い? ○ プラグインが原因? ○ テーマが原因?● それ以外に原因は? ○ 回線が遅い? ○ 実はPCが古くて遅い?
  5. 5. 原因はどこに? Web DB WP MySQL い い が多 ズが多 スト数 サイ リ クエ ァイル サーバの性能不足 フ 転送 WPによる遅延 ブラウザレンダリング が 最適化されていない
  6. 6. 原因を調べるには<ブラウザで調べる> ● Firebug (Firefox) ● Chrome Developer Tools (Chrome) ● Yslow (Firefox/Chrome) ● PageSpeed (Firefox/Chrome)<サービスで調べる> ● Pingdom Tools ● GTmetrix etc
  7. 7. 原因を調べるには DEMO
  8. 8. ダウンロードの流れ① 1. DNSルックアップ ホスト名からIPアドレスを検索 2. 接続 1. DNSルックアップ Webサーバへ接続 DNSサーバ 3. 送信 CookieやPOSTの内容を送信 PC 4. 待機 Webサーバ側の処理待ち 5. 受信 2. 接続 Webサーバ サーバからデータを受信 3. 送信 5. 受信  
  9. 9. ダウンロードの流れ②Firebugのネットタブ例:http://php-ninja.com/
  10. 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. 11. 解決策 CDN/別サイト Web DB WP MySQLCDN/別サイト使用=リクエスト数/  転送ファイルサイズ         の削減 削減 削減 ス ト数 サイズ リクエファイル サーバの性能改善 転送 WP固有の対策 ブラウザレンダリングの 最適化
  12. 12. 改善方法(フロントエンド)● ブラウザレンダリングが最適化されていない      → ブラウザレンダリング最適化● リクエスト数が多い      → リクエスト数削減      → CDNや別サイト利用      → キャッシュの利用● 転送ファイルサイズが多い      → 転送ファイルサイズの削減      → CDNや別サイト利用      → キャッシュ利用● WPによる遅延      → WordPressプラグインによる改善
  13. 13. 改善方法(バックエンド)● サーバの性能不足      → サーバ側の改善
  14. 14. 改善方法 ~ブラウザレンダリング最適化~● CSSの記述位置は先頭   → CSSファイルは同時ダウンロードされる   → プログレッシブレンダリング● HEADタグ内でのJavaScriptの記述位置は最後に    → レンダリングやダウンロードを止める● CSSの効率化   → 不要なスタイルを書かない   → CSS記述方法を見直す● 文字セットの指定● イメージサイズの指定
  15. 15. 改善方法 ~リクエスト数削減~● DNSルックアップの抑制      → 応答時間の削減● リダイレクトの抑制      → リクエスト数、応答時間の削減● 誤りのあるリクエストの抑制(ステータスコード404等)● CSSスプライトによる        画像リクエスト数削減 (後述)● 重複するリソースを単一URLで提供      → キャッシュ/ステータスコード304を活用し         リクエスト数/転送ファイルを削減する
  16. 16. リクエスト数削減の例:CSSスプライト● 複数のイメージを一つのファイルに統合し、 各イメージをCSSのbackground-potitionで位置指定して表 示する● 画像のリクエスト数が大幅に削減できる http://k.yimg.jp/images/top/sp2/cmn/pic_all-120118.png
  17. 17. クエスト数削減の例:リダイレクトの影響 redirect html stylesheet stylesheet stylesheet リクエスト数の増 script image 大 redirect redirect image image image html 転送にかかる時 stylesheet stylesheet 間が増大 stylesheet script image image image image
  18. 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.jsHTML5.js http://html5shiv.googlecode.com/svn/trunk/html5.js
  19. 19. CDNとは  大阪      東京         アメリカ西海岸CDN サーバ CDN サーバ CDN サーバ 10ms~20ms 100ms~150ms
  20. 20. 改善方法 ~転送ファイルサイズ削減~● 画像ファイルサイズの最適化 ○ Smush.It● テキストファイルのminification(縮小)化● gzipでファイルサイズを縮小 ○ mod_deflate (Apache 2.x) ○ mod_gzip (Apache 1.x)
  21. 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. 22. ブラウザキャッシュ利用:キャッシュの流れ Noファイルが要求される ブラウザキャッシュに 格納されている? Yes 期限内 Cache-Control/ Expiresを評価 期限外/no-cache LastModufy/ETagを サーバ側が新しい 評価 同じか、ブラウザ側が新しいブラウザキャッシュから サーバからファイルを提 サーバから304で応答 ファイルを提供 供(200で応答) ※ Cache-ControlのMax-ageが存在する場合、Expiresを上書きする
  23. 23. ブラウザキャッシュ利用:キャッシュ利用の効果http://php-ninja.com/ (初回) http://php-ninja.com/ (2回目)54リクエスト 10リクエスト (+キャッシュから19リクエスト)421.4KB 16.1KB (+キャッシュから295.7KB) http://php-ninja.com/ (YSlow)
  24. 24. 改善方法 ~WordPressプラグイン~● プラグインの数を最小限にする● Head Cleaner   → CSS/JSの再配置、統合に効果● WP Smush.It   → 画像サイズ削減● キャッシュ系プラグイン ○ WP SuperCache ○ W3 Total Cache ○ Quick Cache ○ DB Cache Reloaded Fix
  25. 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. 26. 改善方法 ~サーバ側の改善~● Webサーバソフトウェアの入れ替え ○ nginx● サーバ側キャッシュ● php高速化● MySQL高速化
  27. 27. 改善方法 ~その他~● ソーシャル連携の課題● モバイルへの対応
  28. 28. まとめ● 自分ができることから手をつける● 簡単なところから手をつける
  29. 29. 参考書籍 ハイパフォーマンスwebサイト 続・ハイパフォーマンスwebサイト WordPress高速化&スマート運用ガイド
  30. 30. 参考資料● Web Performance Best Practices - Make the Web Faster &mdash; 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

×