Simplicityを高速化し、さらなるパフォーマンスアップをする方法を解説します。
高速化には、ブラウザキャッシュの設定と、リソースを圧縮の設定を行います。
たったこれだけのことですが、かなりの高速化が図れます。
例、Simplicityに今回紹介する高速化のみを行った結果。
追記:この方法は、サーバーで採用されているサーバーソフトがApacheでないと利用できません。ご利用のサーバーで採用されているサーバーソフトをこ確認してから設定を行ってください。
この設定をすることで
この設定をすることで、Wordpress全体の高速化対象ファイルに以下の設定を行います。
- ブラウザキャッシュの設定(GIF、JPEG、PNG、CSS、JavaScript、WEBフォントファイル)
- リソースの圧縮設定(TEXT、HTML、XHTML、XML、RSS、CSS、JavaScript、WEBフォントファイル)
ブラウザキャッシュを設定すると、読者の再訪問時に1度読み込んだファイルはブラウザのキャッシュから読まれるようになるので、サーバーの負担を軽減することができます。
リソース圧縮の設定を行うと、対象ファイルを一旦サーバー側で小さく圧縮してから転送し、ブラウザで回答して表示します。そうすることで、小さな転送サイズですのでサーバーの負担を軽減することができます。
今回行う設定でWordpress全体(共有ファイル、プラグインファイルなど)の全てのファイルに対して高速化設定が適用されます。
高速化の設定
WordPress全体に高速化設定を行うといっても難しい事ではありません。その設定自体は、コピペ一発で行えます。
設定には以下の記述を使います。
# ETags(Configure entity tags) を無視する設定
<ifModule mod_headers.c>
Header unset ETag
</ifModule>
FileETag None
# Enable Keep-Alive を設定
<IfModule mod_headers.c>
Header set Connection keep-alive
</IfModule>
# MIME Type 追加
<IfModule mime_module>
AddType text/cache-manifest .appcache
AddType image/x-icon .ico
AddType image/svg+xml .svg
AddType application/x-font-ttf .ttf
AddType application/x-font-woff .woff
AddType application/x-font-woff2 .woff2
AddType application/x-font-opentype .otf
AddType application/vnd.ms-fontobject .eot
</IfModule>
# プロクシキャッシュの設定(画像とフォントをキャッシュ)
<IfModule mod_headers.c>
<FilesMatch "\.(ico|jpe?g|png|gif|svg|swf|pdf|ttf|woff|woff2|otf|eot)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
# プロキシサーバーが間違ったコンテンツを配布しないようにする
Header append Vary Accept-Encoding env=!dont-vary
</IfModule>
# ブラウザキャッシュの設定
<IfModule mod_headers.c>
<ifModule mod_expires.c>
ExpiresActive On
# キャッシュ初期化(1秒に設定)
ExpiresDefault "access plus 1 seconds"
# MIME Type ごとの設定
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType text/js "access plus 1 weeks"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType application/pdf "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType application/x-font-woff2 "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>
</IfModule>
# Gzip圧縮の設定
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
# 古いブラウザでは無効
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html
# 画像など圧縮済みのコンテンツは再圧縮しない
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|eot|woff|woff2)$ no-gzip dont-vary
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/js
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-opentype
</IfModule>
これらは、ブラウザキャッシュやリソース圧縮の設定が書いてあります。
上記のコードは、以前僕が当ページで公開していたコードを、Thought is freeのるなさんが、より効果的になるよう修正していただいたものです。
以下のページには、コードとともに解説もあるので、詳しくは以下を参照してください。
参考 [改訂版] .htaccess の見直しでWebページ高速化 | Thought is free
上記のコードは、Apache、Apache互換のLiteSpeedサーバー用の設定です。nginxでは利用できません。ただ、エックスサーバーはnginxでも利用できるように設定されています(詳細)。
設定方法
次にFTPなどでサーバーにアクセスし、Wordpressインストールフォルダを表示させます。
僕の場合はXSERVERを使用しているのでインストールフォルダは以下になります。
XSERVERの例
/wp-simplicity.com/public_html
この中にある.htaccessファイルを編集します。(無い場合は作成)
ただ、万が一編集に間違いがあるといけないので、必ず編集前にこのファイルをコピーしてバックアップしておいてください。
.htaccessファイルを開きます。中に何か書いてある場合は、絶対消してはいけません。
その書いてある設定情報の最後に、先程のブラウザキャッシュとリソース圧縮の設定をコピーして、最終行に追記する形でペーストします。あとは保存して、FTPなどで元の場所に戻してください。
これで設定は完了です。
サイトの状態を確認して、何か問題があったら、先程バックアップしたファイルに戻してください。
高速化設定の効果
高速化設定の効果を、GTmetrixというサイト診断ツールで確認します。
GTmetrix
以下は、上記の設定を記入しただけの変化です。
設定前
設定後
今回の計測では、CSS、JS、HTMLファイルの縮小や、複数ファイルの統一などの高速化設定は行っていないので、それらも設定をプラグインなどで、より効果の高いものになると思います。
※Simplicityでは、キャシュプラグインの利用になれていない人が使用するのはあまりお勧めしてないです(設定によって表示がおかしくなることがあるので)。
※どうしてもキャッシュプラグインを使用するのであれば、以下の設定方法をお勧めします。
まとめ
こんな感じで.htaccessファイルにコピペするだけで、結構パフォーマンスがよくなります。
結果を見ると、ページサイズも圧縮されていてサーバーの負担を減らすことができています。
設定には、多少注意を要しますが、自分のサイトを診断してみてイマイチだった場合は、こちらの高速化を試していただけると幸いです。