ウェブに関する主な指標で訪問者のエンゲージメントを維持する

自社のニュースサイトで優れたユーザー エクスペリエンスを提供する

ウェブに関する主な指標とは

ウェブに関する指標とは Google によるイニシアティブの一つで、ウェブ上での優れたユーザー エクスペリエンスの提供に欠かすことのできない品質シグナルに関する統一的なガイダンスの提供を目的としています。
ウェブに関する主な指標とは、ウェブに関する指標の中の 3 つの指標のことです。ウェブに関する主な指標のしきい値を満たすサイトの場合、ユーザーがそのページを離脱する可能性が 24% 低くなることが調査で示されています。
ウェブに関する主な指標では以下が重視されます。
- 読み込み
- インタラクティブ性
- 視覚的な安定性

ウェブに関する主な指標の測定をはじめる

データの収集は、ウェブに関する主な指標を改善するための最初のステップです。
- PageSpeed Insights は、モバイルとデスクトップ デバイスの両方でページのユーザー エクスペリエンスの測定、レポートを行い、ページを改善する方法に関する最適化案を提供します。
- Search Console は、ユーザーのサイトの利用方法に基づいて、ページがウェブに関する主な指標のしきい値をどの程度満たしているかを測定してレポートします。
- Web Vitals Chrome Extension は、ウェブに関する主な指標のパフォーマンスの測定、レポートをすべてのページを対象としてリアルタイムで行うもので、デベロッパーに最適です。
💡ベスト プラクティス: これらのツールから提供される最適化案をデベロッパーと共有します。

読み込み

読み込み時間がはやいと、そのページが有益であるという安心感を読者に与えることができます。
- ユーザーの 50% が、読み込みに 3 秒以上かかる場合にそのサイトを離脱する
- ユーザーの 47% が、ウェブページが 2 秒以内に読み込まれることを期待している
- ユーザーの 52% が、そのブランドを気に入るかどうかに関して、読み込み時間が重要であると回答している
読み込み時間は、Largest Contentful Paint(LCP)で測定されます。これは、最も大きい画像またはテキスト ブロックを表示するのにかかる時間です。
ウェブに関する主な指標のしきい値を満たすには、ページの 75% で読み込み時間を 2.5 秒以内にする必要があります。
💡ベスト プラクティス
- 遅延読み込みを有効にする
- サイズの大きな GIF ではなく動画を使用する
- 使用されていないコードを削除する

インタラクティブ性

読み込みは、サイトがコンテンツを表示するはやさが測定されますが、インタラクティブ性では、ユーザーが記事の選択などのアクションを実行したときのサイトの応答性が測定されます。
インタラクティブ性は、First Input Delay(FID)で測定されます。これは、ユーザーがリンクやボタンをクリックしてから、そのアクションの処理がサイトで開始されるまでにどの程度の時間がかかるかを示します。
ウェブに関する主な指標のしきい値を満たすには、ページの 75% で、クリックの処理を開始するまでの時間を 0.1 秒以内 にする必要があります。
💡ベスト プラクティス
- コードをより小さなタスクに分割し、遅延読み込みを有効にする
- そのページで必要なコードを最初に読み込む
- データを取得するコードを減らす

視覚的な安定性

記事を読みはじめてから読み終える前にテキストが動いてしまって、読んでいた箇所がわからなくなってしまった経験はありますか
ほとんどの場合、このような現象は単に煩わしいだけですが、実害が発生する可能性もあります。
視覚的な安定性は、Cumulative Layout Shift(CLS)で測定されます。これは、一度に発生するコンテンツ シフト(コンテンツのずれ)の最大数です。
ウェブに関する主な指標のしきい値を満たすには、ページの 75% でスコアを 0.1 以下にする必要があります。
💡ベスト プラクティス
- 画像や動画にアスペクト比やディメンションを設定する
- 過去の広告に基づいて、最も適した広告サイズを選択する
ページの先頭に表示される広告を避ける

