Webのパフォーマンスを考える~WordPressと付き合うために~こばやし たけし / @tama200x
プロフィールこばやし たけしプログラマ-から、インフラエンジニア・ネットワークエンジニアを経て、現在はWeb部門・DTP部門のマネージャーTwitter:    tama200xFacebook:   http://www.facebook.c...
本日のテーマWebのパフォーマンス改善  (あわせてWordPressパフォーマンス改善も...)● パフォーマンスが遅い原因● パフォーマンスの改善方法
性能改善...その前に●   サーバが原因?    ○ 安いレンタルサーバだから?    ○ 実はサーバが海外?●   WordPressが遅い?    ○ プラグインが原因?    ○ テーマが原因?●   それ以外に原因は?    ○ 自社...
原因はどこに?             CDN/別サイト                                      Web       DB                         同時ダウンロード数    WP    ...
原因を調べるには<ブラウザで調べる>  ● Firebug (Firefox)  ● Chrome Developer Tools (Chrome)  ● Yslow (Firefox/Chrome)  ● PageSpeed (Firefox...
原因を調べるには       DEMO
ファイルはどのようにダウンロードされる?http://php-ninja.com/参考)ブラウザ毎の同時ダウンロード数http://www.browserscope.org/?category=network
改善方法フロントエンドの改善●   まずはじめに●   リクエスト数削減●   ファイルサイズ削減●   CDNや別サイト利用●   キャッシュ●   WordPressプラグインバックエンドの改善● サーバ側の改善
改善方法 ~まずはじめに~● CSSの記述位置は先頭    → プログレッシブレンダリング● JavaScriptの記述位置は最後   → レンダリングやダウンロードを止める   → ただし非同期JSは例外● ファイルの重複
改善方法 ~リクエスト数削減~● CSSファイルの統合● JavaScriptファイルの統合● CSSスプライト         http://k.yimg.jp/images/top/sp2/cmn/pic_all-120118.png
改善方法 ~ファイルサイズ削減~● 画像ファイルサイズの縮小  ○ Smush.It● テキストファイルのminification(縮小)化● gzipでファイルサイズを縮小  ○ mod_deflate (Apache 2.x)  ○ mod...
改善方法 ~CDNや別サイト利用~●   ホスト毎の同時ダウンロード数上限●   yimg.jpの例●   CDNの利用●   外部のjQuery、html5.jsを利用するメリット  ユーザーに近いところからの配信  サーバのアクセス数削減j...
CDNのイメージ 大阪      東京         アメリカ西海岸CDN       CDN     サーバ        CDN   サーバ      10ms~20ms     100ms~150ms
改善方法 ~キャッシュ利用~● metaタグ内の Expire属性  <meta http-equiv="expires" content="秒数またはGMT" />● mod_expires (Apache)
例:キャッシュ利用の効果   http://php-ninja.com/         http://php-ninja.com/   (初回アクセス時)                     (2回目アクセス時)   52リクエスト / ...
改善方法 ~WordPressプラグイン~● プラグインの数を最小限にする● Head Cleaner    → CSS/JSの再配置、統合に効果● WP Smush.It    → 画像サイズ削減● キャッシュ系プラグイン  ○ WP Sup...
改善方法 ~サーバ側の改善~● サーバ側キャッシュ● .htaccessを使用を停止する● php高速化● MySQL高速化
改善方法 ~その他~● DNSルックアップを減らす● ソーシャル連携の課題
まとめ● 自分ができることから手をつけましょう● 簡単なところから手をつけましょう
参考書籍       ハイパフォーマンスwebサイト             続・ハイパフォーマンスwebサイト       WordPress高速化&スマート運用ガイド
Upcoming SlideShare
Loading in …5
×

2012/5/19 Webのパフォーマンスを考える ~WordPressと付き合うために~ @ WB Osaka

4,944 views

Published on

0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,944
On SlideShare
0
From Embeds
0
Number of Embeds
308
Actions
Shares
0
Downloads
0
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

2012/5/19 Webのパフォーマンスを考える ~WordPressと付き合うために~ @ WB Osaka

  1. 1. Webのパフォーマンスを考える~WordPressと付き合うために~こばやし たけし / @tama200x
  2. 2. プロフィールこばやし たけしプログラマ-から、インフラエンジニア・ネットワークエンジニアを経て、現在はWeb部門・DTP部門のマネージャーTwitter: tama200xFacebook: http://www.facebook.com/tama200x
  3. 3. 本日のテーマWebのパフォーマンス改善  (あわせてWordPressパフォーマンス改善も...)● パフォーマンスが遅い原因● パフォーマンスの改善方法
  4. 4. 性能改善...その前に● サーバが原因? ○ 安いレンタルサーバだから? ○ 実はサーバが海外?● WordPressが遅い? ○ プラグインが原因? ○ テーマが原因?● それ以外に原因は? ○ 自社の回線が遅い? ○ 実はPCが古くて遅い?
  5. 5. 原因はどこに? CDN/別サイト Web DB 同時ダウンロード数 WP MySQL 6ファイル/ホストCDN/別サイト利用 減 の削 削減 スト数 の クエ ルサイズ リ イ サーバ側の改善 ファ WPプラグインの改善 キャッシュ
  6. 6. 原因を調べるには<ブラウザで調べる> ● Firebug (Firefox) ● Chrome Developer Tools (Chrome) ● Yslow (Firefox/Chrome) ● PageSpeed (Firefox/Chrome)<サービスで調べる> ● Pingdom Tools ● GTmetrix etc
  7. 7. 原因を調べるには DEMO
  8. 8. ファイルはどのようにダウンロードされる?http://php-ninja.com/参考)ブラウザ毎の同時ダウンロード数http://www.browserscope.org/?category=network
  9. 9. 改善方法フロントエンドの改善● まずはじめに● リクエスト数削減● ファイルサイズ削減● CDNや別サイト利用● キャッシュ● WordPressプラグインバックエンドの改善● サーバ側の改善
  10. 10. 改善方法 ~まずはじめに~● CSSの記述位置は先頭   → プログレッシブレンダリング● JavaScriptの記述位置は最後   → レンダリングやダウンロードを止める   → ただし非同期JSは例外● ファイルの重複
  11. 11. 改善方法 ~リクエスト数削減~● CSSファイルの統合● JavaScriptファイルの統合● CSSスプライト http://k.yimg.jp/images/top/sp2/cmn/pic_all-120118.png
  12. 12. 改善方法 ~ファイルサイズ削減~● 画像ファイルサイズの縮小 ○ Smush.It● テキストファイルのminification(縮小)化● gzipでファイルサイズを縮小 ○ mod_deflate (Apache 2.x) ○ mod_gzip (Apache 1.x)
  13. 13. 改善方法 ~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
  14. 14. CDNのイメージ 大阪      東京         アメリカ西海岸CDN CDN サーバ CDN サーバ 10ms~20ms 100ms~150ms
  15. 15. 改善方法 ~キャッシュ利用~● metaタグ内の Expire属性 <meta http-equiv="expires" content="秒数またはGMT" />● mod_expires (Apache)
  16. 16. 例:キャッシュ利用の効果 http://php-ninja.com/ http://php-ninja.com/ (初回アクセス時) (2回目アクセス時) 52リクエスト / 418.8KB 8リクエスト / 16.2KBhttp://php-ninja.com/ YSlowの結果
  17. 17. 改善方法 ~WordPressプラグイン~● プラグインの数を最小限にする● Head Cleaner   → CSS/JSの再配置、統合に効果● WP Smush.It   → 画像サイズ削減● キャッシュ系プラグイン ○ WP SuperCache ○ W3 Total Cache ○ Quick Cache ○ DB Cache Reloaded Fix
  18. 18. 改善方法 ~サーバ側の改善~● サーバ側キャッシュ● .htaccessを使用を停止する● php高速化● MySQL高速化
  19. 19. 改善方法 ~その他~● DNSルックアップを減らす● ソーシャル連携の課題
  20. 20. まとめ● 自分ができることから手をつけましょう● 簡単なところから手をつけましょう
  21. 21. 参考書籍 ハイパフォーマンスwebサイト 続・ハイパフォーマンスwebサイト WordPress高速化&スマート運用ガイド

×