画像の軽量化

※重要度5

個人的にはもっとも分析に影響のある内容と考えます。以下の3点が重要です。
-画像を適切なサイズにリサイズ
-画像の形式をWebp化
-画像を圧縮

デメリットとして、画像が荒くなることです。見た目を重視するサイトには、このような対応は適していないかもしれません。クライアントが何を求めているのかが重要になります。

検証ツールで確認し、適切なサイズにリサイズすることが大切です。組み込みサイズが、レンダリングサイズを下回らないように注意してください。

画像のWebp化はターミナルを使用して実装しました。詳細はこちらを参照ください。

画像の圧縮はImageOptimを使用しております。

当方の体感値ですが、こちらを対応した結果、おそらく0〜30ポイント向上したというのが主観的な評価です。

フォント読込みを見直す

※重要度5

こちらも分析に大きな影響を与えています。GoogleフォントやAdobeフォントの読み込みを停止した状態で計測すると、得点が明らかに変化し向上します。よって読込み方法や不要なfont-weightを読み込んでいないか十分に注意し、サーバーを介するセルフホスティングや非同期での読み込みなどを検討する必要があります。参考にさせていただいたサイトはこちらです。

体感値0〜2０ポイント

コードを圧縮

こちらのサイトでCSS・Javascriptのコードが圧縮できます。

重たいファイルにハッシュ値を設定

Webpackなどのモジュールバンドラーを使用します。GsapやjQueryなどの外部CDNからの読み込みは避けてください。

コードに互換性及び、サイトのチェック

CSSはベンダープレフィックスを追加し、JavaScriptはBabelなどを使用して、新しいコードを古いコードに変換してください。
また、しっかりとHTMLのルールにしたがって記述しているかこちらのツールなどを使用しチェックして見てください。