gazou-compressor.jp

RUM(実ユーザー計測)

要点:実環境のCWVや失敗率を収集。本ページでは、現場での判断軸/実装/検証までをまとめます。

定義

RUM(実ユーザー計測)は品質の自動検知/回帰防止に関わるプラクティスです。

なぜ重要か

変更の多い現場では自動化がなければ品質を維持できません。

実務での活用(判断基準付き)

  • ビジュアル差分で見た目崩れを検出。
  • メトリクスはRUM/Lab両輪で低下を早期検知。
  • しきい値/失敗時フラグで自動停止できるように。

実装例

// 例: Playwright + Percy 的な差分テストの疑似コード
test('OGPは安全域を満たす', async ({ page }) => {
  await page.goto('/');
  const og = await page.$('.ogp');
  expect(await og.screenshot()).toMatchSnapshot('ogp.png', { threshold: 0.02 });
});

検証と失敗例

  • 計測軸: 差分スクリーンショットの検出率、メトリクスp75の安定性。
  • 失敗例: しきい値緩すぎで見逃し / 環境差で偽陽性多発。
  • 判断軸: 失敗時に自動ブロック/ロールバックが機能。誤検出率を**<2%**に。

チェックリスト

  • DevTools vs RUMの差を端末別に把握したか
  • ビジュアル差分メトリクスの両輪で回帰を検出したか
  • しきい値/アラートを決めて自動化したか
  • 失敗時のロールバック/フラグ切替を1クリック化したか

関連用語

visual-regression-testing, rum

関連記事