Webサイトの指標 -ウェブバイタル Web Vitals-

SITE/BLOG

 ユーザー・エクスペリエンス(使いやすさ、ユーザビリティ)
 - ウェブに関する主な指標 = Core Web Vitals(コアウェブバイタル)(web.dev/vitals/
  3つの主要指標

  1.  ページ表示時間(ページ読み込み時間)
     下記
  2.  インタラクティビティ(ページ読み込みの応答性)
     INP Interaction to Next Paint
      FIDより良い応答性の指標
      目標:200ミリ秒未満

      FID First Input Delay ・・・ 初回入力までの遅延時間
       目標:100ミリ秒以下
       ラボ環境では測定できない

     合計ブロック時間 TBT Total Blocking Time
      ラボ環境でも測定可能
  3.  視覚的安定性
     下記

 パフォーマンス測定
  世界中のChromeユーザーから収集
   収集期間:過去28日間

   フィールドデータ ・・・ 特定のページ
   Origin Summary ・・・ サイト全体

  ラボ環境(ラボデータ)
   ユーザー入力がないシミュレーション環境

   Chrome Lighthouseツール

スポンサーリンク

Webサイトのページ表示時間

 LCP、FCP、TTFB、

スポンサーリンク

Webサイトの視覚的安定性 CLS

 ※ 元は2022年4月の記事。2025年、少し追加・編集

 Googleサーチコンソールの
 エクスペリエンス - ページエクスペリエンスをみたら
  +)ページエクスペリエンスは簡素化された
 「ウェブに関する主な指標」が「失敗したURL」だらけになっていた。
 不良0だが良好も0。
 みな「改善が必要」になっていた。

 詳細は「CLSに関する問題:0.1超」。

 CLSはCumulative Layout Shift(累積レイアウト・シフト)の略。

 ※ CLSの説明ページ(web.dev/cls/

 視覚的安定性 ・・・ ページ内の視覚要素がどのくらい移動しているか
  レイアウトの不安定性。値が大きいほど不安定
  目標:0.1未満
  0.25超だと不良

 例えば、ホームページにアクセスして、本文中のリンクをクリック(タップ)しようとしたら、少し遅れて画像が読み込まれたために上から下がってきた画像をポチッと押してしまうことがある。いわゆる誤クリック。
 ユーザーに不快感を与える。
 自分のブログを確認する際、広告を自分でクリックしかねないので危険。

 検索して調べてみたら
 対処法は大きく2つあった。

 1つは、
 画像要素でwidth(幅)とheight(高さ)を明示的に指定すること。

 HTMLのimgタグに幅と高さを指定しておけば
 (ブラウザで)画像が読み込まれる前にあらかじめ表示領域が確保されるのでレイアウトが移動しない、
という理屈。

 CSSで一括して

img{
max-width:100%;
height:auto;
}

とする例示もあったが、
 (WordPressのCocoon)テーマエディターから覗いてみたら、既にそうなっていた。

 もう1つの対処法は、
 Googleアドセンスの自動広告の見直し。

 CLSが良好でない該当ページをいくつか確認してみたところ
 広告が本文中のあらぬところにいくつも挿入されて、追尾広告のようになっていた。
 以前確認した時はさほど目障りではなかったが、
 いつの間にか暴れていた。
 制御できない。
 CLS不良の最たる原因は自動広告---。

 手動広告にすれば2週間-1ヶ月後、CLS0.1未満(良好)になる。

 ただ、Googleは自動広告の使用を奨めてくる。
 自動広告ならばポリシーに触れることもないし、機能改善も図られているようなので、
 CLSが良好になった後、自動広告に戻してみるのも1つの方法。当分の間、良好のまま推移する。

 +)2025年、久々にCLS不良。自動広告をやめたら良好になった。
   1ヶ月後、再び自動広告。
   特にモバイルが不良続きだったので、
   ・ オーバーレイフォーマットのアンカー広告をオフ
   ・ 「全般設定」の『モバイル広告のサイズを自動で最適化する』をオフ
   にした。
   依然模索中。

スポンサーリンク