高速化・サイトの見直し
しばらく、放置状態のサイトをメンテナンスしようかと思いまして、ページスピードを計測するPagespeed Insightsをしてみたら・・・最悪。
モバイルもPCも赤点の20点台でした・・・（とほほ）
なんてことに（涙）
調べてみると、
Pagespeed InsightsのLighthouseは、非常に厳しい評価となっています。
どうも、、、JavaScriptに対して思いのほか大きなウェイトが置かれていて、目に見えにくいJavaScriptの負荷が高いページでは、スコアが大きく下がるようです。
そこで、警告表示をひとつひとつ消すことにしました。
すると、モバイル９３点PC１００点になりました。
同じことで悩んでる方がいらっしゃいましたら、参考にしてくださいませ～！
これはPagespeed Insightsで最高点を狙う忘備録です。
WordPressの環境
WordPressバージョン：6.0.2
PHPバージョン：8.1.10（８になって多少高速化になりました）
テーマ：Cocoon
バージョン：2.4.9
子テーマ：Cocoon Child
バージョン：1.1.3
利用中のプラグイン：
Akismet Anti-Spam
Contact Form 7 （問い合わせフォーム）
Flying Scripts（JavaScriptを読み飛ばす）
Regenerate Thumbnails （アップロードした画像のサムネイルを再生成）
TinyPNG – JPEG, PNG & WebP image compression（画像圧縮）
WP-Optimize（データベースをクリーンアップや高速化）
Instagram Widget （インスタウィジェット）
プラグインも必要なものだけにしています。
これから増やしても１０個以内と考えています。
警告表示をひとつひとつ解決する
- 画像を圧縮しする
適切なサイズの画像
WebP化する
解決：圧縮してメディアにアップグレード、さらに画像圧縮。 - 使用していない JavaScript の削減
解決方法：Flying Scriptsプラグインを使用 - ウェブフォント読み込み中の全テキストの表示
解決方法：警告の原因のひとつはreCAPTCHAのJavaScrip。
またプラグインInstagram Widget (インスタウィジェット）のJavaScrip。
「ウェブフォント読み込み中の全テキストの表示」で「@font-face・・・display=swap」が解決方法とは限らない。
画像の圧縮とWebP化
プラグインのWP-Optimizeを使ってWebP化をしました。
WP-Optimize設定の画像圧縮の欄にCreate WebP version of image（ 画像の WebP バージョンを作成する）とあるのでチェックいれます。
使用していない JavaScripやその他警告
使用していない JavaScript の削減とウェブフォント読み込み中の全テキストの表示の原因は共通していた様で、Flying Scriptsプラグインを使ったらほぼ解決しました。
解決のヒントになったサイト
「ウェブフォント読み込み中の全テキストの表示」は文字通りウェブフォントが原因かなと思わせぶりでしたが、実際「@font-face・・・display=swap」使っても全く警告表示は消えませんでした！
まとめ
高速化にするためには、ひたすら画像の圧縮です。
ほとんどの方がモバイルで見ることが多いので、画像の大きさはモバイル・タブレット方向に寄せていいと思います。
また、原因不明の警告はプラグイン、もしくは外部 JavaScriptが原因があることがわかりました。
JavaScriptが大量に読み込まれるページでは、レンダリングブロックにより表示速度も低下するので、もう全面的にダメージを受けます。
高速化においてもJavaScriptは最強の敵となります（とほほ）
モバイルもPCも赤点の20点台場合は、使用中のプラグインや外部ウィジェットを一度外してみて原因を探ってみましょう！
ちなみにGtmetrixでもAランクになりました！
以上いかがでしたでしょうか。
テーマはCocoon使用していますが、使用テーマに関係なく、まずは JavaScriptを怪しんでみてください。そしてとにかく画像圧縮を～♪
コメント