Plugin Load FilterでWordPressサイトの表示速度を改善してみた

By: Nikolay Bachiyski

ごきげんよう

今回は、Plugin Load Filterでプラグインを制限することでWordPressサイトの表示速度を改善してみました。

1. WordPressサイトの表示速度が遅い原因調査

WordPressサイトの表示速度が遅い理由は複数あります。

・画像を一気に全て読み込んでいる
・ブラウザのキャッシュが活用されていない
・jsやcssの読み込みすぎ
など

上記2つは画像の遅延読み込みのプラグインやサーバ設定等で対処可能。

しかし、3つめはどうしましょう。
Head Cleanerやjs、cssを縮小したり非同期で読み込むプラグインを使っているものの結局は読み込まれてサイト表示に影響を与えています。
どうにかならないものでしょうか。

そうだ、そもそもそのjsやcssを使うプラグインを止めれば良いんだ。

元も子もない事を言い出しましたが、冷静に考えてみましょう。
ブラウザ(Firefox)の「要素を調査」のネットワークを見ると現在ページで読み込まれている画像やjs、cssなどが全て出てきます。
他のブラウザでも同様の機能があるかもしれませんが調べてないんでご自身で調べて下さい。

この時、読み込まれた画像やjs、cssにカーソルを合わせると読み込み先のパスが見えます。わー、恥ずかしい。
けど、これらのファイルって本当にそのページで必要なものなんでしょうか。

記事単体のページでしか使わないファイルがトップページで読み込まれていたりします。

そこで、Plugin Load Filterというプラグインそのものを制御するプラグインを使うことでサイトの読み込み速度を改善してみます。

By: Nikolay Bachiyski
By: Nikolay Bachiyski

2. Plugin Load Filterの設定と効果

インストールと設定

Plugin Load Filterを新規追加から検索してインストール・有効化します。

source:
Plugin Load Filter — WordPress プラグイン

するとプラグインの欄に「Plugin Load Filter」が追加されます。ここから設定します。

plf_201701

インストールしてあるプラグイン一覧が出てきます。
下部に日本語でそれぞれの列の説明がありますが、「Admin Filter」が管理者しか使わないプラグイン、「Page Filter」がページごとに設定するプラグインといったところです。

全てが一旦「通常ロード」で選択されていますが、明らかに管理モードの時や記事執筆時にしか使わないプラグインは「Admin Filter」にチェックを入れます。
そもそもページでしか使わないものは「Page Filter」にチェックを入れます。
選択されたものは赤いコンセントみたいなマークに変わります。

一番下にある「フィルター登録」をクリックで設定反映されます。
「Page Filter」にチェックを入れたプラグインがある場合は「Page Filter有効プラグイン選択」のタブに移動します。

plf_201702

こちらではプラグインごとデスクトップ、モバイルやトップページ、投稿ページや固定ページ等での使用有無を細かく指定できます。
これでトップページに不要なプラグインの読み込みを制限したり、特定のページのみプラグインを動かすといった事も可能です。
「有効化プラグイン登録」をクリックで設定反映されます。
これで設定は完了です。

プラグインの効果

設定完了後、実際にブラウザで確認してみてください。
関係ないプラグインの読み込みが無くなり、不要な画像やjs、cssが読み込まれなくなっていると思います。
サイトが軽くなりましたね。

プラグインによっては全く関係ないページでも読み込みをしようとするためこのプラグインで制御しましょう。

実際にGoogleの「PageSpeed Insights」で測定したところ、導入・設定前は結果が赤かったんですが、導入後は緑色に変わりました。
プラグインを多く使っている人は効果ありますよ。

3. 最後に

今回は、Plugin Load Filterでプラグインを制限することでWordPressサイトの表示速度を改善してみました。
プラグインを使っている人ほど効果が望めます。
とはいえ、なんでもかんでも「通常ロード」から変えてしまうとそもそも機能しないといった事もあります。
動作をチェックしながら設定してくださいね。

それでは ごきげんよう

RSS/feedlyはこちら

follow us in feedly


にほんブログ村読者登録はこちら

あすへん! 〜薙月の明日への変化〜 - にほんブログ村

Twitterアカウントはこちら