5分でわかる!WP Super Cache の使い方

WordPress
WordPress
スポンサーリンク

WP Super Cache は、ブログ記事などから HTMLファイルを生成し(これを「キャッシュ」と呼びます)ユーザーのアクセスに対してこの HTMLファイルを表示することで PHPやデータベースの処理を減らし、ウェブサイトのパフォーマンスを向上させてくれる WordPress プラグインです。WP Super Cache は、使いこなすのが難しいと言われているプラグインですが、ポイントさえ押さえておけば誰でも簡単にページの表示を高速化することができます。そこで今回は、WP Super Cache 使い方をポイントを絞ってまとめてみました。

そもそも WP Super Cache でどれだけ早くなるの?

「高速化!」と言われても、具体的にどれだけ早くなるのかが気になるところだと思います。サーバーの性能などにもよりますが、レスポンスタイム(ファーストバイト)で計測すると 0.5秒くらい早くなります。サーバー監視ツールなどのグラフで見ると WP Super Cache の効果がよくわかると思います。

レスポンスタイムのグラフ

WP Super Cache のインストール

WordPress の管理画面で、プラグイン>新規追加から「WP Super Cache」を検索してインストールします。

WP Super Cache のインストール

WP Super Cache がインストールされたら「有効化」をクリックします。(プラグインを有効にしても、まだキャッシュは有効にはなりません)

WP Super Cache の有効化

設定のポイントは「キャッシュの有効期限」

色々と設定ができる WP Super Cache ですが、ポイントはキャッシュの有効期限の設定です。これさえしっかり設定できていれば、他の設定はいじる必要はありません。最適なキャッシュの有効期限は、コンテンツの内容やアクセス数などによって異なりますので、設定パターンを3つご紹介します。

その1:キャッシュの有効期限「短め」

サイドバーに頻繁に更新されるコンテンツ(記事ランキングなど)や、RSSフィードがある場合は、キャッシュの有効期限を短めに設定します。この設定では、古いキャッシュを表示する可能性がほとんど無くなりますが、約1時間に1回、ユーザーがページにアクセスした時にキャッシュを生成するため、そのユーザーへの表示速度は遅くなります。

設定>WP Super Cache>「詳細」タブを選択して、キャッシュのタイムアウト「3600」(秒)、タイマー「600」(秒) を入力し、下の方にある「有効時間を変更」ボタンをクリックします。この設定では、10分ごとにキャッシュ(生成されたHTMLファイル)をチェックして、1時間以上前に生成されたキャッシュは削除されます。

キャッシュの有効期限の設定「短め」

設定が終わったら「簡易」タブを選択して「キャッシング利用 (推奨)」を選択して「ステータスを更新」をクリックします。

キャッシュの有効化

その2:キャッシュの有効期限「長め」

サイドバーやRSSフィードが1日くらい更新されなくても構わない場合は、キャッシュのタイムアウト「86400」(秒)、タイマー「86400」(秒) に設定します。この設定では、1日ごとにキャッシュをチェックして、1日以上前に生成されたキャッシュは削除されるようになります。

キャッシュの有効期限の設定「長め」

キャッシュの更新は1日ごとになりますが、記事や固定ページの内容を更新した場合は、キャッシュも更新されますので一般的なブログサイトでしたら、この設定で問題ないでしょう。

その3:プリロードモード

キャッシュの有効期限「長め」の設定で問題ないのであれば「プリロードモード」がオススメです。上の2つの設定は、ユーザーがアクセスした時にキャッシュを生成するため、どうしても表示速度が遅くなる場合があります。

プリロードモードなら、あらかじめキャッシュを生成してくれますので、どのユーザーの表示速度も早くなります。特にアクセス数が少ない記事が多いブログサイトでは、このプリロードモードが効果的です。

プリロードモードの設定の前にキャッシュを有効にしておいてください。

設定>WP Super Cache>「プリロード」タブを選択、リフレッシュ時間(キャッシュの有効期限)に「1440」(分) = 1日 を入力して、「プリロードモード」にチェックを入れて「キャッシュプリロードをすぐに実行」をクリックすれば、キャッシュの生成が開始します。

プリロードモードの設定画面

動作確認

以上で、キャッシュが有効になりました。適当な記事を表示してソースの一番下を見ると WP Super Cache で生成された HTMLファイルであることが確認できると思います。

WP Super Cache で生成されたHTMLファイルのソース

また、生成された HTMLファイルは、「wp-content/cache/」の下に保存されています。

cat wp-content/cache/supercache/www.example.com/wp-cache-e4b9349087c4a8848438ee51a89595b6.php
(略)
<!-- Dynamic page generated in 0.315 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2019-03-29 00:14:13 -->

使い方のポイントは「キャッシュを削除」

WP Super Cache を使っていてよく発生するのが、「サイドバーを変更したのに反映されない」「スタイルシートを変更したのに変わらない」といった問題です。これは、キャッシュ(生成されたHTMLファイル)が有効期限をむかえておらず、変更がキャッシュに反映されていないために発生します。(正常な動作です)

この問題を解決するのはごく簡単で、管理画面上部にある「キャッシュを削除」をクリックするだけで解決します。

「キャッシュを削除」ボタン

「削除」とあるので、ためらってしまうかもしれませんが、キャッシュはすぐ生成されますのでまったく問題ありません。ページの表示にかかわる変更したら、ガンガン「キャッシュを削除」ボタンをクリックしてキャッシュを削除してしまいましょう。すぐに変更が反映されたキャッシュが生成されます。

WP Super Cache は不具合やエラーが多いのでは?

なにかと悪者にされがちな WP Super Cache ですが、WP Super Cache の不具合とされているもののほとんどは、ディレクトリやファイルに適切なパーミッションが設定されていないことによるものです。

なにかエラーが発生したり、キャッシュが削除できなくなった場合は、「wp-config.php」ファイルや「wp-content」ディレクトリのオーナーおよびパーミッションの設定を確認してみましょう。これらのファイルやディレクトリに Webサーバーの実行ユーザーが書き込みをできないと、エラーや不具合が発生します。

また、上にも書きましたが WP Super Cache のキャッシュは、初期設定から変更していなければ wp-content ディレクトリ下の「cache」に保存されています。もしどうしてもキャッシュが削除できなくなってしまったら手動でこのディレクトリを削除しても構いません。

おわりに

最後に WP Super Cache の使い方のポイントのおさらいです。

  • キャッシュの有効期限を適切に設定
  • なにか変更したら「キャッシュを削除」をクリック

もし、WP Super Cache を使うのなら、ぜひ覚えておいてくださいね。

この記事をシェアする
あぱーブログをフォローする
スポンサーリンク
スポンサーリンク

コメント

',b.captions&&s){var u=J("figcaption");u.id="baguetteBox-figcaption-"+t,u.innerHTML=s,l.appendChild(u)}e.appendChild(l);var c=J("img");c.onload=function(){var e=document.querySelector("#baguette-img-"+t+" .baguetteBox-spinner");l.removeChild(e),!b.async&&n&&n()},c.setAttribute("src",r),c.alt=a&&a.alt||"",b.titleTag&&s&&(c.title=s),l.appendChild(c),b.async&&n&&n()}}function X(){return M(o+1)}function D(){return M(o-1)}function M(e,t){return!n&&0<=e&&e=k.length?(b.animation&&O("right"),!1):(q(o=e,function(){z(o),V(o)}),R(),b.onChange&&b.onChange(o,k.length),!0)}function O(e){l.className="bounce-from-"+e,setTimeout(function(){l.className=""},400)}function R(){var e=100*-o+"%";"fadeIn"===b.animation?(l.style.opacity=0,setTimeout(function(){m.transforms?l.style.transform=l.style.webkitTransform="translate3d("+e+",0,0)":l.style.left=e,l.style.opacity=1},400)):m.transforms?l.style.transform=l.style.webkitTransform="translate3d("+e+",0,0)":l.style.left=e}function z(e){e-o>=b.preload||q(e+1,function(){z(e+1)})}function V(e){o-e>=b.preload||q(e-1,function(){V(e-1)})}function U(e,t,n,o){e.addEventListener?e.addEventListener(t,n,o):e.attachEvent("on"+t,function(e){(e=e||window.event).target=e.target||e.srcElement,n(e)})}function W(e,t,n,o){e.removeEventListener?e.removeEventListener(t,n,o):e.detachEvent("on"+t,n)}function G(e){return document.getElementById(e)}function J(e){return document.createElement(e)}return[].forEach||(Array.prototype.forEach=function(e,t){for(var n=0;n","http://www.w3.org/2000/svg"===(e.firstChild&&e.firstChild.namespaceURI)}(),m.passiveEvents=function i(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function(){e=!0}});window.addEventListener("test",null,t)}catch(n){}return e}(),function a(){if(r=G("baguetteBox-overlay"))return l=G("baguetteBox-slider"),u=G("previous-button"),c=G("next-button"),void(d=G("close-button"));(r=J("div")).setAttribute("role","dialog"),r.id="baguetteBox-overlay",document.getElementsByTagName("body")[0].appendChild(r),(l=J("div")).id="baguetteBox-slider",r.appendChild(l),(u=J("button")).setAttribute("type","button"),u.id="previous-button",u.setAttribute("aria-label","Previous"),u.innerHTML=m.svg?f:"<",r.appendChild(u),(c=J("button")).setAttribute("type","button"),c.id="next-button",c.setAttribute("aria-label","Next"),c.innerHTML=m.svg?g:">",r.appendChild(c),(d=J("button")).setAttribute("type","button"),d.id="close-button",d.setAttribute("aria-label","Close"),d.innerHTML=m.svg?p:"×",r.appendChild(d),u.className=c.className=d.className="baguetteBox-button",function n(){var e=m.passiveEvents?{passive:!1}:null,t=m.passiveEvents?{passive:!0}:null;U(r,"click",x),U(u,"click",E),U(c,"click",C),U(d,"click",B),U(l,"contextmenu",A),U(r,"touchstart",T,t),U(r,"touchmove",N,e),U(r,"touchend",L),U(document,"focus",P,!0)}()}(),S(e),function s(e,a){var t=document.querySelectorAll(e),n={galleries:[],nodeList:t};return w[e]=n,[].forEach.call(t,function(e){a&&a.filter&&(y=a.filter);var t=[];if(t="A"===e.tagName?[e]:e.getElementsByTagName("a"),0!==(t=[].filter.call(t,function(e){if(-1===e.className.indexOf(a&&a.ignoreClass))return y.test(e.href)})).length){var i=[];[].forEach.call(t,function(e,t){var n=function(e){e.preventDefault?e.preventDefault():e.returnValue=!1,H(i,a),I(t)},o={eventHandler:n,imageElement:e};U(e,"click",n),i.push(o)}),n.galleries.push(i)}}),n.galleries}(e,t)},show:M,showNext:X,showPrevious:D,hide:j,destroy:function e(){!function n(){var e=m.passiveEvents?{passive:!1}:null,t=m.passiveEvents?{passive:!0}:null;W(r,"click",x),W(u,"click",E),W(c,"click",C),W(d,"click",B),W(l,"contextmenu",A),W(r,"touchstart",T,t),W(r,"touchmove",N,e),W(r,"touchend",L),W(document,"focus",P,!0)}(),function t(){for(var e in w)w.hasOwnProperty(e)&&S(e)}(),W(document,"keydown",F),document.getElementsByTagName("body")[0].removeChild(document.getElementById("baguetteBox-overlay")),w={},h=[],o=0}}})
タイトルとURLをコピーしました