[Plugin Load Filter]で特定ページのみプラグインを読み込む設定が可能に【競合回避やサイト高速化にも効果アリ】

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

Plugin Load FilterはWordPressサイトで多数のプラグインを利用している人にとって非常に有用で便利なプラグインです。

ひと言で表すなら、プラグインを管理するプラグインといった所でしょうか。

WordPressでサイトを構築する際に、プラグインは便利な機能を簡単に追加することができて、上手に使えば非常に便利なのですが、その反面プラグインを多用するとページ表示速度が遅くなったり、サイト全体が重たくなったりすることがあります。

その主な原因はWordPressサイトでは全ページ共通で、有効化されたプラグインが生成するソースコードを読み込んでしまうからです。

特定ページのみで使用しているプラグインについて、それを必要としないページでも一律読み込んでしまうため、プラグインを多用するほど、読み込みファイルが積み重なって重たくなります。

また時として、使用しているプラグイン同士の相性が悪く競合が発生して意図しないエラーが出たり、Jqueryと競合してエラーが出るケースもあります。

これらを回避するには、いくつか対策がありますが、最も簡単なのは必要なプラグインを特定のページだけで読み込むことです。

導入がやや長くなってしまいましたが、上手く活用すればプラグイン同士の競合発生に悩まされることはなくなり、ページ表示速度の改善やサイト高速化にも一役買ってくれることでしょう。

今回はそんな便利な「Plugin Load Filter」プラグインを紹介します。

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

Plugin Load Filterのインストール
Plugin Load Filterの設定・使い方
活用例と恩恵
データで見るビフォーアフター -適用前と適用後の比較-
まとめ

Plugin Load Filterのインストール

公式のプラグイン配布サイトはこちらになります。
https://ja.wordpress.org/plugins/plugin-load-filter/
星4.9の評価が付いてますね。

プラグイン新規追加ページの右上の検索窓に「Plugin Load Filter」と入力すると、表示されますのでこちらをインストールして有効化してください。

インストールして有効化が完了すると、管理画面サイドバーのプラグインメニューの中にPlugin Load Filterが表示されるので、早速のこのページに飛んでみましょう。

Plugin Load Filterの設定・使い方

Plugin Load Filterの使い方はとても簡単で、ざっくりと表現すると設定したいプラグインの項目にチェックを入れて保存するだけです。

最初は項目の見方とそれぞれの単語の意味について多少の理解が必要ですが、基本的には10分もかからず理解できる内容となっています。

フィルター設定

下の図1は設定画面ホームとなるプラグインロードフィルター設定画面です。
利用する前の事前準備や基本設定などは特に必要なく、このページからそのままプラグインの読み込み状態を管理していきます。

設定画面上のそれぞれの項目の意味については図1で簡単に説明を入れましたが、ここでは設定に必要な項目に絞って説明を行いたいと思います。

フィルター登録タブ
有効化されているプラグイン一覧が表示された設定ホーム画面です。

Page Typeフィルタ有効プラグイン選択タブ
Page Typeフィルタで「Page Type」（個別ページごとの読み込み管理）を選択したプラグインの個別調整をするためのタブです。

Page Typeフィルタ：Normal Mode
Page Typeフィルタリングせずにプラグインを通常ロードします。
つまり、このプラグインを適用していない通常の状態です。
初期状態では全てのプラグインがNormal Modeになっています。

フィルタの選択は任意のモードにチェックを入れることで状態を変更でき、Normal Mode以外を選択した場合は赤いプラグのマークに変わります。

Page Typeフィルタ：Admin Page
管理作業等のページのみで使用されるプラグインとして設定します。

あまり使うケースは少なそうですが、、、用途としては管理画面内だけで機能させるプラグインの読み込みを管理したり、通常ウェブページに読み込み・干渉させたくない、といった際に使う感じでしょうか。

但し、管理画面専用にしっかり設計されているプラグインであれば通常ウェブページには影響を及ぼさないケースが大半なので、使用するケースは限定的になると思います。
※プラグインによっては正常に動作しなくなる可能性があるので、明確な意図を持って設定する際以外は、特に必要のない限り設定しなくてよいと思います。

Page Typeフィルタ：Page Type
ページタイプや投稿毎に有効化の選択対象とするプラグインとして設定します。
ここに設定されたプラグインは一旦ブロックされますが、Page Typeフィルタ有効プラグイン選択の設定条件に応じて有効化されます。

このプラグインで一番よく使う機能がこのPage Typeフィルタです。

初期状態では全てのプラグインが「Normal Mode」として選択されていますので、全ページ共通で読み込む必要のないプラグインは「Page Type」にチェックを入れましょう。

ブログ投稿記事内でしか使わないプラグインや地図が必要なページでしか使わないプラグインなど、使い方はいろいろ想定されますね。

必要なプラグインのチェックを入れ終わったら、ページ下部にある「フィルター登録」ボタンをクリックして保存します。

ちなみに、基本的な使い方で必要になるのは「Page Typeフィルタ」の方のみで「エキスパート用URLフィルタ」の各チェック項目については初期状態のまま触らず一旦無視してしまっても差し支えありません。

Page Typeフィルタ有効プラグイン選択

続いて、前述のPage Typeフィルターの項目で「PageType」にチェックして保存したプラグインについて「Page Typeフィルタ有効プラグイン選択」タブから設定を行っていきます。

図3では既に項目に緑色のチェックが付いた設定済みの状態ですが、初期状態では何もチェックが付いていないまっさらな状態となっています。

この記事を読み進めながら、はじめて設定をしている場合は初期状態のため、恐らくチェックが付いてない状態かと思います。
この場合「どのページにも読み込まれない」という状態を意味しています。

各プラグインに対して読み込ませたいページの項目を選んでチェックして、個別にフィルタリングしてきます。

ここではいくつかの主要な項目をピックアップして説明します。

Desktop / Mobile
基本的にはどちらにもチェックを入れますが、いずれかのデバイスのみで読み込ませたいプラグインがある場合は片方のみチェックを入れます。

例えば、トップページのヒーローエリアのスライダーをプラグインで実装していて、PC時はプラグインをそのまま使い、スマホの時は静止画像に置き換えてスライダーを使わないケースなどはDesktopのみにチェックを入れる、などいろいろ用途はありますね。

HOME
トップページ（フロントページ）のみで読み込ませたい時にチェックを入れます。

Archive
ブログのアーカイブページ（記事一覧）のみで読み込ませたい時にチェックを入れます。

Search
検索結果のみで読み込ませたい時にチェックを入れます。

Page
固定ページのみで読み込ませたい時にチェックを入れます。

Post
ブログ投稿記事ページのみで読み込ませたい時にチェックを入れます。
カスタム投稿タイプを設定している場合は、右側に別途選択ボックスが表示され、個別に選択することができます。

それぞれのプラグインのフィルタリングが終わったら、ページ下部の「有効化プラグイン登録」ボタンをクリックして設定内容を保存します。

以上で設定は完了するのですが、もうひとつ例外的な設定方法あります。

初期状態では何もチェックが付いていない状態＝「どのページにも読み込まれない」状態であることを説明しましたが、この仕組みを利用して、ピンポイントで指定したページのみにプラグインを読み込ませることも可能です。

ピンポイントで指定ページのみ適用する方法
投稿、固定ページともに記事編集画面のサイドバー内に「Page Filterプラグイン」のブロックが設置されており、ここでも読み込みのON/OFFを設定することが可能になっています。

「使用する」を選択して使いたいプラグインにチェックをすると、そのページのみでピンポイントで読み込ませることが可能です。

地味に便利な機能ですね。

ここでもう一度基本的な使い方を簡単におさらいしておきます。

フィルター登録タブのPage Typeフィルタから設定したい任意のプラグインの「Page Type」にチェック
ページ下部の「フィルター登録」ボタンをクリックして保存
Page Type フィルタ有効プラグイン選択タブに切り替え
それぞれのプラグインに対して読み込ませたい項目にチェック
ページ下部の「有効化プラグイン登録」ボタンをクリックして保存

使い方は以上になります。

活用例と恩恵

Pugin Load Filterの活用例をいくつか挙げておきますので参考にしてください。

管理画面でしか使わないプラグインをAdmin Pageにフィルタリング
ブログ記事内だけで使用するようなプラグインをPage Type > Postのみにフィルタリング
カルーセルやスライダーをプラグインで実装している場合、該当ページのみにフィルタリング
地図の埋め込みをプラグインで処理している場合、該当ページのみにフィルタリング

上記はほんの一例ですが、必要ページ以外で不要なソースコードを読み込まないようにすることで得られる恩恵は、プラグインを多用しているサイトほど大きいでしょう。

恩恵について改めてまとめると以下のようになります。

不要なソースコードを読み込まないことによるページ表示速度改善
同対策によりソースコードが少しだけキレイになる
不要なプログラムを排除することによるサイト高速化への貢献
プラグイン同士の競合発生リスクの軽減
プラグインによる不具合が発生した時の原因特定に役立つ

既存の配布テーマ＋プラグインをゴリゴリ使用するようなサイトの場合、入れておくとかなり便利だと思いました。

このプラグインを発見する以前は、たまに制作時のディレクションで「このページだけプラグインを読み込まないようにできますか？」などのやり取りがあって、functionsからアレコレしたり、JSで強引に対策したり、というケースがあったような、無かったような(笑)

最後に実際の効果はいかに？ということでデータで検証したいと思います。

データで見るビフォーアフター -適用前と適用後の比較-

下の図はプラグイン適用前（左）と適用後（右）のソースコードの比較を行ったものです。

オレンジでハイライトされている箇所が差分です。
この辺りは入れているプラグインにもよるのですが、けっこうゴッソリ削られてイイ感じにソースが整理されましたね。（76KB削減できました）

続いて実際にどの程度データが軽くなり、読み込みが速くなったのかを見て行きましょう。

ページ表示速度の調査には「GTmetrix」を利用しました。
https://gtmetrix.com/

業界関係者であれば皆さんご存知の方も多いと思いますが、ここではこのツールの使い方や見方については詳しく説明しませんので、ご興味ある方は上記ワードで検索してみてください。

まずはPlugin Load Filter適用前の状態です。
元々けっこう最適化の対策を行っているので、プラグインをたくさん入れている割には悪くない数値だと思います。

ちなみに当サイトでは管理系やバックエンド、フロントエンド系含めて、なんと40個のプラグインを入れています(笑)

続いて、Plugin Load Filter適用後の数値を見てみましょう。

どこが改善されているかお分かりでしょうか？

既に対策済みの箇所多いため、目に見えて大きな効果は出ていませんが、具体的な数値では以下の改善が見られました。

YSlow Score
86％ ⇒ 88％（ページスコアの評価が上がりました）

Fully loaded Time
2.9s ⇒ 2.8s（読み込み時間が0.1秒改善されました）

Total Page Size
500KB ⇒ 424KB（ファイルサイズが76KB削減されました）

Requests
32 ⇒ 31（HTTPリクエスト数が1つ減りました）

ほぼ全ての数値で改善が見られました。
僅かな改善ですが、この積み重ねが非常に大切です。

ただ根本的にページスピードの改善やサイト高速化を図るにはまた別の対策が必要になってきます。

今回ご紹介したPlugin Load Filterは数多くある対策の内のひとつのアプローチであることを認識しておいてください。

まとめ

今回ご紹介したPlugin Load FilterプラグインはWordPressサイトを運営している人なら必須、とまでは言わないものの、入れておくべき奨励プラグインという位置付けだと思います。

Plugin Load Filterプラグインを使って読み込むプラグインを個別管理することで得られる主な恩恵は「プラグイン同士の競合発生リスクの軽減」と「ページ表示速度の改善・サイト高速化への貢献」です。

制作者の中にはレベルの高い技術者になればなるほど「プラグインにはできるだけ頼りたくない」「自分で書いた方がカスタム性能も高く便利」と言う人も多いと思います。

その他にも、

「会社のセキュリティ方針で最低限使用するプラグインは決まっている」
「開発ソースコードは全てバージョン管理している」
「プラグインの利用を前提に企画すると実現できる内容の幅が狭まってしまう」
「プラグイン更新の度にメンテナンスするコストが無駄」

といった理由でプラグインを積極的に使っていない人も多いことでしょう。

確かにプラグインはお手軽に機能追加できる反面、テーマとの相性の関係で思わぬバグが発生したり、プラグイン同士の競合が発生したりする弊害もあります。

またプラグイン自体のバージョンアップやセキュリティ面から一定の頻度で更新や検証を行う必要があり、外部のプラグインに依存することでそれなりのメンテナンスコストがかかるのも事実です。

サイトに何か問題が発生した際にあまりに多くのプラグインを入れていると、原因を突き止めるのにも一苦労ですよね。

プラグインに頼らない設計を推進すれば、より外部要因に依存しない設計が可能で、ページスコアも上げることが可能ですが、制作側としては車輪の再開発をできるだけなくしつつ、最適なパフォーマンスを出すことにフォーカスした場合、やはり日進月歩で生まれてくる便利なプラグインの活用は避けては通れない道だと思います。

世の中には便利なプラグインが数多く存在します。
但し必要のないプラグインや悪意のあるプラグインも数多く存在します。

日頃から鑑識眼を養い有用なプラグインを見極めて、そしてPlugin Load Filterプラグインを有効活用して、便利で快適なWordPressサイトを目指しましょう。