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

1. Webのパフォーマンスを考える
～WordPressと付き合うために～
@ 【第三回】初心者向けホームページ勉強会 2012/6/10
こばやし たけし / @tama200x

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

3. 本日のテーマ
Webのフォーマンス改善
(WordPressのパフォーマンス改善も少しだけ...)
● パフォーマンスが悪い原因
● フォーマンスの改善方法

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. 受信

9. ダウンロードの流れ②
Firebugのネットタブ
例：http://php-ninja.com/

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高速化

27. 改善方法 ～その他～
● ソーシャル連携の課題
● モバイルへの対応

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

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

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