PageSpeed Insights（ページスピード・インサイツ）を理解する

とりあえず、こちらにアクセスしてhttps://pagespeed.web.dev/有効のURLを入力して「分析」ボタンを押してみましょう！

これだけで、現時点でのWebページの表示計測の結果が出ます。
下の画像が携帯電話(スマホ版)とデスクトップ(PC版)の分析結果です。

↓ 携帯電話(スマホ版)

↓ デスクトップ版(PC版)

この結果を見ると、PC版はいい感じですが、モバイル版のパフォーマンスは改善が必要ですね。

携帯電話(スマホ版)とデスクトップ(PC版)画像の下部の赤枠の箇所に5つの指標があります。
とりあえず、この5つを覚えておけば大丈夫！パフォーマンスの改善ができるはずです！

1. First Contentful Paint（FCP）⇒ 最初のコンテンツ表示にかかるまでの速さ

2. Largest Contentful Paint（LCP）⇒ メインコンテンツの読み込みの速さ

3. Total Blocking Time（TBT）⇒ 合計ブロック時間

4. Cumulative Layout Shift（CLS）⇒ ページレイアウトの安定性

5. Speed Index ⇒ ページを表示する時間の速さ

この5つの指標によって
「パフォーマンス」
「ユーザー補助」
「おすすめの方法」
「SEO」
の評価が変化します。もちろん全ての指標が100点だとしたら最高の結果なのですが、あまり神経質になる必要はありません。例えば、スピードを重要視した結果、本来は必要である機能を取り除きWebサービスの品質を落としてまで指標を100点満点取得しても、ユーザーからしてみたら、スピードよりも品質の方が重要だったりします。作り側の自己満足にならないよう、バランスが良い目標として各指標の90点以上を目指せばWebページの読み込みのスピードは速いといえます。それでは、5つの重要な指標を理解しましょう！

First Contentful Paint(ファースト・コンテントフル・ペイント)とはWebページを読み込みを始めて、最初のコンテンツ表示にかかるまでの時間のことです。

表示まで時間は秒数で評価されます。快適なユーザー体験を提供するためには、Webページの表示スピードを 1.8 秒以下になるように最適化する必要があります。
0～1.8秒：「良い」
8～3.0秒：「要改善」
3.0秒以上：「不十分」
改善方法はサーバー応答時間や画像・ファイル・フォントなどの読み込み左右されるので、「画像を最適化・圧縮する」 「JavaScriptやCSSのサイズを圧縮する」「Webフォントのロード最適化」などが有効的です。

Largest Contentful Paint(ラージェスト・コンテントフル・ペイント)とは最も大きいコンテンツ(メインのコンテンツ)が表示されるまでの時間を表します。

ページ表示までの時間が秒数で評価されます。快適なユーザー体験を提供するためには、Webページの表示スピードを 2.5 秒以下になるように最適化する必要があります。
0～2.5秒：「良い」
2.5～4.0秒：「要改善」
4.0秒以上：「不十分」
改善方法は画面描画を妨げる処理を最適化する。具体的な方法としてはJavaScriptやCSSのサイズを圧縮したり、重要ではないJavaScriptやCSSを読み込むタイミングをなどを送らせたりする施策が有効的です。

Total Blocking Time（トータル・ブロッキング・タイム）とは、最初のWebページの描画からユーザーが操作可能になるまでの応答がブロックされている時間の合計です。Webページの応答性を表す指標でユーザーが操作可能になるまでの処理時間が、50ミリ秒を超えると「ブロック」と見なされます。

表示までの「ブロック」される時間を 200ms（ミリ秒） 以下になるように最適化する必要があります。
0～200ms(ミリ秒)：「速い」
200～600ms(ミリ秒)：「普通」
600ms(ミリ秒)以上：「遅い」
改善方法は主にJavaScriptによる非効率なプログラミングの見直しや不要な処理を削除するなどが有効的です。また、読み込み画像の容量が大きいと、それなりに読み込み時間がかかってしまうので、画像の圧縮をすることでブロックされる時間が短縮される場合があります。

Cumulative Layout Shift（キュミリティブ・レイアウト・シフト）とは、ユーザーが意図しないレイアウトのずれを計測し、Webページの視覚的な安定性を表す指標です。一言で言えば、ウェブページのコンテンツがどれほど「意図せず」動いてしまったかを測定するものです。わかりやすい例だと、Webサイトのページが表示されるまでの間にレイアウトが崩れたりする現象で特に画像が遅れて表示されるときに「カクカクッ」ってなる状況ですね。これはレイアウトシフト（layout shift）と呼ばれています。

レイアウトシフトが発生した場合には以下のケースを確認してみましょう。
HTMLのimgタグにのwidthとheightにサイズを指定しているか確認する。
Web広告が埋め込まれている JavaScriptによってコンテンツが動的に埋め込まれている場合は、取り外すか検討する。
Webフォントの読み込みでレイアウトのずれが発生していないか確認する。

Speed Index(スピード・インデックス)とは、Webページのコンテンツがユーザーのディバイスに表示される速さの指標です。ページ読み込みが始まってからファーストビュー（スクロールをしない状態で画面に表示されるエリア）までの表示スピード（速さ）を計測します。

Webページ表示までのスピードが 3.8ミリ秒 以下になるように最適化する必要があります。
0～3.8秒：「速い」
3.9～7.3秒：「普通」
7.3秒以上：「遅い」
改善方法は画像の最適化、ソースを圧縮、ブラウザのキャッシュの活用、不要なJavaScriptを削除などの出来る限りの最適化の調整が必要です。しかし！あまり神経質にならずに、先ほどもお伝えしましたが各指標の90点以上を目指す気持ちで十分だと思います。力を抜いてを最適化していきましょう！