WordPressサイトのパフォーマンス改善は、プラグインの存在なしに語ることはできません。プラグインの実行にはPHPコードが必要で、通常はスクリプトやスタイルを含み、時にはデータベースに対して追加のクエリを実行することさえあります。したがって、不要なプラグインはページ速度を低下させ、ユーザーエクスペリエンスやSEOに悪影響を及ぼす可能性があります。
例えば、Contact Form 7のようなフォームの作成に便利なプラグインがあります。通常は、お問い合わせページのような特定の場所でのみ必要になりますが、ショートコードを使ってフォームを埋め込むのが理想的な方法です。この理由から、Contact Form 7はサイト上のすべてのページでスクリプトとスタイルを読み込みます。
しかし、WordPressサイトのすべてのページでこのスクリプトやスタイルが必要になることはほぼありません。
そこで今回は、特定の投稿/固定ページで、不要なプラグインが読み込まれないようにする方法をご紹介。以下4つのステップに従って手順を見ていきます。
- 人気プラグインの機能およびページ速度への影響を比較し、要件に合ったものを選ぶ。
- ページが読み込まれる前にプログラムでプラグインをリストアップして無効にする。
- Must Useプラグインを作成して不要なプラグインを無効にする。
- プラグインを使って不要なプラグインを無効にする。
- サイトパフォーマンスを追跡する。
プラグイン選びで守るべき3つのルール
プラグインを選ぶ際には、以下のルールに従ってください。
- 信頼できる開発者によるコードの質が高いプラグインを選ぶ─アクティブインストール数、ユーザー評価、サポート、更新頻度、WordPressコミュニティからの情報を確認してプラグインを評価しましょう。
- スケーラブルなプラグインを選ぶ─ブラウザの開発者ツールやGoogle Pagespeed Insights、Pingdom、GTmetrixなどのオンラインツールを用いて、類似プラグインのパフォーマンスを比較し、ページ速度に与える影響を確認しましょう。
- 不要なプラグインはインストールしない─これは一見当たり前のルールですが、セキュリティやパフォーマンス上の理由から、本当に必要なプラグインのみを使用してください。また、定期的にプラグインを見直し、不要になったものはその都度削除しましょう。
実例
Contact Form 7は、 サイトにフォームを作成、設置することができる人気の高いWordPressプラグインです。しかし、フォームを設置しないページでも、以下のファイルが読み込まれます。
- style.css
- scripts.js
プラグインはサイトの速度を低下させますが、リクエストURLに応じてプラグインを選択的に無効にすることができます。開発者の方は、次のセクションでプラグインをプログラムで管理する方法、または不要なプラグインを選別するMust Useプラグインの作成方法を参照してください。専門知識を持たない方は、プラグインをフィルタリングして無効化する方法を選択してください。
プログラムで使用中のプラグイン一覧を取得する
まず最初に、PHPコードの簡単なスニペットで、WordPressサイトで使用中のプラグイン一覧を取得します。以下でご紹介するコードを、カスタムプラグイン、またはCode Snippetsなどの無料プラグインのエディターで追加してください。前者の場合は、必ずプラグインヘッダーを設定してください（以下参照）。
プラグインは、options_nameがactive_pluginsのwp_optionsテーブルに格納されているため、get_optionを呼び出すだけで、プラグインの一覧を取得することができます。
<?php
/**
* @package active-plugins
* @version 1.0
*
* Plugin Name: Active Plugins
* Plugin URI: http://wordpress.org/extend/plugins/#
* Description: This is a development plugin
* Author: Your Name
* Version: 1.0
* Author URI: https://example.com/
*/
add_shortcode( 'activeplugins', function(){
$active_plugins = get_option( 'active_plugins' );
$plugins = "";
if( count( $active_plugins ) > 0 ){
$plugins = "<ul>";
foreach ( $active_plugins as $plugin ) {
$plugins .= "<li>" . $plugin . "</li>";
}
$plugins .= "</ul>";
}
return $plugins;
});プラグインの詳細を変更し、active-plugins.phpファイルを保存したら、/wp-content/plugins/フォルダにアップロードします。新規投稿を作成して、[activeplugins]を含めると、現在使用中のプラグイン一覧が表示されます。
さらに、option_active_pluginsフィルターを使用すると、プラグインをプログラムで追加したり削除したりすることができます。このフィルターは、option_$option_nameフィルターグループに属し、データベースから取得されたオプションをフィルタリングすることができます。使用中のプラグインは、すべてoption_valueがactive_pluginsのwp_optionsテーブルに保存されているため、option_active_pluginsフィルターで、プラグインを有効にしたり、無効にしたりすることができます。
つまり、プログラムでプラグインを有効にすることが可能なため、例えば以下のコードで、ACFプラグインを有効にすることができます。
add_filter( 'option_active_plugins', function( $plugins ){
$myplugin = "advanced-custom-fields/acf.php";
if( !in_array( $myplugin, $plugins ) ){
$plugins[] = $myplugin;
}
return $plugins;
} );なお、プラグインはインストール済みで、まだ有効化されていないと仮定します。
上のコードによって、サイト上の各ページで使用しているプラグイン一覧にプラグインを追加することができます。実用的なコード例ではありませんが、これで仕組みがわかるはずです。
このプラグインは、他のプラグインよりも先に読み込まれなくてはなりません。プラグインの読み込みを優先する設定を行うには、Must Useプラグインにスクリプトを追加します。
プラグインを無効にするMust Useプラグインを作成する
Must Useプラグインは、/wp-contentの特定のサブフォルダに存在するプラグインで、通常のプラグインの前に実行されます。
今回の状況では、条件クエリタグはクエリが実行される前には機能しないため、この状況では条件タグを使うことができません。実行前は常にfalseを返します。そのため、リクエストURIを解析して対応するURLパスをチェックするなど、別の方法で条件を確認する必要があります。
active-plugins.phpファイルに以下のコードを追加し、/wp-content/mu-pluginsに移動します。
$request_uri = parse_url( $_SERVER['REQUEST_URI'], PHP_URL_PATH );
$is_admin = strpos( $request_uri, '/wp-admin/' );
if( false === $is_admin ){
add_filter( 'option_active_plugins', function( $plugins ){
global $request_uri;
$is_contact_page = strpos( $request_uri, '/contact/' );
$myplugin = "contact-form-7/wp-contact-form-7.php";
$k = array_search( $myplugin, $plugins );
if( false !== $k && false === $is_contact_page ){
unset( $plugins[$k] );
}
return $plugins;
} );
}
上のコードを掘り下げてみます。
- parse_url─リクエストされたURLのパスを返します。
- strpos─
'/wp-admin/'の最初の出現位置を見つけ、文字列が見つからなければfalseを返します。$is_admin変数は返された値を格納します。 - プラグインの設定ページに安全にアクセスできるよう、管理パネルでフィルターが実行されるのを回避します。リクエストURIが
'/wp-admin/'を含まない場合、option_active_pluginsフィルターを呼び出します。 - 現在のプラグインが使用中プラグインの配列になく、現在のページのURIが
/contact/を含まない場合、$pluginsからプラグインを削除します。
プラグインを保存したら、/wp-content/mu-plugins/フォルダにアップロード。キャッシュをクリアし、[activeplugins]をいくつかのページに追加します。すると、/contact/ページのリストにのみ表示されるようになるはずです。
これで、PHPの関数を少し追加するだけで、プラグインの配列を一括で解除することができます。
$request_uri = parse_url( $_SERVER['REQUEST_URI'], PHP_URL_PATH );
$is_admin = strpos( $request_uri, '/wp-admin/' );
if( false === $is_admin ){
add_filter( 'option_active_plugins', function( $plugins ){
global $request_uri;
$is_contact_page = strpos( $request_uri, '/contact/' );
$myplugins = array(
"contact-form-7/wp-contact-form-7.php",
"code-snippets/code-snippets.php",
"query-monitor/query-monitor.php",
"autoptimize/autoptimize.php"
);
if( false === $is_contact_page ){
$plugins = array_diff( $plugins, $myplugins );
}
return $plugins;
} );
}上のコード例では、まず削除するプラグインの配列を定義し、array_diffで削除します。array1をひとつあるいは複数の他の配列と比較し、 他の配列のいずれにも存在しないarray1の値を返します。
このプラグインの全コードはこちらでダウンロード可能です。
このプラグインをmu-pluginsフォルダにアップロードして、サイトの任意のページを確認することができます。Must Useプラグインは、より多くの条件を追加したり、より多くのURIを確認したりする高度なカスタマイズが可能ですが、自分でコードを書かなければならず、長期的に見て保守管理が難しく、手間がかかるかもしれません。
この点を懸念する場合は、次にご紹介するプラグインを使用した方法を選択してください。
プラグインを使用して不要なプラグインを無効にする
最後に、プラグインを使ってWordPress管理画面でプラグインを無効にする方法もあります。いくつかおすすめのプラグインをご紹介します。
Plugin Load Filter
Plugin Load Filterは、いくつかの条件でプラグインをフィルタリングするのに便利で、無料で利用できます。
以下のような機能をサポートしています。
- 投稿フォーマット
- カスタム投稿タイプ
- Jetpackモジュール
- WP埋め込みコンテンツカード
- エキスパート用URLフィルタ（REST API、Heartbeat、AJAX、AMPなど）
フィルターを有効にすると、以下のようにサイトのどこでプラグインを有効にするかを簡単に選択することができます。
Plugin Organizer
Plugin Organizerは、1万回以上のインストールと5つ星評価を誇る人気プラグイン。包括的で、以下のような操作を行うことができます。
- 投稿タイプとリクエストURLでプラグインを選択して無効化
- ユーザー権限に応じてプラグインを選択して無効化
- プラグインのグループを作成
- プラグインの読み込み順序の変更
- その他
「Global Plugins」ページでは、ドラッグ＆ドロップでプラグインをサイト全体で無効化することができます。これによって、サイト内の任意の場所で1つまたは複数のプラグインが実行されるのを回避。この機能は、検索ページや投稿タイプでも利用することができます。
グローバルと投稿タイプの設定を上書きできるよう、投稿エディターにメタボックスが表示されるため、「一般設定」画面の項目を投稿タイプでも有効にすることができます。また、デバッグメッセージは画期的な機能で、各ページに影響を与えるプラグインに関する有益な情報を得ることができます。
Plugin Organizerの詳細はこちらをご覧ください。
Perfmatters
Perfmattersは、URLやカスタム投稿タイプに応じて、テーマやプラグインのアセットを選択的に読み込むように設定できる有料プラグインです。Kinstaのエンジニアによって開発されたもので、プラグインとテーマの最適化に理想的です。
このプラグインには、スクリプトマネージャーという機能があり、プラグイン名やテーマ名ですべてがグループ化されます。これによって、プラグイン全体を一括で無効にしたり、プラグイン内の個別のCSSやJavaScriptファイルを簡単に無効したりすることが可能です。
また、正規表現を使ってスクリプトを無効にすることも。複雑なURL構造を持つサイトや、動的に生成されるページで特に便利です。
Perfmattersを使用すれば、WordPressサイト（特にトップページ）の表示速度を劇的に向上することができます。
- SNS連携プラグインを必要な投稿でのみ読み込む。投稿タイプやカスタム投稿タイプでのみ有効にすることも可能。
- すべての固定ページと投稿で読み込まれるContact Form 7は、ワンクリックで簡単に無効可能で、お問い合わせページのみで読み込むことができる。
- WordPress 5.0に更新後もブロックエディター（Gutenberg）を使用していない、あるいはまだクラシックエディターを使用している場合、サイト全体に追加されるフロントエンドスクリプトのうち、
/wp-includes/css/dist/block-library/style.min.cssと/wp-includes/css/dist/block-library/theme.min.cssを無効化できる。
Perfmattersのレビューによれば、読み込み時間が20.2%短縮できる事例もあります。トップページだけでも、HTTPリクエストの数が46件から30件に削減、ページサイズも506.3KBから451.6KBになりました。
ブラウザの開発者ツールでパフォーマンスを追跡する方法
パフォーマンス最適化は、現在の読み込み時間の測定から始まります。Google Pagespeed InsightsやPingdomなど、サイトのパフォーマンスを追跡に役立つプラグインやツールは多数存在しますが、ブラウザの開発者ツールを使用することもできます。
各ブラウザの開発者ツールには、ネットワークリクエストの一覧と関連情報を表示するネットワークパネルがあります。詳細については、各ブラウザのドキュメントをご覧ください。
18のプラグインをインストールしたWordPressサイトで、Firefoxの開発者ツールを使って、投稿ページの分析を複数回行いました。フィルタリングプラグインをインストールする前に、まずはページ速度を測定し、要求されたリソースをリストアップします。以下のスクリーンショットは、Firefoxのネットワークモニターのパフォーマンス分析ツールの出力です。
ネットワークモニターには、以下の結果が表示されます（空のキャッシュ）。
- サイズ：255.19KB
- 読み込み時間：1.24秒
- リクエスト数：12
続いて、Contact Form 7プラグインを実行しないように、Plugin Organizerをインストールすると、円グラフに変化が見られました。
ページの読み込み時間が短縮されました（キャッシュが空）。
- サイズ：104.21KB
- 読み込み時間：0.80秒
- リクエスト数：8
次に、不要なプラグインを無効にすると、ページのパフォーマンスが大きく改善されました。
ネットワークモニターの空のブラウザキャッシュは、以下のデータを返しました。
- サイズ：101.98KB
- 読み込み時間：0.46秒
- リクエスト数：8
テスト結果をまとめると、リソースサイズは60.04%削減、読み込み時間は1.24秒から0.46秒に高速化し、HTTPリクエスト数は12件から8件に減少。この結果から、プラグインがページのパフォーマンスに影響を与える可能性があること、そしてプラグインを選別して無効化することで、ページ速度が向上することがわかります。
まとめ
スクリプトを自作するにしても、サードパーティツールを使用するにしても、プラグインを選別して無効化することは、パフォーマンスの最適化につながります。重要なのは、すべてのプラグインがパフォーマンスを考慮して開発されているわけではないという点。しっかりと時間をとり、どのプラグインアセット（CSSとJS）がどこで読み込まれているのかを確認することが大切です。
WordPressプラグインを不要な場所で無効にすることは、サイト速度を向上させる技の1つに過ぎません。その他のサイトパフォーマンスに関するヒントは、以下をご覧ください。
コメントを残す