インタラクションレートとレイテンシーUI

1）インターフェイス速度とは何ですか

1.ジェスチャからイベントハンドラまでのレイテンシを入力します。

2.ネットワーク遅延-バックエンド/キャッシュ応答の前。

3.レイテンシをレンダリング-メインストリーム（JS/CSS/レイアウト/ペイント）で処理します。

4.アニメーション遅延-フレームの滑らかさと安定性。

目的：ユーザーは即座にアクションが開始され、プロセスがどこに移動しているかを確認します。本当の結果は予測可能です。

2）人間の知覚のしきい値

≤ 50 ms-"lightning fast'（印刷エコー、キープレス）。
≤ 100 ms-「即座に」（クリック→ビジュアルレスポンス）。
≤ 200 ms-ほとんどのUI反応で許容されます。
≤ 1000ms-明確な進歩/スケルトンと許容。

3） RAILモデルとターゲット予算

R（応答）： 入力応答

クリック/タップ→100ミリ秒≤視覚的な応答。
フォーカス/ホバー→≤ 80-120ミリ秒。

A（アニメーション）： 滑らかさ

60 FPS→フレーム16。7 ms；フレームから取り出す重い操作。
「変換」/「不透明度」のみをアニメーション化します。

I（アイドル）： バックグラウンドタスク

50ms ≤スロットに分割し、アイドル状態のウィンドウを使用します。

L（負荷）： ローディング

TTFB ≤ 200ms、 LCP ≤ 2。5s、 INP ≤ 200ms、 CLS ≤ 0。1.

4） KPIおよび速度警報

INP （Interaction to Next Paint）： p75 <200 ms （good）、 200-500（改善されるべき）。
長いタスク（>50ミリ秒）：LT <5％のフレームの割合。
TTFB p75 <200 ms（キャッシュ/エッジ）、LCP p75 <2。5 p。
最初のユーザーフィードバック（FUF）：アクションの最初の視覚的確認までの時間≤ 100ミリ秒です。
最初のフィールドが入力されるまでの1秒≤フォームで使用可能な時間。

5） UX即時応答パターン

1.楽観的なアップデート：UIを直ちに変更（balance/bet/like）、エラーにロールバックします。
2.構造が知られている場合、スピナーの代わりにスケルトン。
3.Progress/steps：プロセス長が既知の場合、決定論的プログレッシブバー。
4.ローカルのヒント：インスタントトースト/状態「送信」……≤ 100ミリ秒。
5.Intent preload： hover/visibility→'prefetch'/'preload'。

6）遅延緩和技術

6.1入力→レンダリング

モバイルで300ms遅延を撮影：'<meta name=「viewport」 content=「width=device-width、 initial-scale=1「>'。
'addEventListener（'touchstart'、handler、 {passive： true}）'。
マイクロタスクまたは'requestAnimationFrame'で処理をクリックすると、すぐに確認が描画されます。
レイアウトスラッシュを避ける：読み取り/書き込みレイアウト-butch。

6.2 JSとメインストリーム

個別のバンドル（コード分割）、ルートに沿ってロード。
重いコンピューティング→Web Worker。
'schedulerを使用します。バックグラウンドタスクのpostTask'/'requestIdleCallback'。
重要なCSS-インライン；JS 'defer'/'async'。
仮想化、'content-visibility： auto'、 'contains： content'をリストします。

6.3レンダリングとアニメーション

'transform/opacity'をアニメーション化します。'height/left/box-shadow'を何百もの要素にアニメーションしないでください。
'will-change'はアニメーションの前に一時的に置きます。きれいにしてください。
巨大なPNGの代わりにスプライト/ベクトル；重いぼかしを避けてください。

6.4ネットワークとキャッシュ

CDN、 'cache-control'、 'stale-while-revalidate'。
クリティカルドメインへの事前接続;初期のヒント（103）、 HTTP/2/3。
意図によるプリフェッチ（ホバー/ビューポート）。
ストリーミング/SSR+プログレッシブハイドレーション/アイランド。

7） Debowns/スロットリングおよびキュー

ディベート-入力中の検索（150-300ミリ秒）。
スロットリング-スクロール/サイズ変更用（100〜200ミリ秒）。
頻繁なイベント（ライブデータ）のキュー/ブッチングUIの更新。

js const debounce = (fn, ms=200)=>{let t; return (...a)=>{clearTimeout(t); t=setTimeout(()=>fn(...a),ms)}}
const throttle = (fn, ms=120)=>{let t=0; return (...a)=>{const n=Date. now(); if(n-t>ms){t=n; fn(...a)}}}

8）ローディングおよびフィードバックパターン

スケルトン→コンテンツ（調整なし、固定高さ）。
シマー1200-1600ミリ秒、振幅≤ 20％。
楽観的なカード：グレープレビュー+テキスト-データが到着したときに置き換えます。
エラー：短い再試行バナー、繰り返しのためのidempotencyキー。

9）迅速な対応のためのネットワーク戦略

• UIの即時確認（楽観的）、バックエンド-idempotent；
• タイムアウト（3-5秒）、ステータスの表示「受信、処理」+バックグラウンドリトレイ；
• ステータスバックオフ用のWebSocket/SSE 1-2-4-8 s。

プリデータ：スケジュール上のウォームアップキャッシュ、人気ルートのプリフェッチ。

エッジ関数：ユーザーに近い検証/集計。

10）高速UIスニペットコード

js btn. addEventListener('click', () => {
btn. classList. add ('is-busy') ;//requestAnimationFrame instant visual response (async () => {
try {
const res = await fetch('/api/action', { method: 'POST', body: payload });
if (!res.ok) throw new Error('fail');
btn. classList. add('is-done');
} catch {
btn. classList. remove('is-busy'); btn. classList. add('is-error');
}
});
});

js const prefetch = url => fetch(url, { credentials:'include', priority:'low' }). catch(()=>{});
document. querySelectorAll('a[data-prefetch]'). forEach(a=>{
a. addEventListener('mouseenter', () => prefetch(a. href), { once:true });
const io=new IntersectionObserver(e=>{ if(e[0].isIntersecting){prefetch(a. href); io. disconnect();} });
io. observe(a);
});

css
.btn. is-busy { pointer-events:none; }
.skeleton { position:relative; background: var(--bg-elevated); overflow:hidden; }
.skeleton::after {
content:""; position:absolute; inset:0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
animation: shimmer 1. 4s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%);} to { transform: translateX(100%);} }

11）診断および監視

フィールド：RUM（フィールドメトリック）p75 by country/network/device。
trace 'input→handler→network→paint'をクリックします。
レッドゾーンマークアップ：長いタスクマーカー、ブロッキングタイム、スロールートリスト。
INP/LCP/TTFBの劣化アラート。
シナリオテスト：参照時間の記録「click→change DOM」。

12） iGamingの詳細

• UI：ボタン状態の即時固定（押された→忙しい）、ダブルトースト「Accepted」。
• バックエンド：レートによるidempotentキー。status-WebSocket経由。タイムアウト→透過的な「保留中」。
• UI予算：FUF ≤ 100ミリ秒、最終確認≤ 1秒（長ければ、タイマー/理由を表示します）。

• 加速≤ 200ミリ秒、均一な回転、減衰300-500ミリ秒。無限の周期なし。
• ウィンスタブ-ストロボなし、テキスト/量を読み取り可能（AAA）。

• デルタは250-1000 msごとに一度パッチを詰めます；
• レイアウトジャンプなしの視覚的な差分（矢印/色/厚さ）；
• ホバー/フォーカスのアンチバウンス更新。

• バッチによるアカウントの増分40-60ミリ秒、テーブルディジット；
• スティッキーヘッダー、文字列の仮想化。

13）アンチパターン

クリックへの即時の応答がありません（ネットワークを待っています）。
何百もの要素に重い'フィルター/ボックスシャドウ'アニメーション。
クリティカルパスごとに1〜2 MBの巨大なJSバンドル。
スピナー・イン・ザ・ヴォイドは1-2以上で進行/スケルトンはありません。
1つのティック（レイアウトスラッシング）でレイアウトを読み書き。
モバイルでのホバー専用機能。

14）スピードトークン（設計システム）

json
{
"latencyBudget": {
"tapFeedbackMs": 100,
"keyEchoMs": 50,
"hoverMs": 120,
"pressMs": 90,
"modalInMs": 240,
"toastInMs": 200
},
"webVitalsTargets": { "INP": 200, "LCP": 2500, "CLS": 0. 1, "TTFB": 200 },
"animation": {
"easing": { "std": "cubic-bezier(0. 2,0,0. 2,1)", "acc": "cubic-bezier(0. 4,0,1,1)" },
"duration": { "hover": 160, "active": 90, "overlay": 240 }
}
}

15）速度のQAチェックリスト

レスポンス

• クリック/タップ→ビジュアルレスポンス≤ 100ms；→エコー入力≤ 50ms。
• モバイルで300ミリ秒の遅延はありません。
• INP p75 ≤ 200ms；長いタスクのシェア≤ 5％です。

ロード

• TTFB ≤ 200ms；LCP ≤ 2。5 s；CLS ≤ 0。1.
• 「ぶら下げ」スピナーの代わりにスケルトン/進行。

レンダリング

• アニメーションの'transform/opacity'のみ；配列に「重い」影はありません。
• 長いリストのためのコンテンツ可視性/仮想化。

ネットワーク

• エッジキャッシュ、プリコネクト、インテント接頭辞。
• 重大な行動のためのIdempotencyとretreats。

A11y

• 'prefers-reduced-motion'をサポート。
• ホバーコンテンツはフォーカス/キーボードで利用できます。

16）設計システムドキュメント

「レイテンシー予算」：しきい値のテーブル（タップ、ホバー、モーダル、トースト、フォーム）。
「インスタントフィードバック」：楽観的なアクションパターン+プルバック。
「Prefetch by Intent」：ガイドとユーティリティ。
「Performance Playbook」：プロファイリングチェックリストとRUMアラート。
「Do/Don 't」：数字の高速/遅いスクリプトの例。

概要

相互作用の速度は、結果の即時応答+予測可能な配信です。最初のフィードバックのための神聖な予算として100msを保ち、ネットワーク（エッジ/キャッシュ/プレフィックス）を最適化し、メインストリームをオフロードし、安価なプロパティのみをアニメーション化し、楽観的なパターンを適用します。その後、インターフェイスは活気があり、理解しやすく、弾力性があります。特にハイステークでリアルタイムのiGamingシナリオでは。