「PageSpeed Insightsのスコアが低くてイヤだな…」
「表示速度をどうにか改善したい…」
「特にLCPが改善しないで困っているんだけど…」
こんな悩みを解決します。
PageSpeed Insightsを手っ取り早く改善するために3つのプラグインを使用します！
（若干力技になるので、プラグインを使いたくない人は合わないかもしれません）
まずはじめにわたしがPageSpeed Insightsで「100」を出した当ブログの詳細をご紹介。
当ブログの詳細は下記のとおり。
| WordPressテーマ | 賢威8 |
|---|---|
| サーバー | エックスサーバー |
| 記事数 | 130記事 |
| 画像数 | 約250 |
| 改善前のスコア | 54 |
| 以前使っていた最適化プラグイン | ４ a3 Lazy Load EWWW Image Optimizer ・All-in-One WP Migration ・SiteGuard WP Plugin ・XML Sitemaps ・賢威キャラクタープラグイン |
この低スコアの当ブログが○のプラグインを導入すると…
このようにスコアが100点になります。
テーマや状況によって結果は変わりますが、比較的PageSpeed Insightsのスコアが悪いとされる賢威8でこれだけ改善するので、他のテーマでも有効かなと。
では詳しく解説していきます。
PageSpeed Insightsで100点に改善するプラグイン3選
PageSpeed Insightsで表示速度100に改善したプラグインは下記のとおり。
- Async JavaScript
- Autoptimize
- Flying Scripts by WP Speed Matters
すべてこの名前でプラグインを検索すれば出てきます。
では使い方や設定方法について解説します。
Async JavaScript｜使い方・設定方法
Async JavaScriptはスクリプトを非同期にするプラグインです。
まずはAsync JavaScriptを[インストール]→[有効化]→[設定]へと進みます。
①設定画面［settings］をクリック
（だいたいはじめからsettingsになってます）
②Enable async javascriptにチェック
（下記画像を参考に）
③下に進み［Async javascript Method］で［Async］にチェック
④［JQuery］でも［Async］にチェック
（下記画像を参考に）
⑤Plugin: Autoptimize（黄色い枠のところ）の ［Async］ にチェック
（下記画像を参考に）
以上です。
このプラグインはPageSpeed InsightsのLCP（レンダリングを妨げるリソースの除外）を改善することができます。
もしLCPのスコアでお悩みならこれだけでも改善するかと。
では次にいきます。
Autoptimize｜使い方・設定方法
Autoptimizeはソースコードを圧縮してくれるプラグインです。
Autoptimizeを[インストール]→[有効化]→[設定]へと進みます。
①設定画面［js,css＆HTML］をクリック
（だいたいはじめからsettingsになってます）
②JavaScriptコードの最適化にチェック
③jsファイルを連結にチェック
（下記画像を参考に）
下にスクロールして［CSSオプション］に移動
④CSSを最適化にチェック
⑤CSSファイルを連結にチェック
⑥インラインのCSSも連結にチェック
（下記画像を参考に）
下にスクロールして［HTMLオプション］に移動
⑦HTMLコードを最適化にチェック
（下記画像を参考に）
下にスクロールして［その他オプション］に移動
⑧その他オプションすべてにチェック
⑨保存して完了
（下記画像を参考に）
以上になります。
Flying Scripts by WP Speed Matters｜使い方・設定方法
Flying Scripts by WP Speed Mattersは「使用していないJavaScriptを削除」してくれるプラグインです。
①PageSpeed Insightsで指摘されている「使用していない JavaScript の削除」のコードをコピー
（先頭の「/]は除いてOK）
Flying Scripts by WP Speed Mattersを[インストール]→[有効化]→[設定]へと進みます。
②設定画面［settings］をクリック
（だいたいはじめからsettingsになってます）
③include keywordsにさきほどのコードをペースト
④保存して完了
以上です。
これでPageSpeed Insightsが100に改善しました。
テーマによって100にならないかもしれませんが、かなり良いスコアがでるはずです。
しかし、この方法にもデメリットがあります。
各プラグインのデメリット
Async JavaScriptのデメリット
Async JavaScriptを使うと、FontAwesomeのスクリプトも非同期になるのでアイコンは非表示になってしまいます。
FontAwesomeを表示したいときはFontAwesomeのスクリプトコードをscript exclusionに入れれば表示されるようになるらしいのですが、わたしが試したときは表示できませんでした。
わたしのやり方が悪かったかもしれませんので、ここは個々で試してみてください。
（↓ココにスクリプトコードを入力）
Autoptimizeのデメリット
Autoptimizeは他の最適化プラグインと干渉して問題が起こる可能性があります。
どのプラグインでも言えることですが、同類のプラグインを入れているならどちらかを無効化して使用してください。
他にもPageSpeed Insightsを改善する方法
他にもPageSpeed Insightsを改善する方法は下記のとおり。
- プラグインの削除
- ランキングバナーの削除
- 使用していないCSSの削除
ではサクッと説明します。
プラグインの削除
なんだかんだプラグインを入れると重たくなります。
わたしはブロックエディタ拡張プラグインやら、セキュリティプラグインやらなんやらかんやら10以上入れていたのでかなり重たかったです。
やっぱり何事もシンプルが良い。
もし妥協できるプラグインがあれば削除することをおすすめします。
ランキングバナーの削除
ブログ村やブログランキングのバナーを削除してもPageSpeed Insightsは改善します。
（気持ち程度ですが…）
わたしはブログ村やらFC2やら貼ってましたが、全部はずしたら3くらい良くなりました。
すこしでも改善したい方は外してみてもいいかも。
使用してないCSSの削除
使用していないCSSを削除するとだいぶ改善します。
使用していないCSSを探す方法はカンタン。
①任意のページで［右クリック］→［検証］
②上部の［Sources］をクリック
③下部の［更新ボタン］（矢印が右回りにクルってなってるやつ）をクリック
（見当たらないときは隠れているので、バーを掴んで上にずらしましょう）
するとグラフが出てきます。
赤いグラフがそのページで使用していないCSSで、青いグラフが使用しているCSSです。
グラフをクリックするとCSSの詳細が表示されるので、使用していないCSSをカンタンに見つけることができます。
しかし「そのページでは使っていないCSS」なので、他のページでは重要なCSSの場合があります。
その点は自分で判断しながら削除していってください。
最後に｜Google Search Consoleのページ エクスペリエンス改善にも繋がる
PageSpeed InsightsのLPC(Largest Contentful Paint)を改善すると、Google Search Consoleのページ エクスペリエンス改善にも繋がります。
2021年から導入されたページ エクスペリエンスは現在のところ「あまり意識することではない」といった意見がありますが、今後のためにも今から対策しておいたほうが利口だと思います。
日々SEOは進化していますが、個人で追いつくのは一苦労。
面倒なことを後回しにしてたら気づいたときには訳わからん状態になり、瀕死になる可能性があります。
なので気づいたときや知ったときは出来るだけ勉強して改善していきましょう。
