ホーム > ブログ > WordPress > ウェブサイト高速化 > 【WordPress】サイト高速化プラグインで表示速度を劇的改善[Autoptimize]×[Cache Enabler]【測定・比較データ有】

【WordPress】サイト高速化プラグインで表示速度を劇的改善[Autoptimize]×[Cache Enabler]【測定・比較データ有】

この記事は約 21 分で読めます。

ウェブサイトの高速化や表示速度はユーザーにとって最も重要な要素のひとつで、Googleが掲げるユーザーファーストの観点からもSEO上の評価に影響があると言われています。

WordPressサイトの高速化・表示速度改善について検討する際、いくつかの方法が考えられます。

「サーバー環境・サーバースペックの見直し」
「ブラウザキャッシュやgzip圧縮など.htaccessファイル設定の見直し」
「HTML/CSS/JSなどのソース構造の最適化・minify化」
「画像最適化」
「WordPressのキャッシュ系プラグインの導入」

・・・などなど、具体例を挙げ出すとキリが無いほど対策方法は多岐に渡りますが、真っ先に候補に挙がるのがキャッシュ系プラグインの導入ではないでしょうか。

理由は導入コストを抑えつつ、期待できる効果が高いからです。

一括りに「キャッシュ系プラグイン」と言っても、必要最低限の機能に絞ったシンプルなものから、広範囲をカバーする多機能なプラグインまで・・・世の中には数多くの優秀なプラグインが存在します。

WordPressにおけるキャッシュ系プラグインと言えば、一般的にはWP Fastest Cache」「WP Super Cache」「W3 Total Cacheなどが有名ですよね。

サーバー環境や使用テーマ・プラグインとの相性に問題がなければ、設定方法を間違えない限り一定の効果を得られることでしょう。

ただ、サーバー環境やウェブサイトの種別、WordPressのテーマ・プラグインとの相性次第で最適解が異なるため「誰にでもオススメできる汎用性の高い本命プラグイン」とは言いづらい悩ましい側面も併せ持っています。

しっかり対処できる知識や技術があれば問題ないのですが、環境や設定次第ではウェブサイトが致命的な状況に陥ることもあり得るため、ライトユーザーやミドルユーザーにとっては正直導入のハードルが高いと言えます。

高速化を図るために導入するプラグインによって、ウェブサイト運用担当者にとってあずかり知らない運用リスクを負うことは避けたいですよね。

本記事ではサイト高速化を実現するためのキャッシュ系プラグイン導入にあたり、以下3項目を最優先事項として位置付けました。

  • 「汎用性の高さ」⇒「特定の環境に依存せず再現性が高い」
  • 「初期導入コストの低さ」⇒「設定方法がシンプル」
  • 「運用時の安定性」⇒「他のプラグインとの競合発生リスクが低い」

試行錯誤した結果、辿り着いたのがAutoptimizeCache Enablerという2つのプラグインの組み合わせによる運用です。

Autoptimizeプラグインの主な役割は「ソースコード圧縮」がメインで、Cache EnablerプラグインはWordPressのページキャッシュを生成する「キャッシュ機能に特化」した役割を担っています。

本記事ではAutoptimizeとCache Enablerという2つのプラグインを組み合わせて使うことで、WordPressサイトの高速化や表示速度が劇的に改善する方法を測定データを交えてお伝えします。

既に「サイト高速化の最適解を見つけ出して対策してるよ」という人にとってはあまり目新しい内容ではありませんが、サイト高速化への取り組みを今から検討しよう考えている人には是非読んでいただきたい内容となっています。

ウェブサイト高速化についての考察

プラグインの解説に入る前に少し脱線と言うか、予備知識的な話をさせていただきます。

ホームページで効果を上げるために大切な要素を大きく4つに分類してみます。(他にも大切な要素はありますが、とりあえず4つ挙げてみます)

  1. 「SEO」=「集客」
  2. 「UI」=「デザイン・導線設計」
  3. 「コンテンツ」=「サービスや商品自体の魅力・コピーライティング」
  4. 「CV」=「購入やお問い合わせのなどの目標到達」

上記項目は深堀りするとさらに細分化できますが「サイト高速化」はどのカテゴリに属するでしょうか?

ここで少し視点を変えて、上記4項目をユーザーの動向から2つに分類してみましょう。

  1. サイト訪問前
    「SEO」
  2. サイト訪問後
    「UI」「コンテンツ」「CV」

このように分類すると分かりやすいかもしれませんね。

「サイト高速化」はそれ自体が主体となるわけではありませんが「サイト訪問後」の全てのアクションに影響してくる重要な要素と言えるでしょう。

たとえ素敵なデザインやUIを兼ね備えた魅力的なサービスを提供するホームページを用意しても、クリックする度にページ遷移の動作がもっさりして表示が遅い場合、どうでしょうか?少しテンションが下がりますよね。。。

ウェブサイトに訪れたユーザー心理をレストランのお客さんに例えると、、、

「入店してから席に案内されるまで待たされる」
「注文を取りに来るのが遅い」
「注文した後に料理が出てくるのが遅い」
「お会計を呼んでも中々来ない、お釣りを持ってくるのも遅い」
・・・etc.

この状況をウェブサイトに置き換えると、、、

「検索結果からクリックしてきたけど初回ページの読み込みが遅い」
「クリックする度に毎回読み込み時間が長い」
「気になる商品のページをクリックしたけどやっぱり動作が重たい」
「商品を購入したいけどショッピングカートの動作も重たい・・・止まった?」

・・・etc.

何をするにしても待たされて対応が遅いお店には行きたくないですよね。。。

たとえ料理が美味しくても、接客や対応スピードが悪ければ顧客満足度には繋がりにくいものです。

ウェブサイトの表示速度はSEOの評価にも影響する」というのは都市伝説ではなくGoogleの検索結果に反映される事実であると言われています。

かつてよく言われていた「ホームページの3秒ルール(3秒以内にページ表示されなければユーザーが離脱する)」が今では「2秒ルール」とも言われる時代です。

ページ表示速度は速ければ速いほど「ユーザーが離脱しにくい」というのはデータから実証されている事実でもあります。

つまりページ表示速度が速いほどSEOに有利であり、ユーザ―の離脱率も下がりコンバージョンにも繋がりやすい、ということですね。

この辺りをしっかりと意識してウェブサイトの高速化に取り組んでいきましょう。

前文からの流れが非常に長くなりましたが、次章よりプラグインの解説をしていきます。

AutoptimizeとCache Enablerプラグインのインストール

まずは2つのプラグインをインストール&有効化していきます。

インストール~有効化~設定完了までの一連の作業は2つのプラグインを併せても10分前後で終わると思います。

ではさらっと解説していきますね。

WordPressのプラグイン新規追加ページの右上の検索窓に「Autoptimize」「Cache Enabler」とそれぞれ入力すると表示されますのでこちらをインストールして有効化してください。
※Cache Enablerは単語間の半角スペースが抜けると検索結果に表示されないためご注意ください。

◆Autoptimizeプラグイン配布サイト
https://ja.wordpress.org/plugins/autoptimize/
星評価:4.7

Autoptimizeはソースコード(HTML/CSS/JS)圧縮や複数ファイルを結合してHTTPリクエスト数を減らすことに特化したプラグインです。

このプラグインの機能を自作PCに例えると、増設に増設を重ねて(プラグインを入れまくったりして)煩雑になった内部の配線やケーブル類をすっきり一つにまとめてくれるプラグイン、といった所でしょうか。
見た目上の配線(ソースコード)がすっきりするだけでなく、PCの処理速度(ページ表示速度)も上がる、という素敵な役割を果たしてくれます。

ページスコアやスピードテストでもけっこう分かりやすい形で結果を出してくれるプラグインです。

すっきり一つにまとめることによる「弊害」が発生するケースもありますが、その辺りは設定項目の説明と併せて解説します。

◆Cache Enablerのプラグイン配布サイト
https://ja.wordpress.org/plugins/cache-enabler/
星評価:4.3

Cache EnablerはWordPressのページキャッシュに特化したプラグインです。

キャッシュについての詳しい説明はここでは割愛しますが、WordPressのページを静的HTML化して呼び出すことで表示速度が上がる仕組みとなっています。

星評価で「1」を付けている人が何人かいるため全体の評価が4.3と控えめです。

低評価者のコメントが気になったのでちょっと見に行きましたが、使い方を間違えているため期待した効果が得られていないケースが大半でした。

星評価で「1」を付けている人のコメントには設定不備や意外なエラー事例のヒントが隠されているケースもあるので物好きな人はチェックしてみてください。(大半が英語ですが・・・)

Autoptimizeプラグインの設定

インストールと有効化が完了すると、サイドバーの設定内および上部バーに「Autoptimize」の項目が表示されますので早速設定画面に飛んでみましょう。

まずは最初に設定画面の右上にある「高度な設定を表示」をクリックします。
ここをクリックすると隠れている詳細項目の設定が表示されます。

図1:Autoptimize設定(高度な設定を表示)
図1:Autoptimize設定(高度な設定を表示)

JS, CSS & HTML

設定画面は4つのタブに分かれていますが、当サイトの設定例に合わせて補足を交えつつ順番に解説していきます。

JavaScriptオプション

当サイトでは以下3つにチェックを入れています。

「JavaScript コードの最適化」
「Aggregate JS-files?」
「インラインの JS を連結」

図2:Autoptimize設定「JavaScriptオプション」
図2:Autoptimize設定「JavaScriptオプション」

以下各項目について簡単な補足を記載します。
不具合に繋がる可能性がある箇所については注意書きを付けています。(以下同)

  • JavaScriptコードの最適化
    チェックを入れます。
  • Aggregate JS-files?
    チェックを入れます。
  • インラインのJSを連結
    チェックを入れます。
    プラグインなどによって吐き出されるインラインJSを連結して外部ファイルに一本化する処理になりますが、エラーが出る場合はチェックを外してみてください。
  • <head>内へJavaScriptを強制
    OFFにします。
    通常はフッターにJSが吐き出されますが、読み込みタイミングの都合などでエラーが出る場合はチェックを入れることでJSをhead内に移動させてエラーを回避できる場合があります。
  • Autoptimizeからスクリプトを除外
    必要がなければ空欄でOKです。
    連結するとエラーが出るなど、最適化させたくないJSがある場合はここにファイル名を記載します。(カンマ区切りで複数ファイルを記述可)
  • try-catchの折り返しを追加
    OFFにします。
    エラーが出る場合はチェックを入れることでエラーを回避できる場合があります。

CSSオプション

当サイトでは以下3つにチェックを入れています。

「CSSコードを最適化」
「Aggregate CSS-files?」
「インラインのCSSを連結」

図3:Autoptimize設定「CSSオプション」
図3:Autoptimize設定「CSSオプション」
  • CSS コードを最適化
    チェックを入れます。
  • Aggregate CSS-files?
    チェックを入れます。
  • インラインのCSSを連結
    チェックを入れます。
    プラグインなどによって吐き出されるインラインCSSを連結して外部ファイルに一本化する処理になります。
  • データを生成 : 画像をURI化
    OFFにします。
    筆者環境では表示不具合に繋がるケースがあったためOFFにしています。
  • CSSのインライン化と遅延
    OFFにします。
  • すべてのCSS をインライン化
    OFFにします。
  • AutoptimizeからCSSを除外
    必要がなければデフォルトのママでOKです。
    最適化させたくないCSSがある場合はここにファイル名を追記します。(カンマ区切りで複数ファイルを記述可)

HTMLオプション

当サイトでは「HTMLコードを最適化」のみにチェックを入れています。

図4:Autoptimize設定「HTMLオプション」
図4:Autoptimize設定「HTMLオプション」
  • HTMLコードを最適化
    チェックを入れます。
    最適化するとソースコードから不要なインデントや改行が削除された状態になります。
  • HTMLコメントを残す
    OFFにします。
    HTML内のコメントを意図的に残したい場合はチェックを入れるとよいでしょう。

CDNオプション

必要がなければ空欄でOKです。
コンテンツ配信にCDNを利用する場合はURLを指定します。

図5:Autoptimize設定「CDNオプション」
図5:Autoptimize設定「CDNオプション」

キャッシュ情報

キャッシュフォルダや書き込み権限について記載されています。
ここは内容を確認するだけで特に設定する箇所はありません。

図6:Autoptimize設定「キャッシュ情報」
図6:Autoptimize設定「キャッシュ情報」

その他オプション

当サイトでは以下3つにチェックを入れています。

連結されたスクリプト / CSSを静的ファイルとして保存
Minify excluded CSS and JS files?
ログイン中のユーザーも最適化しますか ?

図7:Autoptimize設定「その他オプション」
図7:Autoptimize設定「その他オプション」
  • 連結されたスクリプト / CSS を静的ファイルとして保存
    チェックを入れます。
    サーバー側(.htaccessファイル)で圧縮と有効期限を設定していない場合はチェックを外した方がよいかもしれません。
  • Minify excluded CSS and JS files?
    チェックを入れます。
    先のJSとCSSの項目にて除外指定したファイルの挙動がおかしい場合はチェックを外してみるとよいでしょう。
  • ログイン中のユーザーも最適化しますか ?
    筆者は基本的にチェックを入れています。
    一般ユーザーと同じ環境でソースコードが最適化された状態のページを見ておくことで、何か不具合が発生した際に気づきやすくなります。(最適化されている状態とそうでない状態で異なる挙動になるケースがあるためです)

    但し説明書きにあるように、ログイン中に最適化することで稀に管理画面操作にエラーが発生するケースがあります。

    筆者の一部運用サイトでは海外製のビジュアルエディタとの相性によっては(管理画面内のみの挙動ですが)エラーが出るのを確認しています。
    そういった場合はチェックを外してみてください。

全体として、チェックを付けた方がよいのかOFFにした方がよいのか判断しかねる項目がある場合は「ページ表示時のコンソールエラーの有無」や「PageSpeed Insightsなどの測定ツールを使ったテストの判定結果」を見て最適な選択をするとよいでしょう。

各項目の設定が完了したら「変更を保存してキャッシュを削除」をクリックして設定を保存しましょう。

Images

基本的にはデフォルトのママで変更しなくてOKです。

図8:Autoptimize設定「Images」
図8:Autoptimize設定「Images」

追加

ここもデフォルトのママで変更しなくてOKです。

図9:Autoptimize設定「追加」
図9:Autoptimize設定「追加」

更に追加

さらにウェブサイトを高速化するための他のプラグインの案内ページです。
基本的にスルーして問題ありません。

無料で利用できるプラグインから有料のものまで様々な高速化・最適化に関するプラグインが紹介されていますので興味がある方はチェックしてみるのもよいかもしれません。

ここで紹介されているということは、恐らくAutoptimizeとの相性はよいのでしょう。

以上でAutoptimizeプラグインの設定は完了です。

Cache Enablerプラグインの設定

続いてCache Enablerプラグインの解説をしていきます。
こちらの設定画面は1Pで完結します。

というよりは、、、

図10:Cache Enabler設定
図10:Cache Enabler設定

基本的にはデフォルトのママで何も変更しなくてOKです。
恐るべきプラグインですね。(笑)

とはいえ運用環境によっては設定した方がよい項目もあるので各項目について簡単に説明します。

  • Cache Expiry
    キャッシュの有効期限を時間単位で入力します。
    「0」とした場合は期限切れにならず、キャッシュをクリアしない限りはキャッシュが優先表示され続けることとなります。
    筆者の場合は「0」にしつつ必要な時に手動でキャッシュをクリアしています。
  • Cache Behavior
    全ての項目でOFFにします。
    一応項目の説明をしておくと、新しい投稿やコメントがあった際にキャッシュを自動的にクリアするかどうか?といったオプション項目になります。
    運用ポリシーによっては一部項目はチェックONにしてもよいかもしれません。
  • Cache Exclusions
    キャッシュから除外するページIDを入力します。
    ページIDは記事編集画面のアドレスバーに表示される「post.php?post=123」の文字列の中の「123」を指します。
    複数ページを除外したい場合はカンマ区切りで続けて記入します。
    お問い合わせフォームや動的に生成するコンテンツを含むページで挙動に問題が出る場合は、 除外指定をしてみるとよいでしょう。
  • Cache Inclusions
    空欄のママでOKです。
  • Cache Minification
    Autoptimizeと組み合わせて併用する場合は「Disabled」のママでOKです。
    もしCache Enabler単体で利用する場合は、「HTML」もしくは「HTML & Inline JS」いずれかを選択するとよいでしょう。
    いずれかの設定で不具合が出るようなら無難に「Disable」にしておきましょう。

設定項目は以上ですが、次章でいくつかの注意点について補足しておきます。

Cache Enablerプラグインの注意点

プラグインを利用する際の主な注意点を4つ記載します。

キャッシュが効いている状態でのみ効果を体感できる

読んで字の如くですが、まだページキャッシュが生成されていない初回読み込み時は当然速さは体感できません。
ページキャッシュが生成された2回目以降から同ファイルへのアクセスが段違いに速くなります。

また、Autoptimizeの設定で「ログイン中のユーザーも最適化しますか ?」にチェックを入れておりWordPressの管理画面にログインしている場合、Cache Enablerのキャッシュが適用されないようで効果を体感できません。

効果を体感できない場合、ログアウトした状態の別のブラウザで確認してみるとよいでしょう。


キャッシュファイルの削除方法

管理画面の上部バー右側にある「Cache Clear」ボタンをクリックすることで削除可能です。

Autoptimize × Cache Enablerプラグインの組み合わせで運用する場合、Autoptimize側のキャッシュクリア処理を行うと、連動してCache Enablerが生成したキャッシュもクリアされます。

いずれの場合もキャッシュ削除は手動で行う形となります。


以前にキャッシュ系プラグインを入れていた場合のバグ挙動

advanced-cache.phpファイルの削除
Cache Enablerプラグインをインストールする前に他のキャッシュ系プラグインを利用していた場合、たとえプラグインを削除済みでも下記図のような警告が表示されるケースがあります。

図11:警告「advanced-cache.php already exists.」
図11:警告「advanced-cache.php already exists.」

分かりやすく直訳すると「advanced-cache.phpが既に存在します」と警告されているのですが、筆者の場合はCache Enablerを利用する直前までWP Super Cacheを利用しており、その関連ファイルが警告の原因となっていたようです。

WP Super Cacheは既に削除していたのですが、プラグイン管理画面から停止⇒削除するだけでは一部のファイルや設定が完全に削除できないケースがあります。

これはWP Super Cacheに限った話ではなく、他のキャッシュ系プラグインについても同様のケースが発生する場合があるようです。

この場合の対処法としては、FTP経由で該当ディレクトリの指定ファイルを手動で削除することで直ります。


wp-config.phpにdefine(‘WP_CACHE’, true);を追記
もう1点は下記図のような一文が表示される場合があります。

図12:警告「define(‘WP_CACHE’, true); is not set in wp-config.php.」
図12:「define(‘WP_CACHE’, true); is not set in wp-config.php.」

上述の警告バグと連動して発生するケースが多いのですが、本来はCache Enablerをインストールして有効化した際にWordPress側のwp-config.phpファイルに「define(‘WP_CACHE’, true); 」の1行が自動的に追記されます。

このエラーが表示されている場合、自動的に追記されていないため、wp-config.phpに手動で追記してあげる必要があります。

「define(‘WP_CACHE’, true); 」は以下のように先頭に追記します。

<?php
define('WP_CACHE', true); // Added by Cache Enabler
/**
 * WordPress の基本設定

非対応のパーマリンク設定がある件

Cache Enablerは「 ?p=123 」といったIDによるパーマリンク設定には対応していません。

この場合、静的HTMLのページキャッシュが生成されないためサイトに問題が発生します。

SEO上奨励されないため、最近はこの手のパーマリンク設定をあまり見かけなくなりましたが、もし該当する場合は本プラグインの利用は控えましょう。

地味に重要な点なのでご注意ください。

以上でCache Enablerプラグインの設定は完了です。

ページスコア・ページ表示速度測定

本項ではプラグインの設定状況別のページスコアやページ表示速度の測定結果について、実際の検証データを交えて解説をしていきます。

測定・検証にあたり、以下サイトを利用させて頂きました。
いずれもウェブ業界関係者にとっては身近なツールですが、初見の人は検索して簡単な概要を調べてから見ていただくとより分かりやすいかもしれません。

検証データの比較対象は以下に加えて、

「プラグインなし」
「Autoptimizeプラグイン単体使用」
「Cache Enablerプラグイン単体使用」
「Autoptimize × Cache Enablerプラグインを組み合わせて使用」

せっかくなので「Autoptimize × WP Super Cache」で測定したデータも含めて実施しました。
理由は直前までWP Super Cacheを入れていたからです。(笑)

そして計測対象のページはトップページではなく、、、ブログ記事ページの中でも一番重たいと思われる以下のページを選定しました。

元々最適化されたトップページで測定するよりも、実際に検索されて辿り着く記事ページで検証する方がよりリアルな結果を得ることできると判断しました。

それでは各ツールで測定を行い、比較検証していきます。

PageSpeed Insightsで測定してみた

ウェブに関わる仕事をされている方はご存じかと思いますが、
PageSpeed InsightsとはGoogleが公式提供しているツールのひとつで、モバイルやパソコン向けのページの表示速度チェック、パフォーマンスに関するレポートを確認することができます。

問題点や表示速度を改善するための方法を具体的に提示してくれるため、検証には欠かせないツールですね。

それでは測定データを見ていきましょう。

見るべきポイントとしては、数値自体の高低ではなく「どれだけ数値が改善されたか」という指標に注目していただければと思います。


【モバイル】いずれのプラグインも使用せず

「いずれのプラグインも使用せず」は比較対象用の基準値として見ておいてください。(以下同)
基本スコアが低いのはスルーしていただければ幸いですm(__)m

ページスコア:53点
コンテンツの初回ペイント:2.2秒

【パソコン】いずれのプラグインも使用せず

ページスコア:74点
コンテンツの初回ペイント:0.7秒


【モバイル】Autoptimizeのみ

Autoptimize単体使用でもモバイル・パソコンの両方で効果が見られますね。

ページスコア:59点(+6)
コンテンツの初回ペイント:1.4秒(-0.8s)
※括弧内の数値はプラグインを使用しない場合との比較。(以下同)

【パソコン】Autoptimizeのみ

ページスコア:78点(+4)
コンテンツの初回ペイント:0.4秒(-0.3s)


【モバイル】Cache Enablerのみ

Cache Enabler単体使用の場合、ページスコアの方のみで効果が上がっているのが分かります。

ページスコア:55点(+2)
コンテンツの初回ペイント:2.2秒(±0)

【パソコン】Cache Enablerのみ

ページスコア:81点(+7)
コンテンツの初回ペイント:0.7秒(±0)


【モバイル】Autoptimize × WP Super Cache

Autoptimize × WP Super Cacheの組み合わせだとモバイルでもそこそこ、パソコンでは劇的な改善が見られます。

ページスコア:62点(+9)
コンテンツの初回ペイント:1.4秒(-0.8s)

【パソコン】Autoptimize × WP Super Cache

ページスコア:95点(+21)
コンテンツの初回ペイント:0.4秒(-0.3s)


【モバイル】Autoptimize × Cache Enabler

Autoptimize × Cache Enablerの組み合わせだとさらに劇的な改善が見られました。

ページスコア:77点(+24)
コンテンツの初回ペイント:1.5秒(-0.7s)

【パソコン】Autopitimize × Cache Enabler

ページスコア:97点(+23)
コンテンツの初回ペイント:0.4秒(-0.3s)


PageSpeed Insightsでの測定結果の順位は以下の様になりました。

Autoptimize × Cache Enabler > Autoptimize × WP Super Cache > Autoptimize = Cache Enabler > プラグインなし

Autoptimize × Cache Enablerプラグインの組み合わせが最も効果が高いという実証結果が出ました。

GTmetrixで測定してみた

GTmetrixもPageSpeed Insightsと同様にページの表示速度チェックやパフォーマンスに関するレポートを確認することができるツールです。

PageSpeed Insightsとは採点方法が異なるため測定結果も異なります。
測定ツールを複数併用することでより問題点をカバーしやすくなりますね。

こちらも問題点や改善方法を具体的に提示してくれるため、非常に便利なツールです。

デフォルトではPCサイトの測定のみできますが、ユーザー登録するとモバイルサイトの測定結果を見ることもできます。

それではGTmetrixでの測定結果を見て行きましょう。


【パソコン】いずれのプラグインも使用せず

こちらが基準値になります。

PageSpeed Score:91%
YSlow Score:76%
Fully Loaded Time:6.8s


【パソコン】Autoptimizeのみ

各スコアが平均的に改善されていますね。

PageSpeed Score:94%(+3%)
YSlow Score:82%(+5%)
Fully Loaded Time:4.3s(-2.5s)


【パソコン】Cache Enablerのみ

Fully Loaded Time(ページ読み込み時間)だけが劇的に改善されており、他は変化なしですね。

PageSpeed Score:91%(±0)
YSlow Score:76%(±0)
Fully Loaded Time:3.8s(-3s)


【パソコン】Autopitimize × WP Super Cache

各スコアの平均的な改善に加えて、Fully Loaded Timeがさらに劇的に改善されています。

PageSpeed Score:94%(+3%)
YSlow Score:82%(+6%)
Fully Loaded Time:2.5s(-4.3s)


【パソコン】Autoptimize × Cache Enabler

同上ですが、Fully Loaded Timeが0.1s負けています。
この辺りは試行回数を重ねて平均値を出すとほぼ近似値になると思われるので、ほぼ同スペックと見ていいでしょう。

PageSpeed Score:94%(+3%)
YSlow Score:82%(+6%)
Fully Loaded Time:2.6s(-4.2s)


GTmetrixでの測定結果の順位は以下の様になりました。

Autoptimize × WP Super Cache = Autoptimize × Cache Enabler > Autoptimize > Cache Enabler > プラグインなし

Autoptimize × WP Super Cache = Autoptimize × Cache Enablerプラグインの組み合わせが最も効果が高いという実証結果が出ました。

ここまでの測定結果を見てWP Super Cacheでもいいんじゃないの?と思った人もいるかと思いますが、その辺りの考察はまとめで言及します。

WebPageTestで測定してみた

こちらのツールは先に紹介した2つと比べると若干マイナーかもしれませんが、TTFB(Time To First Byte = 最初の1バイトが到着するまでの時間) ~ DOM Content LoadedOn Loadに至るまでのWaterfall Viewを細かく分析してくれるツールです。

読み込みが遅い原因や要素を探るには非常に便利なツールです。


いずれのプラグインも使用せず

こちらが基準値になります。
「First Byte」は様々な処理を経て最初の1バイトの読み込みが始まるまでの秒数、「Start Render」はブラウザが画面の描画を開始する時間です。

まぁ遅いですね。間違いなく離脱されるスコアです。(笑)

First Byte:3.542s
Start Render:5.500s


【パソコン】Autoptimizeのみ

意外や意外、改善どころか少し遅くなっていますね。(笑)
この辺りは誤差だとは思いますが、AutoptimizeはWaterfall Viewの改善にはあまり関係ないことが分かります。

First Byte:3.853s(+0.311s)
Start Render:5.600s(+0.1s)


【パソコン】Cache Enablerのみ

いずれの数値も基準値と比べると超劇的改善ですね!
キャッシュが効いている状態だと、まさに劇的改善!
PageSpeed InsightsやGTmetrixでは目立って現れなかった数値だけに興味深いです。

First Byte:0.250s(-3.292s)
Start Render:1.500s(-4.0s)


【パソコン】Autoptimize × WP Super Cache

こちらも劇的改善ですね。
キャッシュが効いた状態だとWaterfallには強いですね。

First Byte:0.260s(-3.282s)
Start Render:1.500s(-4.0s)


【パソコン】Autoptimize × Cache Enabler

本命のこちら。
やはりというべきか、最も劇的に改善されたスコアを叩き出しました!
これくらいの数値の開きが出ると誤差ではないと言えるでしょう。

First Byte:0.188s(-3.354s)
Start Render:1.100s(-4.4s)


WebPageTestでの測定結果の順位は以下の様になりました。

Autoptimize × Cache Enabler > Cache Enabler > Autoptimize × WP Super Cache > プラグインなし > Autoptimize

Autoptimize × Cache Enablerプラグインの組み合わせが最も効果が高いという実証結果が出ました。

まとめ

長文をお読みいただきありがとうございました。

結論としては[Autoptimize]×[Cache Enabler]プラグインの組み合わせのメリットは冒頭でもお伝えしたように、以下に集約されます。

  • 「汎用性の高さ」⇒「特定の環境に依存せず再現性が高い」
  • 「初期導入コストの低さ」⇒「設定方法がシンプル」
  • 「運用時の安定性」⇒「他のプラグインとの競合発生リスクが低い」

本記事で紹介したAutoptimize × Cache Enablerプラグインの組み合わせは、サイト高速化・ページ表示速度最適化対策を行う際のファーストチョイスになり得るソリューションのひとつであると認識しています。

「いやいや、WP Super Cacheもけっこういい数値出してたし、そっちでもいいんじゃないの?」

という意見もあるかもしれません。

そうなんです、冒頭でもお伝えした通り、キャッシュ系プラグインはサーバー環境や使用テーマ・プラグインとの相性に問題がなければ、設定方法を間違えない限り一定の効果を得られることでしょう。

ただ、環境や相性・競合の問題で不具合が発生する率が高いのも事実です。。。

筆者の運用サイトではWP Super Cacheを入れた際に、相性・競合の問題でお問い合わせフォームの挙動にエラーが頻発したり、原因不明の不具合が見られるようになりました。

他のキャッシュ系プラグインも一通り試しましたが「上手く行ったり行かなかったり」といった感じで現時点では様々な案件・環境で汎用的に安定運用するには厳しいのでは、という結論に達しました。

何度もお伝えしていますが環境により最適解が異なるため、ベストであるとは断言できませんが、そのような状況を鑑みる上でAutoptimize × Cache Enablerプラグインの組み合わせは、様々な環境にアジャストしやすい汎用性の高いサイト高速化対策であると言えるでしょう。

WordPressサイトでお手軽にサイト高速・ページ表示速度最適化を行いたい方はまずはテスト環境で一度お試しください。


P.S.
文末に爆弾を投下するわけではないですが・・・サイト高速化・表示速度改善で最も影響があるのはサーバー環境=レンタルサーバー会社の選定です。

今回紹介したキャッシュ系プラグインの組み合わせは効果絶大であることには変わりありませんが、最速を目指すならやはりサーバースペックが一番重要になってきます。

どれだけプラグインやキャッシュで頑張っても、サーバースペックが第一だと認識しておいてください。

筆者のいくつかの運用環境でも本記事で紹介した高速化対策を行いました。
当然効果は得られるのですが、サーバースペックによってかなり体感スピードとページスコアが変わるなーという印象ですね。

高速化対策を極限まで頑張ったのに期待した高得点を上げられない!」とお悩みの場合はWordPressに相性の良い高速サーバーに乗り換えるとあっさり解決するかもしれません。

当サイトはちょっと諸事情があって現時点ではWordPressを運用するにはちょい重たいサーバーを使っているので、ちょっと言いづらいことなのですが、これは断言しておきます。(笑)

その辺りの実情も把握した上でウェブサイト高速化対策を検討中の皆様のご参考になれば幸いです。

この記事をシェアする
この記事のタイトルとURLをコピーする

この記事を書いた人

永田 健二

石川県金沢市生まれ。大阪育ち。
14年間住んだ東京を離れて、2017年6月より生まれ故郷の金沢に移住。
デザイナー/プログラマーとして数々の制作現場を経て、現在は主にウェブディレクター/マーケティングコンサルタントとして活動中。

ウェブ業界を主戦場にしつつも、北陸地方・石川県の伝統工芸を通じた地方創生や農業をはじめとする第一次産業の新たな価値の創出を目標に掲げて活動しています。
趣味は毎日の食事、地元のスーパー巡り、温泉、ロングウォーキング、ギター。

ご相談・お問い合わせなどありましたら、こちらよりお気軽にお問い合わせください。

関連記事