1. Webのパフォーマンスを考える
～WordPressと付き合うために～
こばやし たけし / @tama200x

2. プロフィール
こばやし たけし
プログラマ－から、インフラエンジニア・ネットワークエンジニア
を経て、現在はWeb部門・DTP部門のマネージャー
Twitter: tama200x
Facebook: http://www.facebook.com/tama200x

3. 本日のテーマ
Webのパフォーマンス改善
(あわせてWordPressパフォーマンス改善も...)
● パフォーマンスが遅い原因
● パフォーマンスの改善方法

4. 性能改善...その前に
● サーバが原因？
○ 安いレンタルサーバだから？
○ 実はサーバが海外？
● WordPressが遅い？
○ プラグインが原因？
○ テーマが原因？
● それ以外に原因は？
○ 自社の回線が遅い？
○ 実はPCが古くて遅い？

5. 原因はどこに？
CDN/別サイト
Web DB
同時ダウンロード数 WP MySQL
6ファイル/ホスト
CDN/別サイト利用
減
の削 削減
スト数 の
クエ ルサイズ
リ イ サーバ側の改善
ファ
WPプラグインの改善
キャッシュ

6. 原因を調べるには
<ブラウザで調べる>
● Firebug (Firefox)
● Chrome Developer Tools (Chrome)
● Yslow (Firefox/Chrome)
● PageSpeed (Firefox/Chrome)
<サービスで調べる>
● Pingdom Tools
● GTmetrix etc

7. 原因を調べるには
DEMO

8. ファイルはどのようにダウンロードされる？
http://php-ninja.com/
参考）ブラウザ毎の同時ダウンロード数
http://www.browserscope.org/?category=network

9. 改善方法
フロントエンドの改善
● まずはじめに
● リクエスト数削減
● ファイルサイズ削減
● CDNや別サイト利用
● キャッシュ
● WordPressプラグイン
バックエンドの改善
● サーバ側の改善

10. 改善方法 ～まずはじめに～
● CSSの記述位置は先頭
→ プログレッシブレンダリング
● JavaScriptの記述位置は最後
→ レンダリングやダウンロードを止める
→ ただし非同期JSは例外
● ファイルの重複

11. 改善方法 ～リクエスト数削減～
● CSSファイルの統合
● JavaScriptファイルの統合
● CSSスプライト
http://k.yimg.jp/images/top/sp2/cmn/pic_all-120118.png

12. 改善方法 ～ファイルサイズ削減～
● 画像ファイルサイズの縮小
○ Smush.It
● テキストファイルのminification(縮小)化
● gzipでファイルサイズを縮小
○ mod_deflate (Apache 2.x)
○ mod_gzip (Apache 1.x)

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.js
HTML5.js
http://html5shiv.googlecode.com/svn/trunk/html5.js

14. CDNのイメージ
大阪 東京 アメリカ西海岸
CDN CDN サーバ CDN サーバ
10ms～20ms 100ms～150ms

15. 改善方法 ～キャッシュ利用～
● metaタグ内の Expire属性
<meta http-equiv="expires" content="秒数またはGMT" />
● mod_expires (Apache)

16. 例：キャッシュ利用の効果
http://php-ninja.com/ http://php-ninja.com/
(初回アクセス時) (２回目アクセス時)
52リクエスト / 418.8KB 8リクエスト / 16.2KB
http://php-ninja.com/ YSlowの結果

17. 改善方法 ～WordPressプラグイン～
● プラグインの数を最小限にする
● Head Cleaner
→ CSS/JSの再配置、統合に効果
● WP Smush.It
→ 画像サイズ削減
● キャッシュ系プラグイン
○ WP SuperCache
○ W3 Total Cache
○ Quick Cache
○ DB Cache Reloaded Fix

18. 改善方法 ～サーバ側の改善～
● サーバ側キャッシュ
● .htaccessを使用を停止する
● php高速化
● MySQL高速化

19. 改善方法 ～その他～
● DNSルックアップを減らす
● ソーシャル連携の課題

20. まとめ
● 自分ができることから手をつけましょう
● 簡単なところから手をつけましょう

21. 参考書籍
ハイパフォーマンスwebサイト
続・ハイパフォーマンスwebサイト
WordPress高速化&スマート運用ガイド