WordPressサイトを多少高速化する方法その3

前回の続きですその1でもいくつか高速化に使えるプラグインを紹介しましたので、あと幾つかプラグインを使った高速化について書いていこ...

monopro.org

2016-06-30 20:30

前回の続き3回目。これでラストです。
ここまで主にプラグインで色々やってきたので、レンタルサーバー等でできる残りの手段として.htaccessでサーバーの設定をちょっと変える方法を紹介します。

そもそも.htaccessって

VPSやクラウドサーバーが手軽に使えるようになる前、個人でサイトを公開するとしたらレンタルサーバー以外のものはあまり選択肢としてなかった時代から.htaccessという謎なファイルは、なんかよくわからないけど色々書いて色々設定できる便利っぽいけど小難しい奴として存在し続けています。
サーバーを扱える人にとってはなんでもない当たり前の存在ですが、レンタルサーバーでのみサイト運営してきた人にとっては割と謎の存在のような気がします。
その正体……というと大げさですが、.htaccessというのは配置したディレクトリ以下に対してサーバーの設定を上書き変更するためのファイルでございます。
書式は基本的にWEBサーバーのApache大本の設定ファイルと同じです。
Apacheにはモジュールというものが組み込まれていて、それらによって単純にサーバー上のファイルをブラウザに返すだけではないいろんな便利機能を使うことができるようになります。
デフォルトのWordPressにおいても、パーマリンクの機能なんかはrewriteというモジュールを利用することで動作しています。
モジュールの中にはいくつかサイトのパフォーマンスを向上させることができるものがありますので、それらを使ってWordPressを多少高速化していきます。
ですのでこの記事での手法が使えるのは.htaccessが使用できるサーバー(WordPressが動くサーバーは大抵大丈夫なはずですが)、かつ使用するモジュールが有効になっているサーバーである必要があります。

ブラウザキャッシュを使う

静的なファイルをブラウザにキャッシュさせ、2回目や2ページ目以降のアクセスをサーバーではなくローカルから読み込ませ表示を高速化します。
これを設定できるモジュールとして主にexpiresとheadersというモジュールがApacheにはありますが、何かと細かく設定できるheadersをここでは使いたいと思います。
基本的な設定内容は以下のようになります。

<IfModule mod_headers.c>
#htmlやphpはキャッシュしない
<Files ~ "\.(html|php)$">
    Header set Pragma no-cache
    Header set Cache-Control no-cache
</Files>

#jsとcssを2日保持する
<Files ~ ".(js|css)$">
    Header set Cache-Control "max-age=172800"
</Files>

#画像は1週間保持する
<Files ~ ".(gif|jpe?g|png|gif|ico)$">
    Header set Cache-Control "max-age=604800"
</Files>
</IfModule>

これをサイトのルートディレクトリに既に.htaccessがあればそれに追記します。無ければ新規に作成してFTPなどでアップロードします。
パーマリンクを使用している場合、WordPressが生成したrewriteモジュールの設定が記述されていると思いますが、その部分はいじらず外側に追記してくださいね。
具体的にはIfmodule mod_rewrite～などと書いてあるタグの外側です。
今回わかりやすくjs,cssと画像で設定を分けていますが、そうそうファイル内容を変更しないのであればもちろん一律1週間でもかまいませんし、長時間保持されては困るのであれば2時間などでもいいと思います。
ただしあまりに短いとPageSpeedInsightsのスコアは落ちますので、問題なければ1週間以上にしておけばいいと思います。
キャッシュの保持期間はmax-ageの数字をいじれば変更できます。単位は全て秒ですので計算に注意してくださいね。
Headersが有効で設定内容が間違いなければ、Google Chromeのデベロッパーツールを開き、Networkからキャッシュされているはずのファイルを選択するとレスポンスヘッダーにキャッシュコントロールの項目ができているはずです。

これで2回目以降のアクセス時はサーバーではなくローカルから読み込まれ、高速に表示されることになります。

圧縮転送(gzip)を使う

Apacheの便利モジュールは他にも色々とありまして、高速化に有効なのがファイルを事前に圧縮した上でブラウザに送信することで転送量を減らしてくれる、deflateというモジュールです。
PageSpeedInsightsに「圧縮を有効にする」という項目がありますが、これはそのdeflateを使えるなら使えと言ってるわけですね。
ちなみに圧縮時にサーバーのパワーを少々使いますのでかなり古かったりスペックが低いサーバーでは逆に遅くなることもあり得ます。
ですがまぁそれは余程の場合だと思いますので、昨今のものならレンタルサーバーでも使ったほうが早くはなるはずです。
というわけでコイツの設定方法です。

<IfModule mod_deflate.c>
    #圧縮を有効化
    SetOutputFilter DEFLATE

    #IEを除く古いブラウザでは無効
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

    #画像ファイル等圧縮済みのものは除外
    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
    SetEnvIfNoCase Request_URI _\.utxt$ no-gzip

    #htmlやcssなど圧縮するファイルを指定
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/atom_xml
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>

ブラウザキャッシュと同じように.htaccessのWordPress生成部分の外に追記します。
画像のようなファイルサイズが大きいもの、既に圧縮されているものは圧縮転送しても意味がない上にサーバーに負荷がかかるので除外します。
特に効果を発揮するのがhtmlやcss、jsなどのテキストファイルですので、それらをMIMEタイプで指定してあげます。
無事有効になっているか確認するにはブラウザキャッシュ同様デベロッパーツールを使用します。

上記のようにContent-Encodingの項目にgzipと表示されていれば圧縮転送(gzip)が有効化されています。

さらっと書くつもりが3記事に分けるくらい長々ダラダラとなってしまいましたが、この辺りの一通りの手段で、サーバーを直にいじれない人、レンタルサーバーを使用してる人でもWordPressがある程度は軽くできると思います。
重いサイトは閲覧者はもちろん管理する方でも嫌に感じるものですからね、少しでも何かの助けになれば。