【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項目を最優先事項として位置付けました。

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

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

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

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

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

※本記事はブルーアンドアソシエイツ社のエンジニアによって書かれた記事であり、本記事内で使用されている検証データ等は当時の内容となっておりますことをご了承ください。

ウェブサイト高速化についての考察
AutoptimizeとCache Enablerプラグインのインストール
Autoptimizeプラグインの設定
Cache Enablerプラグインの設定
ページスコア・ページ表示速度測定
まとめ

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

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

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

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

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

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

サイト訪問前
「SEO」
サイト訪問後
「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」の項目が表示されますので早速設定画面に飛んでみましょう。

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

JS, CSS & HTML

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

JavaScriptオプション

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

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

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

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を連結」

CSS コードを最適化
チェックを入れます。
Aggregate CSS-files?
チェックを入れます。
インラインのCSSを連結
チェックを入れます。
プラグインなどによって吐き出されるインラインCSSを連結して外部ファイルに一本化する処理になります。

データを生成 : 画像をURI化
OFFにします。
筆者環境では表示不具合に繋がるケースがあったためOFFにしています。
CSSのインライン化と遅延
OFFにします。
すべてのCSS をインライン化
OFFにします。
AutoptimizeからCSSを除外
必要がなければデフォルトのママでOKです。
最適化させたくないCSSがある場合はここにファイル名を追記します。（カンマ区切りで複数ファイルを記述可）

HTMLオプション

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

HTMLコードを最適化
チェックを入れます。
最適化するとソースコードから不要なインデントや改行が削除された状態になります。

HTMLコメントを残す
OFFにします。
HTML内のコメントを意図的に残したい場合はチェックを入れるとよいでしょう。

CDNオプション

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

キャッシュ情報

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

その他オプション

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

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

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

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

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

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

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

Images

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

追加

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

更に追加

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

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

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

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

Cache Enablerプラグインの設定

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

というよりは、、、

基本的にはデフォルトのママで何も変更しなくて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.」

分かりやすく直訳すると「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を入れていたからです。(笑)

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

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

ウェブサイトの高速化や表示速度はユーザーにとって最も重要な要素のひとつで、Googleが掲げるユーザーファーストの観点からもSEO上の評価に影響があると言われています。 WordPressサイトの高速化・表示速度改善について検討する際、いくつかの方法が考えられます。「サーバー環境・サーバースペックの見直し」「ブラウザキャッシュやgzip圧縮など.htaccessファイル設定の見直し」「HTML/…

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

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

PageSpeed Insightsで測定してみた

https://developers.google.com/speed/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プラグインの組み合わせが最も効果が高いという実証結果が出ました。