【Page Speed Insights】あらゆる対策をしたが、あまり改善されなかった

2022年に8月にブログを初めて、2ヶ月で40記事を書きました。

ある時、Twitterで『モバイル』のPageSpeed Insightsだけが遅いというツイートを発見

この2ヶ月、完全にブログのページスピードを『無視』、恐る恐る確認した結果。。。

Page Speed Insights
【モバイル:20点台】
【パソコン:70点台】

※当初の成績をスクショすることを忘れました。。。

結果はわかっていましたが、なぜモバイル版のページスピードが極端に下がるのでしょうか

インターネット上にある、あらゆる情報を参考にし『Page Speed Insights』改善に挑戦した結果

Page Speed Insights
モバイル成績
Page Speed Insights
パソコン成績

モバイルに関しては、20点台⇨50後半までは改善できました

本来なら、70点~80点は欲しいところです。。。

備忘録として、どのような対策を行ったのかを記載していきます

一切のコードに触れずに、プラグインだけを使用しています。

適切なサイズの画像

EWWWW Image Optimizer

既に複数の記事を作成していて、全ての画像容量を1枚ずつ変更していくのは大変ですよね

この『EWWW Image Optimizer プラグイン』を使用すれば、記事内の全ての画像を一括縮小をすることができます

一括画像縮小には、時間がかかることがあります(私は2時間かかりました)

終わったら、再度ブログスピードを確認してみましょう

合格した監査に、『適切なサイズの画像』が移動しているはずです

稀に、縮小が行われていない画像があったのでPhotoshopで適切な容量に変更しました

Photoshopの他に、下記の2つ画像縮小ツールも非常に便利です!

Tinypig
使用方法は簡単で、縮小したい画像をドラックアンドドロップするだけです!あっという間に、画像縮小ができます
Squoosh
WEBpで画像を保存することができるので、とても便利な画像縮小ツールです!

画像容量を軽くしたら、30点程ページスピード上がりました!やはり、画像容量はしっかりと対策しないといけませんね

使用していない JavaScript の削減

Flying Scriptsプラグイン

『使用していない JavaScript の削減』対策方法は、Flying Scripts プラグインを使用します

使用していない JavaScript の削減
Flying Scriptsプラグイン

Include Keywordsの欄に『使用していない JavaScript の削減』の項目を貼り付けます

※貼り付け方は、js部分だけでもOKまたはファイル名全てを貼り付ける。2つの方法があるそうです(サイトによって解説が異なっていました)

上記の画像のように、したら『Save Changes』で保存します

これで、『使用していない JavaScript の削減』が表示されなくなるらしいのですが、、、私は、一向に変化がありませんでした。。。

レンダリングを妨げるリソースの除外

Autoptimizeプラグイン

『レンダリングを妨げるリソースの除外』が出てしまう原因は、おそらくHTML/CSS/JavaScriptコードの最適化ができていないからだそうです

なので対策方法は、Autoptimize プラグインを使用します

Autoptimizeプラグイン
JavaScriptコード最適化設定

JavaScriptコードの最適化にチェックを入れます

Autoptimizeプラグイン
CSSコード最適化設定

赤枠のところにチェックを入れる

Autoptimizeプラグイン
HTMLコード最適化設定

HTMLコード最適化にチェック

Autoptimizeプラグイン
その他オプション設定

各所チェックを入れて、『変更の保存とキャッシュの削除』をクリックします

これで、『レンダリングを妨げるリソースの除外』の設定の完了です

この対策を行ったら、15点ほどページスピードが改善されました

第三者コードの影響を抑えてください 

『第三者コードの影響を抑えてください 』この警告もAutoptimize プラグインを使用します

既に、Autoptimize設定が済んでいる場合は、そのままで大丈夫です

『メインスレッドのブロック時間』が0以外のものを全て『リンクのアドレスをコピー』します

下記の画像『サードパーティのドメインに事前接続 (上級者向け)』に貼り付けます

Autoptimizeプラグイン

貼り付け終わったら、左下の『変更を保存』をクリックして完了です

この方法で『第三者コードの影響を抑えてください 』を解決しようと試みましたが、大きな変化はありませんでした

まとめ

『PageSpeed Insights』でページスピードを確認すると、結果が毎回異なります(その時の通信スピードなどによって)

また、何か1つページスピード上げるための対策を行ったら、デザインの崩れがないか?ページスピードは少しでも上がっているか?の確認をしてください

まれに、プラグインが原因でデザインの崩れが起こるそうです

『適切なサイズの画像』、『使用していない JavaScript の削減』、『レンダリングを妨げるリソースの除外』、『第三者コードの影響を抑えてください 』がページ速度を下げる大きな原因だそうです

この大きな問題を、解決すべく頑張りましたが、思い通りな結果にはなりませんでした。。。

プラグイン以外の解決方法を探さす必要があるかと思いますが、現段階ではモバイル:50点代後半を維持しているので、これで様子を見ようかなと思います