世代フォーマットでの画像の配信

画像をWebPに代表される次世代フォーマットに変換して軽量化しましょう。ブラウザによって対応しているフォーマットが異なるので適切に出し分けをする必要があります。

適切なサイズの画像

サムネイルなど、大きな画像をCSSで縮小して表示していたりしませんか？適切なサイズで画像を配信して読み込み時間とデータ量を削減しましょう。

オフスクリーン画像の遅延読み込み

ファーストビューで表示されない画像は遅延読み込みしましょう。

効率的な画像フォーマット

画像の性質にあわせて適切なフォーマットを選択しましょう。

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

ファーストビューの表示に必要のないCSS、JavaScriptは遅延読み込みさせましょう。

使用していない CSS を削除してください/JavaScript の削除

CSSやJavaScriptをどのページでも同じように読み込んでいませんか？必要なファイルだけを読み込む、使われていないルールを削除する、などしてデータ量を削減しましょう。

速度の指標：LCP(Largest Contentful Paint)

ユーザーがページで最も有意義なコンテンツをどのくらい速く見ることができるかを測定します。画像だけではなく段落（文章）も対象となります。このページがユーザーにとって「有意義」であることを最速で伝えましょう。

応答性の指標：FID(First Input Delay)

ユーザーが最初にページを操作できるまでの時間です。ユーザーが次のアクションにスムーズに移れるようにしましょう。操作ができなければユーザーは立ち去ってしまうでしょう。

視覚的安定性の指標：CLS(Cumulative Layout Shift)

レイアウトのずれの量です。ボタンを押そうとしたら後から読み込まれたコンテンツのせいで違うリンクをクリックしてしまった、ということはありませんか？ユーザーを結果的に騙すような動きは減点対象となります。