サイトを高速にするプラグイン plugin load filter

プラグインの読み込みを制御するplugin load filter

Akira

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

WordPress プラグインは、使用する数が多くなるほどサイトを遅くします。

インストールするプラグインは最小限に抑えることが重要ですが、どうしても使いたいプラグインは外せません。

そこでインストールしたいのが plugin load filter 。

プラグインの読み込みをページ単位で制御し、サイトを高速化するプラグインです。

WordPress をお使いであれば、 1 度はお試しになることをおすすめします。

特徴

Plugin Load Filter は、プラグインの読み込みをページ単位で制御するプラグインです。

通常 WordPress プラグインは、全てのページで読み込まれます。そのため、管理画面でしか使わないプラグインも投稿ページなどで読み込まれてしまい、その分サイトが遅くなります。

それに対し Plugin Load Filter は、読み込みが不要なページではプラグインの読み込みを停止します。無駄な読み込みがなくなる分、サイトが高速化します。

しかも、国産なので扱いやすいのが魅力です。

効果

Plugin Load Filter が、どれほど高速化に貢献するか計測します。

計測ツールは WebPagetest 。計測環境は 3G 回線の Moto G4 。 Test My Site とほぼ同じ環境です。

Plugin Load Filter インストール前の計測結果は以下のとおり。

Plugin Load Filter有効化前のサイトスピード計測結果

Plugin Load Filter インストール後の計測結果は以下のとおり。

Plugin Load Filter有効化後のサイトスピード計測結果

First Byte( サーバーの応答時間 )が、 0.183 秒速くなりました。また、それに伴い Start Render( レンダリングの開始時間 )も 0.221 秒速くなっています。

当サイトはインストールしているプラグインが多くないため、劇的に速くはなりません。しかし、Plugin Load Filter をインストールし何回かクリックしただけで、これだけ速くなるのはありがたい。

プラグインの数が多ければ多いほど、より高い効果を得られます。おそらく多くのサイトで、効果を実感できるはずです。

インストール

WordPress 管理画面 → プラグイン → 新規追加より、 Plugin Load Filter を検索しインストールします。

Plugin Load Filterをインストール

有効化すると、プラグインメニューに Plugin Load Filter が追加されます。設定は、プラグインメニューから行います。

プラグインメニューに追加されたPlugin Load Filter

設定

詳細な設定は、プラグイン作成者のセルティスラボさんが WordPress プラグインロードフィルターで解説されています。

以下では要点だけまとめてご説明します。

フィルター登録

基本設定となるのが、フィルター登録です。

Plugin Load Filterのフィルター登録画面

ここでどのプラグインを、どのページで読み込むのかを設定します。選択は以下の3つです。

  • 通常ロード:全てのページで読み込みます。
  • Admin Filter:WordPress 管理画面のみで読み込みます。
  • Page Filter:投稿ページや固定ページ、フロントページなどのサイト上のみで読み込みます。

セキュリティプラグインなどは、通常ロードを選択します。また、よく分からないプラグインも、通常ロードを選択します。

管理画面でしか使わないプラグインは、 Admin Filter を選択します。例えば、画像圧縮プラグインの EWWW Image Optimizer は、投稿ページや固定ページには不要なため選択します。

サイト上でしか使わないプラグインは、 Page Filter を選択します。例えば、 WordPress Popular Posts は、管理画面では不要なため選択します。

Page Filter 有効プラグイン選択

フィルター登録で Page Filter を選択したプラグインの読み込みページを設定します。

Plugin Load FilterのPage Filter有効プラグイン選択画面

選択項目は以下のとおりです。

  • Desktop:デスクトップ( パソコン )でのみ読み込みます。
  • Mobile:モバイル端末でのみ読み込みます。
  • Home:フロントページでのみ読み込みます。
  • Archive:アーカイブページでのみ読み込みます。
  • Search:検索結果ページでのみ読み込みます。
  • Attach:添付ファイルページでのみ読み込みます。
  • Page:固定ページでのみ読み込みます。
  • Post:投稿ページでのみ読み込みます。
  • Embed Content:WordPress 標準のブログカードを出力するページでのみ読み込みます。ただし、現状ほとんどのプラグインは機能しないとのこと。

他に 9 種類の投稿フォーマットからも選択できます。

「 Desktop 」と「 Mobile 」の判別には、 wp_is_mobile 関数と同等の処理がなされているとのことです。

また、フィルター登録設定の下にある「 AMP / URL Page filter 」で AMP フィルター機能を有効化すると、 AMP での読み込みを選択できます。プラグインが理由で AMP 検証に不合格となる場合に便利です。

投稿ページ・固定ページ毎に選択

投稿ページ・固定ページの編集画面のサイドバーに、 plugin load filter のボックスが追加されます。

投稿ページ・固定ページの編集画面に追加されたplugin load filter

投稿ページ・固定ページ毎にプラグインの読み込みを制御できます。

限られた特定のページでのみ、プラグインの読み込みが必要な場合に便利です。

動作を確認

plugin load filter 設定後は、プラグインが正常に動作しているかを確認します。

当サイトの環境では、 Contact Form 7 を Page Filter に設定するとエラーが出て動かなくなりました。そのため、 Contact Form 7 は通常ロードを選択し、以下のコードを functions.php に追加して自前で読み込みを制御しています。

add_action( 'wp_enqueue_scripts', function() {
    if( is_page( 28 ) === false ) {
        wp_dequeue_style( 'contact-form-7' );
        wp_dequeue_script( 'contact-form-7' );
    }
});

固定ページ ID が 28 のお問い合わせページ以外では、 Contact Form 7 のスタイルシートとスクリプトを読み込まない内容です。

速度も確認

しっかりと高速化したか、 WebPagetest でサイト速度も確認すると安心です。

というのも私の環境下では、 LiteSpeed Cache プラグインと併用すると若干遅くなりました。

WebPagetest の設定を以下のものにすると、 Test My Site とほぼ同じ計測結果が分かります。

check_box Test Location : Moto G ( gen 4 ) に設定。

Advanced Settings を開き以下を設定。

check_box Connection : 3G ( 1.6 Mbps/768 Kbps 300ms RTT ) に変更

check_box Repeat View : First View and Repeat View に変更。

check_box Capture Video :チェックを入れる。

WebPagetestの設定例

plugin load filter 有効時と無効時を何度か計測し、 First Byte( サーバーの応答時間 )と Start Render( レンダリングの開始時間 )を比較します。

Chrome のデベロッパーツールでも速度計測は可能です。


plugin load filter は、非常に簡単にサイトを高速化するプラグインです。

ただ、現在のインストール数は 1,000+ 。多くのサイトが、 plugin load filter を知らないことで損をしています。

このプラグインは、 10 万インストールでもおかしくない。100 万インストールであっても驚かない。

それほど素晴らしいプラグインです。早速インストールし、サイトを高速化されてはいかがでしょうか。