初めに
これは自分が試行錯誤する中の記録としての記事です
ので、
情報の正確性に関しては保証していません。
概要
- PageSpeed Insightsについて
PageSpeed Insights
SEO対策という目的で、SEO視点での現状のシステムの現状を把握するにはこれがいいと思っている。
指標内容と改善方法
Largest Contentful Paint (LCP):メインコンテンツの読み込み時間
指標内容
LCPは、ページの主要なコンテンツが画面上に表示されるまでの時間を測定します。LCPが短いほど、ページの読み込みが早く、ユーザーエクスペリエンスが向上します。2.5秒以内が目標です。
- 0～2.5秒：「良い」
- 2.5～4.0秒：「要改善」
- 4.0秒以上：「不十分」
改善方法
- 画像や動画の最適化: ファイルサイズを減らし、遅延読み込みを実装する
- CSSの最適化: 不要なCSSを削除し、インラインCSSを適切に使用する
- JavaScriptの最適化: 不要なスクリプトを削除し、遅延読み込みや非同期読み込みを実装する
- サーバーの応答速度向上: キャッシュの活用やCDNの導入でサーバー応答速度を向上させる
問題の特定とアプローチ
- 遅延読み込みによるスコア低下
- lcp-lazy-loading
- 初期画面に表示される画像にlazy-loadを使っているとスコアが悪くなるらしい
- chrome devtoolsで最大サイズのコンテンツを特定する
First Input Delay (FID):Webページの応答性
指標内容
FIDは、ユーザーが最初にインタラクションを開始するまでの遅延時間を測定します。これは、ウェブページが応答性が高いと感じるかどうかに影響します。
クリックやタップ、キーボード入力などに対し、応答されるまでの待機時間。100ミリ秒以内が目標です。
- 0～100ms（ミリ秒）：「良い」
- 100～300ms：「要改善」
- 300ms以上：「不十分」
改善方法
- 広告や計測ツールなどのJavascriptによって応答遅延が起こることもある
- JavaScriptの最適化: 主にメインスレッドのブロッキングを減らすことでFIDを改善できます。遅延読み込みや非同期読み込み、コード分割などを行う
- インタラクションに優先度を付ける: クリティカルなインタラクションに優先度を付けて、他の処理を遅らせる
Cumulative Layout Shift (CLS):視覚的な安定性
指標内容
CLSは、ページの視覚的な安定性を測定します。これは、ページが読み込まれる間に要素がどれだけ動くかを示します。低いCLSスコアは、ユーザーが誤ってクリックするリスクを減らします。0.1未満が目標です。
広告が出現して誤タップするというのを防ぐための指標。
- 0～0.1：「良い」
- 0.1～0.25：「要改善」
- 0.25以上：「不十分」
改善方法
- 画像や動画、広告の表示表域にサイズを設定: 要素のサイズが変わらないように、widthとheight属性を指定する
- フォントの最適化: フォントの読み込みによるレイアウトのシフトを防ぐために、font-displayプロパティを使用する
- 動的なコンテンツの挿入を避ける: ページ読み込み中に動的にコンテンツを挿入することを避け、最初から表示位置を確定させる
First Contentful Paint (FCP):最初のコンテンツ表示にかかるまでの時間
指標内容
FCPは、ページの最初のコンテンツが画面に表示されるまでの時間を測定します。これは、ページの読み込みが始まっていることをユーザーに示す重要な指標です。2秒以内が目標です。
- 0～1.8秒：「良い」
- 1.8～3.0秒：「要改善」
- 3.0秒以上：「不十分」
改善方法
- リソースの最適化: 画像、CSS、JavaScriptの最適化によってFCPを改善できます
- サーバーの応答速度向上: キャッシュの活用やCDNの導入でサーバー応答速度を向上させる
- レンダリングブロックリソースの削減: クリティカルなCSSやJavaScriptのみを読み込み、非クリティカルなリソースを遅らせる
Interaction to Next Paint (INP):次のページ描画の応答性
指標内容
INPは、ユーザーがインタラクションを開始した後、次のページ描画が行われるまでの時間を測定します。これは、ウェブページが迅速に反応することをユーザーに示す重要な指標です。
- 200ミリ秒以下：ページの応答性が良好
- 200ミリ秒を超えて500ミリ秒以下：ページの応答性を改善する必要がある
- 500ミリ秒を超える：ページの応答性が不良
FIDとの違い
INPはFIDを包括しており、負荷と応答性をより正確に評価できる信頼性の高い指標といえます。
- FID
- 測定範囲: 最初のインタラクションのみ
- 測定される時間: 入力遅延時間
- INP
- 測定範囲: ページ読み込みを開始してからユーザーがページを離れるまでの全範囲のインタラクション
- 測定される時間: 入力遅延時間 + 処理時間 + 表示遅延時間
改善方法
Web Vitalsを使って遅い部分を特定する。
Time to First Byte (TTFB):サーバー応答速度
指標内容
TTFBは、ユーザーがリクエストを送信してから最初のバイトが受信されるまでの時間を測定します。これは、サーバーの応答速度を示す指標です。200ミリ秒以内が目標です。
改善方法
- サーバーのパフォーマンス最適化: サーバーのキャッシュ設定やデータベースの最適化を行います。
- CDNの使用: グローバルなユーザーに対して、コンテンツを高速に配信するためにCDNを使用します。
このURLとオリジンの違い
このURLとは
サイト内の特定のページのことを指す。つまり入力したアドレスのページに関してパフォーマンス評価を行います、
オリジンとは
ドメイン全体のことを指す。サイト全体のパフォーマンスに関しての評価を行います。
サイト全体の評価というのは具体的にどのようにしているのでしょうか?
Googleが管理しているCrUX（Chrome User Experience Report)というものによってスコアが出されているよう。
CrUXというのは際のユーザーがGoogle Chromeを使用してウェブページにアクセスした際のパフォーマンスデータを集約したデータセット。
このデータをもとにサイトのパフォーマンススコアを出しているのですね。
これは
毎月データ更新されます。なので今出ているオリジンでのスコアというのは先月収集されたパフォーマンスのスコアということになります。
ユーザー数が十分にあり、googleによりデータ収集が行われている場合にのみオリジンのスコアが確認できるらしい。