うちのWordPressでやってることを教えます

この1年ちょっとぐらいかな?結構あれこれとサイトのパフォーマンス改善みたいな話(WordPress含む)を書いてるんですけど、昨日書いて公開したのが思いの外反応があったようでありがとうございます。お礼といってはなんですが、誰かのためになるかもしれないので、現時点でのうちの環境を記しておきます。


以前から読んでくださってる皆さんには「またかよ」って話になるのですが、このへなちょこブログを書いてるWordPressの設定は以下のような感じです。昨日書いた内容に大体則すような流れにしておきました。

  • キャッシング: W3 Total Cache(以下、W3TC)
  • Minify化: HTMLのみW3TC、CSS/JSは手動(外部サービス以外)
  • 画像の最適化: WP Smush.itで自動実行
  • 配信サーバの分割: EdgeCastのCDN(Content Delivery Network)
  • Gzipの有無: Apache側で有効化
  • ファイルの有効期限: Apache側で個別に設定
  • head要素の最適化: 手動

APCを入れてる以外は特にバックエンドのサーバ側をチューニングしたりといったアレコレはやっていません(サーバのことを触らないつもりで引っ越したので…)。画像の最適化は、以前にも書いてるのでやっぱり省略します。

W3 Total Cacheでやってること

キャッシング系のプラグインとして有名な「WP Super Cache」ではなく、機能が豊富でかなり細かい設定が可能な「W3 Total Cache」をインストールして楽をしています(笑)。

静的なファイルでなく、Opcode Cacheで

W3TCもまた静的なHTMLファイルをキャッシュしておくことができますが、サーバ側に「APC」を突っ込んであるのもあって、せっかくなので静的なファイルではなくOpcode Cacheを使ってます(ここは気分的にw)。W3TCでは、ファイルやDBへの接続なども個別に指定できるようになっていますし、キャッシュを使用しないUAを指定したりといったことも可能です。

一応DBとかのキャッシュも有効にしてます。

HTMLのMinify化

W3TCには、HTML/CSS/JavaScriptのMinify化のオプションもあります。こちらはHTMLのみオンにしてファイルではなくこれもまたOpcode Cacheで。CSSとJSは数も多くないので手動でやってます。

CSSやJSなどは、複数ファイルの結合なんかも設定可能になってます(Minify化しないで結合だけとかも可)。

CDNの有効化

うちは契約しているサーバのオプションでEdgeCastのCDNが使えるのでそれを利用してます(なんせ海の向こうなので遠いんですよ…)。

W3TC側ではCDN側に設定したサーバのドメイン名(CNAME)を入れれば、あとは自動的に「wp-includes」以下のディレクトリやコンテンツ内にアップする画像のパスをCDN側のドメインに置換してくれます。うちのCDNはOrigin Pullなので、記事を公開すればCDNからデータを吸い上げてくれるので完全放置です(笑)。

あ、そうそうW3TCのCDNの設定には、FTPというかSelf Hostedなサイトのオプションもあるので、昨日書いたみたいに自前のサーバでサブドメイン使ったりする人にもいいかもしれません。

それ以外にW3TCでできること

それ以外にも、W3TCの中でMinify化やキャッシングにプラスしてGzip圧縮をかけてみたり、HTTPヘッダを付けたりしてファイルタイプ別に有効期限の設定などもできますね。うちはその辺の作業はサーバ側でまとめてやってしまっているので、W3TC側では前述したもの以外は特に何もしてません。

Apache側でやっていること

W3TCでいろいろできるのはわかってますが、いちいちWordPressの管理画面開いて設定するより、直接サーバ側で細かくコントロールした方が早いし楽なので、Gzip圧縮とファイルタイプ別の有効期限設定をおこなってます。

mod_deflateでGzip圧縮

うちなんかはそんなアクセスも多くないですし、訪問される方もだいぶ偏っているので特に気にもせずGzip圧縮が有効になるように.htaccessで設定しています。以下は、Apache 2.x系での設定例です。


AddOutputFilterByType DEFLATE text/html text/plain

せっかちな人はこんな感じでHTMLのみとかもできます。


<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>

特定のブラウザやファイルタイプにはGzipしないとかまでいれるとこんな感じ。詳しいことは、Apacheのマニュアルがバージョン毎に公開されてるのでそれを見ましょう。

mod_expiresで有効期限を追加

ファイルの有効期限は、Apache側でmod_expiresを使って設定しています。全部は載せてませんが、.htaccessとかでHTMLやらCSS、JavaScriptに有効期限を設定するにはこういう風に書けておけばいいですね。

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault “access plus 1 seconds”
(中略)
ExpiresByType text/css “access plus 2 weeks”
ExpiresByType text/javascript “access plus 2 weeks”
ExpiresByType application/x-javascript “access plus 2 weeks”
ExpiresByType text/html “access plus 600 seconds”
ExpiresByType application/xhtml+xml “access plus 600 seconds”
</ifModule>

1なのに「seconds」とかsついてるじゃんみたいなくだらない突っ込みはやめてください。これでも動きますから(笑)。

HTMLのhead要素の最適化

HTMLのhead要素の最適化は、「Head Cleaner」などを入れれば何か何までやってもらえるのがわかってますが、以前から自分でプラグインの中身とかゴニョゴニョしていらんもんが出ないように改良したので手動です(笑)。

ブラウザの並行ダウンロードを妨げないように、画面の描画に関係ないJavaScriptは、</body>の直前あたりで読み込むように全部下に。直接コードが書かれてるJavaScriptは、head要素のtitle直下に置いてます。

head要素の中でいくつかのCSSを読み込んだり、JavaScriptを読み込んでる場合(もちろん直接書かれてるのも含め)は、その順番次第で表示速度が変わってくるかもしれませんので調べてみるといいですね(変えたくても、読み込み順が関係するものもあるでしょうけど)。

と、こんな感じっす

このブログはWordPressの以前のデフォルトテーマのままですしCSSもほとんどいじってはいません(仕事じゃないんで 笑)。W3TCに任せる部分とサーバ側でやる部分をわけて、読み込み順の調整やMinify化、テンプレート中の画像の最適化なんかは手作業でやってます。記事中の画像は「WP Smush.it」で最適化、と。

サーバが海の向こうってこともあるので、全部を一カ所から出すと遅くなるだろうな?ということで、一応CDNをかまして画像だけでもできるだけ近いところから出てくるようにしてる、ぐらいでしょうか。

と、こんな感じっす。

#サーバ側があれこれいじれないのであれば、キャッシングの機能を使わなくともW3TC使うのもありじゃないでしょうかね。

Tags: , , , , ,

   

Comments are closed.


Performance Optimization WordPress Plugins by W3 EDGE