2022年に8月にブログを初めて、2ヶ月で40記事を書きました。
ある時、Twitterで『モバイル』のPageSpeed Insightsだけが遅いというツイートを発見
この2ヶ月、完全にブログのページスピードを『無視』、恐る恐る確認した結果。。。
Page Speed Insights
【モバイル：20点台】
【パソコン：70点台】
※当初の成績をスクショすることを忘れました。。。
結果はわかっていましたが、なぜモバイル版のページスピードが極端に下がるのでしょうか
インターネット上にある、あらゆる情報を参考にし『Page Speed Insights』改善に挑戦した結果
モバイルに関しては、20点台⇨50後半までは改善できました
本来なら、70点~80点は欲しいところです。。。
備忘録として、どのような対策を行ったのかを記載していきます
一切のコードに触れずに、プラグインだけを使用しています。
適切なサイズの画像
既に複数の記事を作成していて、全ての画像容量を１枚ずつ変更していくのは大変ですよね
この『EWWW Image Optimizer プラグイン』を使用すれば、記事内の全ての画像を一括縮小をすることができます
一括画像縮小には、時間がかかることがあります（私は2時間かかりました）
終わったら、再度ブログスピードを確認してみましょう
合格した監査に、『適切なサイズの画像』が移動しているはずです
稀に、縮小が行われていない画像があったのでPhotoshopで適切な容量に変更しました
Photoshopの他に、下記の2つ画像縮小ツールも非常に便利です！
画像容量を軽くしたら、30点程ページスピード上がりました！やはり、画像容量はしっかりと対策しないといけませんね
使用していない JavaScript の削減
『使用していない JavaScript の削減』対策方法は、Flying Scripts プラグインを使用します
Include Keywordsの欄に『使用していない JavaScript の削減』の項目を貼り付けます
※貼り付け方は、js部分だけでもOKまたはファイル名全てを貼り付ける。2つの方法があるそうです（サイトによって解説が異なっていました）
上記の画像のように、したら『Save Changes』で保存します
これで、『使用していない JavaScript の削減』が表示されなくなるらしいのですが、、、私は、一向に変化がありませんでした。。。
レンダリングを妨げるリソースの除外
『レンダリングを妨げるリソースの除外』が出てしまう原因は、おそらくHTML/CSS/JavaScriptコードの最適化ができていないからだそうです
なので対策方法は、Autoptimize プラグインを使用します
JavaScriptコードの最適化にチェックを入れます
赤枠のところにチェックを入れる
HTMLコード最適化にチェック
各所チェックを入れて、『変更の保存とキャッシュの削除』をクリックします
これで、『レンダリングを妨げるリソースの除外』の設定の完了です
この対策を行ったら、15点ほどページスピードが改善されました
第三者コードの影響を抑えてください
『第三者コードの影響を抑えてください 』この警告もAutoptimize プラグインを使用します
既に、Autoptimize設定が済んでいる場合は、そのままで大丈夫です
『メインスレッドのブロック時間』が０以外のものを全て『リンクのアドレスをコピー』します
下記の画像『サードパーティのドメインに事前接続 (上級者向け)』に貼り付けます
貼り付け終わったら、左下の『変更を保存』をクリックして完了です
この方法で『第三者コードの影響を抑えてください 』を解決しようと試みましたが、大きな変化はありませんでした
まとめ
『PageSpeed Insights』でページスピードを確認すると、結果が毎回異なります（その時の通信スピードなどによって）
また、何か1つページスピード上げるための対策を行ったら、デザインの崩れがないか？ページスピードは少しでも上がっているか？の確認をしてください
まれに、プラグインが原因でデザインの崩れが起こるそうです
『適切なサイズの画像』、『使用していない JavaScript の削減』、『レンダリングを妨げるリソースの除外』、『第三者コードの影響を抑えてください 』がページ速度を下げる大きな原因だそうです
この大きな問題を、解決すべく頑張りましたが、思い通りな結果にはなりませんでした。。。
プラグイン以外の解決方法を探さす必要があるかと思いますが、現段階ではモバイル：50点代後半を維持しているので、これで様子を見ようかなと思います