WordBench Saitama vol.6

できることから始めるWordPress高速化
Performance Optimization for WordPress

こもりまさあき

自己紹介を…
こもりまさあき http://blog.gaspanik.com http://protean.im

1972年生まれのフリーランス。
Webをはじめネットワーク関連業務のほか、テクニカルライティングや講師などの
活動が中心。時と場合によって職種が変わるため、職域的な肩書きはなし

仕事にプライベートにと、実はWordPress歴は長い。
一昨年開催されたWordCamp Yokohamaでは「WordPressをより高速に」、昨年
のWordCamp Tokyoでは「レスポンシブ・パブリッシング」というお題で登壇。
WordPress界で著名な「をかもと」さんとWordPressの高速化本を出しました

近著に『WordPress 高速化＆スマート運用必携ガイド（共著・MdN刊）』、
『スマートフォンサイト制作の教科書（共著・MdN刊）』など

Twitter: @cipher / @proteanbm
Instagram: @cipher

今日の概要はこちら

• サイトが遅くなる原因ってなんだろう？

• ボトルネックを探してみよう

• サイトの高速化に効くアレコレ

サトが遅くなる原因ってなんだろう？
イ

どうしてサイトの表示が遅くなるのか？

• バックエンドのサーバや回線の状態がよろしくない
• WordPressの処理に時間がかかっている
• サイトに画像がいっぱい
• 外部のサービスからデータを拾っている

いろいろな条件が重なって遅くなる

• 共用サーバだったら特定時間に重くなる、など
• PHPの処理が遅いのはマシンスペックのせいだけ？
• コンテンツの容量が多ければ、転送時間がかかる
• ソーシャルメディア系のボタン、バナー画像…

まずは、どこに問題があるのかを確かめることが大事

ボトルネックを探してみよう

表示のボトルネックを探して対策する流れ

• 原因を探らないことには、対処のしようがない
• 専用のツールやWebサービスを使って調べる
• 秒数が何秒よりも、何が起こっているのかを調べる
• 原因を見つけたら、そこを潰していく
• できるだけ、ね

代表的なオンラインの計測サービス

• WebPage test （http://webpagetest.org）
• Pingdom Tools（http://tools.pingdom.com/fpt/）
• Loads.in（http://loads.in/）
• Web Wait（http://webwait.com/）

データが転送される様子、ちゃんと見てる？

Webブラウザのアドオンや拡張機能

• Firebug（http://getfirebug.com/） *1

• YSlow!（http://yslow.org/）
• Page Speed（http://bit.ly/HW0vjj）
• GTmetrix（http://gtmetrix.com/）

*1: FirefoxでYSlow!やPage Speedを動かすために必要。と、同時にNetパネルも使える

改善点は、ツールの指標を参考に

わかった。じゃ、WordPress側の問題点を調べるには？

WordPress内部の処理を調べるには

• Debug Bar（http://bit.ly/HW3DMa）
• Debug Bar Extender（http://bit.ly/HW3uZ5）

プラグインのインストール後、wp-config.phpに以下を追加してアクティベート
define('WP_DEBUG', true);
define('SAVEQUERIES', true);
define('WP_DEBUG_DISPLAY', false);

※一通りチェックが終わったら、ディアクティベートしてインストール前の状態に戻しておきましょう

WordPressの処理を眺めてみると…

いろいろな角度から問題点を探りましょう

サイトの高速化に効くアレコレ

©asidemag.com

ボトルネックが見つかったら潰しましょう

プラグインが原因かも？

• 便利なプラグインも多用は禁物
気付かないうちに、それがネックになっていることも

• Debug Bar とにらめっこして減らせるものは減らす

• プラグインじゃなくて、手動でできることもあるし…

変更のないものはキッュ
ャシ対象に

• WordPressの高速化といえば「キャッシュ」

• キャッシュ対象は、HTMLだけじゃない

• 画像やCSS、JSのような変更の少ないものや
DBに対するクエリーをキャッシュしてしまう
→ファイルタイプ別に有効期限を設定（W3 Total Cacheやサーバサイド）
→オブジェクトキャッシュの有効化（WP File Cacheなど）
→DBへのクエリーをキャッシュ（DB Cache Reload Fix）

サーバサイドでファイルに有効期限を設定

• Apache の mod_expires モジュールの場合
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType image/x-icon "access plus 1 years"
ExpiresByType image/vnd.microsoft.icon "access plus 1 years"
ExpiresByType image/jpeg "access plus 10 years"
ExpiresByType image/png "access plus 10 years"
ExpiresByType image/gif "access plus 10 years"
ExpiresByType text/css "access plus 1 years"
ExpiresByType text/javascript "access plus 1 years"
ExpiresByType application/x-javascript "access plus 1 years"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>

転送サイズを少なくする工夫を

• いまどきスマートフォンなどでのアクセスも多い

• 転送サイズそのものを小さくすることを考える
→テキストファイルのMinify（Head CleanerやW3 Total Cacheなど）
→テキストファイルをGzipで圧縮（W3 Total Cacheやサーバサイドで）
→画像から余分なデータをぬいて最適化（WP Smush.it）

サーバサイドでテキストを圧縮するには

• Apache の mod_deflate モジュールの場合
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary
</IfModule>

※Nginxでの設定例は wokamotoさんのスライドに記載されています
コンポーネントを圧縮しよう!: http://dogmap.jp/wckobe2011/#slide-125

HTTPリクエストを少しでも減らす

• できるだけHTTPリクエストを減らしていく
→CSSやJavaScriptの結合（Head Cleaner）
→画像のCSSスプライト化

• 1サーバにかかる負荷を分散させてみる
→JavaScriptをCDN経由で読み込ませる
→画像は別サーバ（別ドメイン）にわけてみる

たとえば、jQueryとかCDN経由で

• jQueryをGoogleから読み込ませる場合
<?php
wp_deregister_script('jquery');
wp_enqueue_script(
'jquery',
'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js',
array(),
'1.7.1');
?>

※jQueryのようにそれなりのサイズがあるファイルは、自サイトから配信するよりCDN経由にした方が速い
Google Libraries API: https://developers.google.com/speed/libraries/devguide
Microsoft Ajax Content Delivery Network: http://www.asp.net/ajaxlibrary/cdn.ashx
cdn js（CloudFlare）: http://www.cdnjs.com/

そういえば、html5.jsとかも

• html5.js をGoogleから読み込むには




※現在、html5.jsはGitHubでメンテナンスされており、最新版はそちらからダウンロードできます
aFarkas/html5shiv · GitHub: https://github.com/aFarkas/html5shiv

外部サイトに起因する問題への対処

• Google Analyticsのコードの非同期化

• ソーシャルメディア系のボタンの非同期化

• JavaScriptのロードや実行を遅らせる

• 不要な外部サービスを減らす（DNSの問い合わせを減らす）

• DNSのプリフェッチを試してみる

DNSのプリフェッチを埋め込む

• link 要素を使って、ドメインを指定
<link rel="dns-prefetch" href="//wcdn.gaspanik.com">
<link rel="dns-prefetch" href="//content.gaspanik.com">
<link rel="dns-prefetch" href="//connect.facebook.net">
<link rel="dns-prefetch" href="//platform.twitter.com">
<link rel="dns-prefetch" href="//static.chartbeat.com">

頻繁に参照されるような外部ドメインがある場合は指定してみるといいかも

※サーバサイドでの有効化の方法は以下のサイトが詳しいです
DNS プリフェッチの制御 - MDN: https://developer.mozilla.org/Ja/Controlling_DNS_prefetching

サーバ側の処理の問題なら

• 自由度の高いホスティングへの移行を考える

• PHPアクセラレータの導入を考える

• Webサーバのチューニング、リプレイス（Apache / Nginx）

• MySQLのチューニング（mysqltuner.pl）
※マルチサイトでの高速化、PHPアクセラレータ、MySQLのチューニングは wokamotoさんのスライドが詳しいです
WordPress を極力動かさない: http://dogmap.jp/wckobe2011/#slide-39
MySQL サーバのチューニング: http://dogmap.jp/wckobe2011/#slide-113

では、いくつかやってみましょう

最後に。
正直な話、ネク
ッは画像だったり外部のデータｗ

まとめ

• なにはともあれ、ボトルネックがどこかを探しましょう

• WordPressの問題なのか、実装の問題なのかをはっきり

• 秒数よりも問題点を発見し、できる対処をしていく

• 環境によってできることできないことがあるので、
できることから順番に適用していきましょう

ありがとうございました

WordBench Saitama vol.6

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (8)

Similar to WordBench Saitama vol.6

Similar to WordBench Saitama vol.6 (20)

More from masaaki komori

More from masaaki komori (20)

Recently uploaded

Recently uploaded (9)

WordBench Saitama vol.6