前回の記事ではPageSpeed Insightsでスコアを改善させた記事を書きました。
参考: WordPressのパフォーマンスをWP Rocketプラグインを使って20点スコアアップした話
今回は、WordPressのプラグインを有効とすることで、どの程度パフォーマンスに影響してくるのか、どのくらいページ表示速度を重くするのかを検証しました。
WordPressを利用するにあたって大きな魅力の一つである「プラグイン」。世界中のプラグイン開発者たちが無償で公開しているプラグインがWordPressプラグインディレクトリに公開されています。これらのプラグインを導入することでWordPressの機能を拡張できる大きなメリットがあります。
一方で、プラグインをインストールし有効化することで、関連するJavaScriptやCSSを読み込むため、プラグインが増えれば増えるほどサイト内で読み込むファイルが雪だるま式に増えていきます。
そこで、WordPressに一般的なおすすめとされるプラグインをインストールした状態と、プラグインをインストールしなかった場合とで、どの程度違いがあるのかというのを確認しました。
比較する上での前提条件
以下の条件で比較検証しました。必須プラグインとしてQuery Monitorを利用していますが、これはプラグイン有無によってどの程度データベースへのリクエストやメモリ使用量、それにともなうページ表示時間がどの程度なのかをチェックするために利用しています。
- ローカルの開発環境で実施
- nginx
- PHP 8.1
- MySQL 8.0系
- WordPress: 6.5.5（記事執筆時点の最新Ver）
- テーマ: Twenty Twenty-Four
- コンテンツ: テーマ公式のデモコンテンツをインストールしたトップページ
- 必須プラグイン
- Query Monitor
- 検証として利用したプラグイン
- AddQuicktag
- All in One SEO
- BackWPup
- Blog Floating Button
- Broken Link Checker
- Classic Editor
- Contact Form 7
- EWWW Image Optimizer
- FileBird Lite
- Image Watermark
- Jetpack
- No Self Ping
- Public Post Preview
- Remember Me Controls
- Search Meter
- Search Regex
- SiteGuard WP Plugin
- Table of Contents Plus
- WebSub (FKA. PubSubHubbub)
- WP External Links
- WP Fastest Cache
- WP Sitemap Page
- 全プラグインは有効化したのみで、設定等は行っていない
- 文中で「プラグイン無し」は上記必須プラグインのみ有効とした状態
- 文中で「プラグイン有り」は上記検証として利用したプラグイン含めて全てのプラグインを有効とした状態
プラグインの選定理由と情報源
よく使われるプラグインを選定するために、おすすめのプラグインとして紹介されているYoutube動画を参考としました。Youtubeを情報源としたのはWordPressを使い始めの初心者の方が参考にする情報源と考えました。
複数の動画を参考としましたが、例として以下のような動画を参考としています。
デモコンテンツをインストールしたトップページ
ウェブサイトの体裁のため、テーマ公式のデモコンテンツをインストールしています。
結果: リクエスト数が増えページ表示時間に影響はあるものの、そこまで大きな影響はない
合計22個のプラグインを有効化した結論からお伝えすると、当然影響はあったものの、そこまでパフォーマンスに大きな影響を与える程ではないかと思いました。ただし、「このプラグイン、こんなにリクエスト数増えるの？」とか、「PageSpeed Insightsにはこんな風に影響するんだ」というのがわかりとても参考になりました。
「WordPressが重くてページ表示がなかなかされない……」
「PageSpeed InsightsのSpeed IndexやFCPはどうやったら改善される？」
といった悩みはSEOやパフォーマンス改善を考えるサイト運営担当者であればよくある悩みだと思います。
それでは一つずつ見ていきましょう。
PageSpeed Insightはスコアが約10点、FCPとSpeed Indexは約3秒強遅くなった
開発環境のためLighthouseから検証しました。
プラグインが必須としているリソースであるJavaScriptやCSSが読み込まれ、データベースへのクエリが増えることで表示速度に影響が出ることが数値からわかります。
一方で、Total Blocking Time(TBT)、Cumulative Layout Shift(CLS)は影響がないことがわかります。
データベースクエリ数が25から319へ爆増してしまう
トップページをQuery Monitorを使って見てみると、プラグイン有りだとデータベースクエリがかなり増えたのがわかりました。
319件のうち、7割以上の割合となっているのが「Blog Floating Button」プラグインです。実行時間も約半分を占めており、実行時間が長いクエリだというのがわかります。このプラグインはページ上にフロートボタンを表示させることができるプラグイン。
なぜこんなにもクエリが多いのか謎ですが、こういった情報を利用することで、利用し続ける価値があるプラグインなのかどうかの判断基準にもなりますね。
ページの読み込みにかかった時間は約3倍
ChromeのDeveloper ToolsのNetworkタブで、トップページを読み込んだ際のパフォーマンスを確認しました。
見づらいので表にまとめます。
| プラグイン無し | プラグイン有り | |
|---|---|---|
| Requests | 13 | 24 |
| transferred | 1.0 MB | 1.1 MB |
| resources | 1.1 MB | 1.3 MB |
| Finish | 367 ms | 1.08 s |
| DOMContentLoaded | 211 ms | 919 ms |
| Load | 315 ms | 919 ms |
プラグインの追加により、リクエストは約1.8倍に増えました。これにより、DOMツリー構築（DOMContentLoaded）は約4.3倍・読み込み時間（Load）は約2.9倍に増えました。
一方で、転送されたデータ量やリソースサイズはあまり大きく変わっていません。画像、CSS、JavaScriptのデータ量自体はさほど大きくはないものの、リクエストが増えたことによってデータベースクエリが増え、結果的に読み込み時間に影響していることがこの結果からわかります。
管理画面のパフォーマンスにも影響
プラグインが増えたことで、WordPressの管理画面は重くなるのか？こちらも見てみましょう。
これはQuery Monitorで表示される指標です。4つ表示されており、左から
- ページ生成時間
- 最大メモリ使用量
- データベース読み込み時間
- データベースクエリ数
となります。
| プラグイン無し | プラグイン有り | |
|---|---|---|
| ページ生成時間 | 0.09s | 0.46s |
| 最大メモリ使用量 | 4.5MB | 15.7MB |
| データベース読み込み時間 | 0.01s | 0.03s |
| データベースクエリ数 | 40Q | 168Q |
最大メモリ使用量が約3.5倍、データベースクエリ数が約4倍に増えたことで、ページ生成時間が約5倍に増えたというのがわかります。管理画面の生成時間が0.46秒であれば全然早いと思いますが、5倍遅くなってますからね。プラグイン無しだとかなりサクサク動いて快適！
Query Monitorの詳細情報でさらに細かい情報がわかる
もっと詳しく知りたい場合、画面下部に表示されるQuery Monitorの詳細情報を見ます。
画面上部に表示される概要情報と一緒ですが、より詳しい情報が掲載されています。最大メモリ使用量も約3倍に増えたとは言え、設定された制限値の6%程度しか使っていない状態です。
詳しい情報が確認できるので、深堀りするときはここをチェックします。
プラグインは悪くなく、必要な場所で読み込んでいれば問題ない
以上、一通り検証でした。
プラグイン有りの場合、当然データベースクエリ、JavaScriptやCSS等のリソースは増えます。トップページのリソースはJavaScriptは7から14、CSSは39から53に増えました。これによりJavaScriptやCSS読み込みが増え、ページ全体のレンダリングが増えるために「読み込み速度が遅い」「WordPressが重い」というようにパフォーマンスに影響をあたえている可能性があります。
プラグインはできるだけ数はすくない方がいいもの、これ自体はWordPressの魅力の一つであり、利用する判断となるプラグインがあれば利用するのは当然と思います。
一方で、おすすめされているからとか、なんか良さそうだからといった理由で無闇にインストールするのはおすすめしません。パフォーマンスが落ちることで、閲覧者のユーザビリティ低下・SEOへの悪影響、さらに運用側も快適とはいえない状態で更新作業等を行うこととなり効率も低下します。
例えば、問い合わせフォームはフォームページのみで有効となればいいというのであれば、フォームページだけで読み込みされるようにするのが望ましいと言えます。これを行う方法の一つとして、不要なファイルを取り除いたり特定のページで読み込むというのを実現してくれる「Asset CleanUp」というプラグインがあります。過去の記事で基本的な使い方をご紹介しました。
また、今回利用したQuery Monitorを使うことで、パフォーマンス改善に役立てられます。こちらも使い方を解説しています。
WordPressが遅いと感じた時は内部をチェック – Query Monitor編
まとめ
WordPressが重くなる理由はプラグインの数が多すぎること以外にも色々あります。
- テーマが最適化されていない
- 画像が大きすぎる
- キャッシュを活用できていない
- 貧弱なサーバーを使っている
- データベースが肥大化している、最適化されていない
- PHPが古い
色々な要因がある中で、今回はプラグインに焦点を絞って解説しました。どうしても一度導入済みのプラグインはすぐに無効化できないことも多いですが、本当に必要な機能なのかどうか今一度考え直し、マストではないのであれば一旦無効化してしばらく使っていくことで判断するのもいい方法です。
プラグインが少なくなれば、その分保守の手間もかからなくなり、運用にかかる時間やコストが減らせます。当然パフォーマンスにも好影響です。自分でWordPressを立ち上げて管理運用している個人の方や、必要に迫られて自社で保守を行っている会社など、できるだけスリムで必要最小限のプラグイン構成がおすすめです。
コメントを残す