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

こもりまさあき

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

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

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

Twitter: @cipher / @proteanbmInstagram: @cipher

こもりまさあき

自己紹介を…http://blog.gaspanik.com 　http://protean.im

今日の概要はこちら

• サイトが遅くなる原因ってなんだろう？• ボトルネックを探してみよう• サイトの高速化に効くアレコレ

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

• バックエンドのサーバや回線の状態がよろしくない• 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/）

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

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

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

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

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

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

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

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

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

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

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

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

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

DEMO

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

©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リクエストを減らしていく→CSSやJavaScriptの結合（Head Cleaner）→画像のCSSスプライト化

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

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

• jQueryをGoogleから読み込ませる場合

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

<?phpwp_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/devguideMicrosoft Ajax Content Delivery Network: http://www.asp.net/ajaxlibrary/cdn.ashxcdn js（CloudFlare）: http://www.cdnjs.com/

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

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

<!--[if lt IE 9]> <script type="text/javascript">document.write(unescape('%3Cscript src="' + ('https:' == document.location.protocol ? 'https://' : 'http://') + 'html5shiv.googlecode.com/svn/trunk/html5.js" %3E%3C/script%3E'));</script><![endif ]-->

<!--[if lt IE 9]> <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif ]-->

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

• Google Analyticsのコードの非同期化• ソーシャルメディア系のボタンの非同期化• JavaScriptのロードや実行を遅らせる• 不要な外部サービスを減らす（DNSの問い合わせを減らす）• DNSのプリフェッチを試してみる

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

• link 要素を使って、ドメインを指定

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

<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-39MySQL サーバのチューニング: http://dogmap.jp/wckobe2011/#slide-113

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

DEMO

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

まとめ

• なにはともあれ、ボトルネックがどこかを探しましょう• WordPressの問題なのか、実装の問題なのかをはっきり• 秒数よりも問題点を発見し、できる対処をしていく• 環境によってできることできないことがあるので、できることから順番に適用していきましょう

ありがとうございました