コピペ一発でSimplicityを結構高速化する方法

Speed Run

Simplicityを高速化し、さらなるパフォーマンスアップをする方法を解説します。

高速化には、ブラウザキャッシュの設定と、リソースを圧縮の設定を行います。

たったこれだけのことですが、かなりの高速化が図れます。

例、Simplicityに今回紹介する高速化のみを行った結果。

Simplicityに今回の高速化のみを行った場合

追記:この方法は、サーバーで採用されているサーバーソフトがApacheでないと利用できません。ご利用のサーバーで採用されているサーバーソフトをこ確認してから設定を行ってください。

この設定をすることで

この設定をすることで、Wordpress全体の高速化対象ファイルに以下の設定を行います。

  1. ブラウザキャッシュの設定(GIF、JPEG、PNG、CSS、JavaScript、WEBフォントファイル)
  2. リソースの圧縮設定(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

上記のコードは、「Nginxを使用しているサーバー(例:wpX)」では動作しません。「Apacheサーバー(例:Xserver)」か、「LiteSpeedサーバー(例:MixHost)」なら利用可能です。

設定方法

次にFTPなどでサーバーにアクセスし、Wordpressインストールフォルダを表示させます。

僕の場合はXSERVERを使用しているのでインストールフォルダは以下になります。

XSERVERの例

/wp-simplicity.com/public_html

この中にある.htaccessファイルを編集します。(無い場合は作成)

ただ、万が一編集に間違いがあるといけないので、必ず編集前にこのファイルをコピーしてバックアップしておいてください。

.htaccessファイルを開きます。中に何か書いてある場合は、絶対消してはいけません

その書いてある設定情報の最後に、先程のブラウザキャッシュとリソース圧縮の設定をコピーして、最終行に追記する形でペーストします。あとは保存して、FTPなどで元の場所に戻してください。

エックスサーバーの場合は最終行が「# END WordPress」のようになっているかもしれません。その場合は、その行のあとに追記してください。

これで設定は完了です。

サイトの状態を確認して、何か問題があったら、先程バックアップしたファイルに戻してください。

高速化設定の効果

高速化設定の効果を、GTmetrixというサイト診断ツールで確認します。

GTmetrix

以下は、上記の設定を記入しただけの変化です。

設定前

.htaccessを設定する前

設定後

.htaccessを設定した後

今回の計測では、CSS、JS、HTMLファイルの縮小や、複数ファイルの統一などの高速化設定は行っていないので、それらも設定をプラグインなどで、より効果の高いものになると思います。

※Simplicityでは、キャシュプラグインの利用になれていない人が使用するのはあまりお勧めしてないです(設定によって表示がおかしくなることがあるので)。

先日メールで、以下のような報告をもらいました。 特定のページで時々PC向け記事がモバイル向け記事として表示される これは、Wordpre...

※どうしてもキャッシュプラグインを使用するのであれば、以下の設定方法をお勧めします。

パソコンとモバイルお分けてキャッシュを作成してくれるW3 Total Cacheプラグインの設定方法です。Wordpress環境でサーバーの応答時間がかなり早くなるのでページ表示が高速化が図れます。

まとめ

こんな感じで.htaccessファイルにコピペするだけで、結構パフォーマンスがよくなります。

結果を見ると、ページサイズも圧縮されていてサーバーの負担を減らすことができています。

設定には、多少注意を要しますが、自分のサイトを診断してみてイマイチだった場合は、こちらの高速化を試していただけると幸いです。

Ptengine
初心者でも見やすいアクセス解析「Ptengine」。無料から使えて、Simplicityから手軽に設定することも可能です。
スポンサーリンク
アドセンス(大)
アドセンス(大)

スポンサーリンク
アドセンス(大)

コメント

  1. こうじ より:

    いつも、貴重な情報をありがとうございます。
    知識のない私でも非常に分かりやすく、参考にさせていただいています。

    今回の高速化の方法ですが、何度トライしてもサーバーエラーになってしまいます。

    ・サーバーの種類
    ・使用しているプラグイン

    の影響など、使えない条件などあるのでしょうか?
    (ちなみに私は、お名前ドットコムを使用しています)

    もしも、何か試せることがありましたら、お教えいただけますと嬉しいです。

  2. わいひら わいひら より:

    多分、サーバーが採用しているサーバーソフトがApache以外だと使用できない方法かもしれません。
    お名前.comはどうか分りませんが、サーバーソフトがnginxとかだと使えないかもしれません。

    プラグインとかは、おそらく関係ないと思います。
    ですので、利用できない場合は、ブラウザキャッシュや、リソース圧縮ができるプラグインを使用すると良いかもしれません。

  3. shu より:

    wpxサーバーにてsimplicityを使用している者ですが、コピペ一発設定を.htaccessファイルに反映させた結果スコアがかなり改善されました。
    しかしpagespeedの「圧縮を有効にする」に以下のような表示がでます

    wp-includes/js/jquery/jquery.js を圧縮すると 61.2 KB(65%)削減できます。
    wp-content/themes/simplicity/style.css を圧縮すると 40.6 KB(74%)削減できます。
    themes/simplicity/webfonts/css/font-awesome.min.css を圧縮すると 20.1 KB(77%)削減できます。
    themes/simplicity/javascript.js を圧縮すると 8.6 KB(71%)削減できます。
    themes/simplicity-child/style.css を圧縮すると 7.4 KB(71%)削減できます。
    wp-includes/js/jquery/jquery-migrate.min.js を圧縮すると 4 KB(57%)削減できます。
    themes/simplicity/css/extension.css を圧縮すると 2.8 KB(69%)削減できます。
    themes/simplicity/css/print.css を圧縮すると 713 バイト(53%)削減できます。

    しかしhttp://wp-simplicity.com/を分析してみたところ
    「圧縮を有効にする」に上記のファイルが表示されませんでした

    これはプラグインを入れたりして改善してるのでしょうか?

  4. わいひら わいひら より:

    このサイトも、上に書かれているものと同じものを貼り付けただけです。
    それ以外は何もしていません。

    もしかしたら、サーバーの設定によっては、うまくいかないこともあるのかもしれません。
    僕は、wpxサーバーは利用したことがないので、原因はちょっとわからないです。
    そこらへんはサーバーに問い合わせてみるといいかもしれません。

  5. shu より:

    了解しました
    WPXに問い合わせてみます
    ありがとうございました

  6. けいと より:

    wpxだとApacheと互換性がないようですね
    mixhostのLiteSpeed Webサーバーは
    完全に互換性があるようです。

  7. ニール より:

    けいとさん

    すでにご存知かも知れませんが、wpxですと独自のキャッシュ設定がありますので、すでに有効になっているかも知れません。

    wpx キャッシュ設定
    https://www.wpx.ne.jp/server/manual/wordpress_setting_cache.php

  8. ニール より:

    けいとさん失礼しました。
    shuさん宛です。

  9. わいひら わいひら より:

    調べてみたら、wpxは、nginxを使用しているんですね。
    さらなるシステム高速化・安定性向上を実現! Nginx導入のお知らせ – 2016/08/18 | WordPress専用のレンタルサーバー【wpXレンタルサーバー】
    このページで書かれている方法は、Apache系のサーバーシステムでしか利用できないです。
    原因は、nginxだったみたいですね。本文の方にも注意書きを追記しておこうと思います。