2022年に8月にブログを初めて、2ヶ月で40記事を書きました。
ある時、Twitterで『モバイル』のPageSpeed Insightsだけが遅いというツイートを発見
この2ヶ月、完全にブログのページスピードを『無視』、恐る恐る確認した結果。。。
Page Speed Insights
【モバイル:20点台】
【パソコン:70点台】
※当初の成績をスクショすることを忘れました。。。
結果はわかっていましたが、なぜモバイル版のページスピードが極端に下がるのでしょうか
インターネット上にある、あらゆる情報を参考にし『Page Speed Insights』改善に挑戦した結果
![Page Speed Insights](https://sp-ao.shortpixel.ai/client/to_auto,q_glossy,ret_img,w_1024,h_776/https://mochiweb.com/wp-content/uploads/2022/10/修正済みモバイル-1024x776.jpg)
![Page Speed Insights](https://sp-ao.shortpixel.ai/client/to_auto,q_glossy,ret_img,w_1024,h_703/https://mochiweb.com/wp-content/uploads/2022/10/修正済み12-1024x703.jpg)
モバイルに関しては、20点台⇨50後半までは改善できました
本来なら、70点~80点は欲しいところです。。。
備忘録として、どのような対策を行ったのかを記載していきます
一切のコードに触れずに、プラグインだけを使用しています。
適切なサイズの画像
![EWWWW Image Optimizer](https://sp-ao.shortpixel.ai/client/to_auto,q_glossy,ret_img,w_1024,h_458/https://mochiweb.com/wp-content/uploads/2022/10/スクリーンショット-2022-10-11-13.17.56-1024x458.jpg)
既に複数の記事を作成していて、全ての画像容量を1枚ずつ変更していくのは大変ですよね
この『EWWW Image Optimizer プラグイン』を使用すれば、記事内の全ての画像を一括縮小をすることができます
一括画像縮小には、時間がかかることがあります(私は2時間かかりました)
終わったら、再度ブログスピードを確認してみましょう
合格した監査に、『適切なサイズの画像』が移動しているはずです
稀に、縮小が行われていない画像があったのでPhotoshopで適切な容量に変更しました
Photoshopの他に、下記の2つ画像縮小ツールも非常に便利です!
![](https://sp-ao.shortpixel.ai/client/to_auto,q_glossy,ret_img,w_2560,h_1033/https://mochiweb.com/wp-content/uploads/2022/10/Tinypig-scaled.jpg)
![](https://sp-ao.shortpixel.ai/client/to_auto,q_glossy,ret_img,w_1024,h_442/https://mochiweb.com/wp-content/uploads/2022/10/Squoosh-1024x442.jpg)
画像容量を軽くしたら、30点程ページスピード上がりました!やはり、画像容量はしっかりと対策しないといけませんね
使用していない JavaScript の削減
![Flying Scriptsプラグイン](https://sp-ao.shortpixel.ai/client/to_auto,q_glossy,ret_img,w_1024,h_461/https://mochiweb.com/wp-content/uploads/2022/10/スクリーンショット-2022-10-11-13.52.46-1024x461.jpg)
『使用していない JavaScript の削減』対策方法は、Flying Scripts プラグインを使用します
![使用していない JavaScript の削減](https://sp-ao.shortpixel.ai/client/to_auto,q_glossy,ret_img,w_1024,h_545/https://mochiweb.com/wp-content/uploads/2022/10/スクリーン修正済み222ショット-2022-10-11-13.38.03-1024x545.jpg)
![Flying Scriptsプラグイン](https://sp-ao.shortpixel.ai/client/to_auto,q_glossy,ret_img,w_1024,h_525/https://mochiweb.com/wp-content/uploads/2022/10/修正済み11-1024x525.jpg)
Include Keywordsの欄に『使用していない JavaScript の削減』の項目を貼り付けます
※貼り付け方は、js部分だけでもOKまたはファイル名全てを貼り付ける。2つの方法があるそうです(サイトによって解説が異なっていました)
上記の画像のように、したら『Save Changes』で保存します
これで、『使用していない JavaScript の削減』が表示されなくなるらしいのですが、、、私は、一向に変化がありませんでした。。。
レンダリングを妨げるリソースの除外
![Autoptimizeプラグイン](https://sp-ao.shortpixel.ai/client/to_auto,q_glossy,ret_img,w_1024,h_466/https://mochiweb.com/wp-content/uploads/2022/10/修正済み-1-1024x466.jpg)
『レンダリングを妨げるリソースの除外』が出てしまう原因は、おそらくHTML/CSS/JavaScriptコードの最適化ができていないからだそうです
なので対策方法は、Autoptimize プラグインを使用します
![Autoptimizeプラグイン](https://sp-ao.shortpixel.ai/client/to_auto,q_glossy,ret_img,w_1024,h_705/https://mochiweb.com/wp-content/uploads/2022/10/修正後1-1024x705.jpg)
JavaScriptコードの最適化にチェックを入れます
![Autoptimizeプラグイン](https://sp-ao.shortpixel.ai/client/to_auto,q_glossy,ret_img,w_1024,h_727/https://mochiweb.com/wp-content/uploads/2022/10/修正後後2-1024x727.jpg)
赤枠のところにチェックを入れる
![Autoptimizeプラグイン](https://sp-ao.shortpixel.ai/client/to_auto,q_glossy,ret_img,w_1024,h_732/https://mochiweb.com/wp-content/uploads/2022/10/修正後4-1024x732.jpg)
HTMLコード最適化にチェック
![Autoptimizeプラグイン](https://sp-ao.shortpixel.ai/client/to_auto,q_glossy,ret_img,w_1024,h_736/https://mochiweb.com/wp-content/uploads/2022/10/修正後5-1024x736.jpg)
各所チェックを入れて、『変更の保存とキャッシュの削除』をクリックします
これで、『レンダリングを妨げるリソースの除外』の設定の完了です
この対策を行ったら、15点ほどページスピードが改善されました
第三者コードの影響を抑えてください
『第三者コードの影響を抑えてください 』この警告もAutoptimize プラグインを使用します
既に、Autoptimize設定が済んでいる場合は、そのままで大丈夫です
![](https://sp-ao.shortpixel.ai/client/to_auto,q_glossy,ret_img,w_1024,h_746/https://mochiweb.com/wp-content/uploads/2022/10/修正後8-1-1024x746.jpg)
『メインスレッドのブロック時間』が0以外のものを全て『リンクのアドレスをコピー』します
下記の画像『サードパーティのドメインに事前接続 (上級者向け)』に貼り付けます
![Autoptimizeプラグイン](https://sp-ao.shortpixel.ai/client/to_auto,q_glossy,ret_img,w_1024,h_536/https://mochiweb.com/wp-content/uploads/2022/10/修正後6-1024x536.jpg)
貼り付け終わったら、左下の『変更を保存』をクリックして完了です
この方法で『第三者コードの影響を抑えてください 』を解決しようと試みましたが、大きな変化はありませんでした
まとめ
『PageSpeed Insights』でページスピードを確認すると、結果が毎回異なります(その時の通信スピードなどによって)
また、何か1つページスピード上げるための対策を行ったら、デザインの崩れがないか?ページスピードは少しでも上がっているか?の確認をしてください
まれに、プラグインが原因でデザインの崩れが起こるそうです
『適切なサイズの画像』、『使用していない JavaScript の削減』、『レンダリングを妨げるリソースの除外』、『第三者コードの影響を抑えてください 』がページ速度を下げる大きな原因だそうです
この大きな問題を、解決すべく頑張りましたが、思い通りな結果にはなりませんでした。。。
プラグイン以外の解決方法を探さす必要があるかと思いますが、現段階ではモバイル:50点代後半を維持しているので、これで様子を見ようかなと思います