サイトの表示速度が遅い、「Litehouse」や「PageSpeed Insights」、「GTmetrix」などでページのパフォーマンスを計測すると、とっても悲しい結果とともにたくさんの改善点の指摘が..でもどうしたら改善できるの?というサイト運営者は多いのではないでしょうか?
そして、改善しよう!と調べていると、〇〇というプラグインを使って高速化するといい、とか、プラグインを減らすといいといった情報がたくさん出てきて、やってみてもあまり効果が..という方も多いのではないでしょうか?
そこで今回は、プラグインが原因で速度低下が起こりがちなケースと対処方法の例、そもそもプラグインが原因で速度低下が起こっているのかを判断する単純な方法、どのページの情報が正しいのかを判断する簡単な方法の3本立てでお送りします。
このページの表示速度が遅い!と思う方は他のページを参考にされることをおすすめします
プラグインが原因で表示速度が低下する主なケースと対処方法の例
後述する当サイトの環境でも紹介していますが、このサイトでも現在、総数として20個のプラグインを有効化しています。
これが多いと感じるのか少ないと感じるのかは皆さん次第なので何とも言えません。
さて、ここでは複数のプラグインを使った場合に速度低下を起こす原因となりがちなケースと確認方法、対処方法の例を紹介していきます。
【ケース1】同じような機能を持つプラグインを複数使用している場合
特にフロントエンド(閲覧画面)側で何かを表現するプラグインでは、以下のようなものを追加で読み込んだりしていることが多いでしょう。
- Googleフォントやアイコンなどの情報を外部から取得している
- サイトに動きを持たすようなライブラリを外部から取得している
プラグインは、そのプラグインを動かすことを前提に作られていて、基本的に他のプラグインで取得しているからなしね!とはなっていません。
従って、HTMLソースを見ると、同じところ(URL)から取得しているタグが複数出てくることがあり、もう既に読み込んでいるのに、また..ということを繰り返しているケースがあります。
よくあるのは、前述したフォントやアイコンなどを設定できるプラグイン、そして、スライダーなどの格好いい動きを持たせる目的のプラグインで重複することが多いです。
確認方法としては、ページを開いてHTMLソース表示をして、同じURL(例えばFont Awesomeだったら以下のようなURLからの取得)にアプローチしているものがないかを確認します。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>
こんなの目視では見つけられないよ!という方、以下のようにしてみてください。
重複取得している外部ソースの見つけ方
- ページを表示して右クリック→「ページのソースを表示」をクリックする
- 出てきたHTMLソースのどこかで「Ctrl」+「F」を押す
- 出てくる小さい窓に「https://use.fontawesome.com」(Font Awesomeの場合)と入力する
- 出てきた結果を見て、同じものがないかを確認する
同じものが見つかったら、以下の方法でそれらを1つにすることで改善ができるかも知れません。
重複して読み込んでいる外部ソースの統一方法
重複しているかもと思われるHTMLタグの中にもしも以下の赤字部分のような記述があれば、それをメモ帳などにコピーします。
<link rel="stylesheet" id="〇〇" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
これは、きちんとWordPressの作法に従って(詳しくは割愛)出力している優良な(当たり前だけど..)プラグインなら振られているはずで、この「id=”〇〇”」は、プラグインごとに一意になっています(同じIDなら重複して読み込まれないようにWordPressはしてくれます)。
この〇〇は、スタイルを表すものなら「〇〇-css」、動きを持たせるものなら「〇〇-js」となっています。
先ほどメモ帳にコピーした、重複している外部からの読み込みソースのIDのうち、どちらかを残します(通常IDはプラグイン名などの特徴があるので、停止する可能性の高い方のIDを残します)。
有効化しているテーマのfunctions.phpへ以下を追加します。
function sample_dequeue_script(){
//wp_dequeue_script('〇〇');
//wp_dequeue_style('〇〇');
}
add_action('wp_enqueue_scripts','sample_dequeue_script',9999);
そして、{}の中に、IDが「-js」なら、以下のコードを追加して、〇〇のところへIDから「-js」を除いたものを追加します。
wp_dequeue_script('〇〇');
IDが「-css」なら、以下のコードを追加して、〇〇のところへIDから「-css」を除いたものを追加します。
wp_dequeue_style('〇〇');
必要な分だけ行を追加して指定していけばいくつでも処理できます
functions.phpを保存して、再び該当ページを表示させ、そのIDのタグがなくなっていることを確認します。
なくなっていれば、対処完了です。表示に問題がないかを確認しておきましょう。
これで何度も同じものが読み込まれなくなりますから、その外部ソースが大きいほど改善効果が期待できます。
【ケース2】表示画面とは関係ないスクリプトやCSSが出力されている場合
プラグインの中には、管理画面上だけで使用するものも多いと思います。でも、そのプラグインの中には、意図せず閲覧画面側でも余分なスクリプトやCSSを出力してしまっているものがあったり、表示画面側で何等かの結果を管理者に表示させるために出力させているものがあったりします。
見つけ方はケース1と同じですが、対処方法としては、常時使用するものでなければ単純に止めてしまえばいいでしょう。
常時使用するものでそういうケースがあれば、ログアウトした状態でも同じタグが出力されるかを確認して、必要であれば前項のように読み込まないようにすれば改善されます。
管理者向けのみに出力されている場合が多いので、必ずログアウトした状態で確認するのがポイントです
【ケース3】非常にたくさんのオプションがあるプラグインを使用している場合
最後に、プラグインは、ある程度の環境で、ある程度の方のニーズに沿ってさまざまな設定が行えるようになっているものがほとんどです。
そのため、そのサイトには必要のない機能であったり、調整を行うためのコードであったりと、余分な機能やコードが多数含まれていることが原因となり、速度低下を招くケースがあります。
当然ながら、選択肢がいろいろある=ページ表示の際に「たら?れば?」がその分だけ発生するということになるのですから、1つ1つにかかる時間が微々たるものでも、塵も積もれば山となり、少なからず影響が出ることは避けられないでしょう。
WordPress公式で配布されているプラグインには、似た機能を持つものがたくさんの方からリリースされていることが多いので、機能がいっぱい!ではなく、自身に本当に必要な機能だけを持つものを選んだり、乗り替えたりするようにすれば、速度の改善が図れることがあります。
ただし、注意すべき点もあります。
- そのプラグインは更新が繰り返されているか(公式ページの開発情報で確認できます)
- 今使用しているWordPressバージョンでも使えるようになっているか
- ある程度人気のある(インストール数の多い)ものか
要は作りっぱなしになっていたり、あまり使っている人がいないようなプラグインは、後々WordPressのバージョンアップやサーバー環境の変化で使えなくなったり、サイトを危険にさらすようになってしまう可能性が否めないものなので避けた方がいいでしょう。
ちょっと乱暴な確認方法
ひょっとすると動かなくなるかも知れないし、何等かの不都合が生じるかも知れないので、決して良い子は真似しないでほしい(笑)検証方法としては、「プラグインをすべて止めてみる」というのが、一番確実な確認方法でしょう。
プラグインの中には、表示画面側には何も影響していない管理系のものなのに、しれっと表示画面側のHTMLへ何かを出力してるというものもあるので、全部止めるというのが絶対条件です。
まあ、プラグインで構成している部品類はすべて表示されない、またはショートコードで出力しているものは寂しくショートコードがそのまま表示されるという状況にはなってしまいますが、その状態で計測してみて劇的改善がみられるようなら、有効化していたプラグインのどれか(または複数)が影響しているのでしょう。
もしも全部プラグインを止めても何も改善がない!ということなら、現状有効化しているプラグインは、サイトに対して何も悪さをしていないということになりますから、表示速度低下の主原因は別にあると言えます。
例えば、そもそも収容しているレンタルサーバーの性能が低かったり、たまたまそのサーバーを共有している他のユーザーがとんでもない負荷のあるサイトを運営していたりすれば、どんなに頑張っても改善は見られませんから、サーバーのプランを上げる、より高速稼働しそうなサーバーへ引っ越すというのが最善策でしょう。
サーバーの再考をすべきかどうかの判断基準として、計測結果にあるTime To First Byte(TTFB)という項目を参考にするとよいでしょう。
TTFBは、閲覧者がポチっとしてから、閲覧者のブラウザに最初の1バイト目が届くまでの時間で、これはサイト云々が主たる原因ではない単純な待ち時間です。
サーバーの性能や距離、通信の状況によって左右されるので、この時間がいつ計測しても長い(1秒以上かかる)場合には、契約しているサーバーの再考を念頭に置いた方がいいかも知れません。
また、プラグイン全停止状態で、TTFBの時間を除いたとしても、ページが表示されるまでの時間が体感的にも遅いと感じる場合には、サーバーの性能や通信環境に何かがあるかも知れませんので、こちらもサーバーの再考の材料になるでしょう。
高速化に関する正しい情報かどうかの見極め方
冒頭でも触れたように、このページを含め、表示速度の改善に関する情報は、検索すれば星の数ほど出てきますから、どれを信じたらいいの?となってしまうかも知れませんね。
実は、これを簡単に見分ける方法があるんです。
それは...、その情報が掲載されているページの表示速度はどう?ということです。
単純ですけどこれは真実です(笑)!
もしもこのページにたまたまたどり着いて、表示が遅いと感じた方は、どうぞ他のページを参考になさってください(笑)。
ちなみにこのサイトは、現在、カラフルボックス
というサーバーのBOX2という下から2つめのプランを使っていて、以下のような状況で運営しています。
...というような情報が公開されているサイトであれば、より信用できるのでは?
そして、計測ツールを使ってそのページの状態を計測すれば、どうなのか?というのも一目瞭然ですね。
コメントを残す