Interaction rate and latency UI

1) What is interface speed

1. Input latency - from gesture to event handler.

2. Network latency - before the backend/cache response.

3. Render latency - processing on the main stream (JS/CSS/layout/paint).

4. Animation latency - smoothness and stability of frames.

Purpose: the user instantly sees that the action has begun and where the process is moving; the real result comes predictably.

2) Thresholds of human perception

≤ 50 ms - "lightning fast" (print echo, key press).
≤ 100 ms - "instantly" (click → visual response).
≤ 200 ms - acceptable for most UI reactions.
≤ 1000 ms - tolerable with clear progress/skeleton.

3) RAIL model and target budgets

R (Response): input response

Click/tap → visual response ≤ 100 ms.
Focus/hover → ≤ 80-120 ms.

A (Animation): smoothness

60 FPS ⇒ frame 16. 7 ms; heavy operations to take out of the frame.
We animate only 'transform '/' opacity'.

I (Idle): background tasks

Divide into slots ≤ 50 ms, use idle windows.

L (Load): loading

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

4) KPI and speed alerts

INP (Interaction to Next Paint): p75 <200 ms (good), 200-500 (to be improved).
Long Tasks (> 50 ms): proportion of frames with LT <5%.
TTFB p75 <200 ms (cache/Edge), LCP p75 <2. 5 p.
First User Feedback (FUF): time until the first visual confirmation of action ≤ 100 ms.
Time-to-Usable for forms ≤ 1 s before the first field is entered.

5) UX instant response patterns

1. Optimistic updates: change UI immediately (balance/bet/like), roll back on error.
2. Skeletons instead of a spinner if the structure is known.
3. Progress/steps: deterministic progressive bar if process length is known.
4. Local tips: instant toast/state "Send..." ≤ 100 ms.
5. Intent preload: hover/visibility → 'prefetch '/' preload'.

6) Delay mitigation techniques

6. 1 Input → Render

Shoot 300ms delay on mobile: '<meta name = "viewport" content = "width = device-width, initial-scale = 1">'.
Listeners passive for scrolling/tach: 'addEventListener (' touchstart ', handler, {passive: true})'.
Click processing - in a micro task or 'requestAnimationFrame' to quickly draw confirmation.
Avoid layout-thrash: read/write layout - butch.

6. 2 JS and Main Stream

Separate bundles (code-splitting), load along the routes.
Heavy computing → Web Worker.
Use'scheduler. postTask '/' requestIdleCallback 'for background tasks.
Critical CSS - inline; JS с `defer`/`async`.
List virtualization, 'content-visibility: auto', 'contain: content'.

6. 3 Rendering and animations

Animate 'transform/opacity'; do not animate 'height/left/box-shadow' on hundreds of elements.
'will-change'put temporarily before animation; clean up after.
Sprites/vector instead of huge PNGs; avoid heavy blur.

6. 4 Network and cache

Edge-кеш (CDN), `cache-control`, `stale-while-revalidate`.
Preconnect to critical domains; Early Hints (103), HTTP/2/3.
Prefetch by intention (hover/viewport).
Streaming/SSR + Progressive Hydration/Islands.

7) Debowns/throttling and queues

Debate - for search during input (150-300 ms).
Throttling - for scrolling/resize (100-200 ms).
Queues/butching UI updates for frequent events (live data).

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) Loading and feedback patterns

Skeleton → Content (no tweaks, fixed heights).
Shimmer 1200-1600 ms, amplitude ≤ 20%.
Optimistic card: gray preview + text - we replace it when the data arrives.
Error: short retry banner, idempotency keys for repetitions.

9) Network strategies for rapid response

• confirmation of UI immediately (optimistic), backend - idempotent;
• when timeout (3-5 s), displaying the status "received, processed" + background retrays;
• WebSocket/SSE for statuses, backoff 1-2-4-8 s.

Pre-data: warm-up cache on a schedule, prefetch of popular routes.

Edge functions: validations/aggregations closer to the user.

10) Fast UI snippet code

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) Diagnostics and monitoring

Field: RUM (field metrics) p75 by country/network/device.
Click trace 'input → handler → network → paint'.
Red zone markup: Long Task markers, blocking-time, Slow-route list.
INP/LCP/TTFB degradation alerts.

Scenario tests: record of reference time "click → change DOM."

12) The specifics of iGaming

• UI: instant fixation of the button state (pressed → busy), double - toast "Accepted."
• Backend: idempotent key by rate; status - via WebSocket; timeout → transparent "pending."
• UI budget: FUF ≤ 100 ms, final confirmation ≤ 1 s (if longer, we show the timer/reason).

• Acceleration ≤ 200 ms, uniform rotation, attenuation 300-500 ms; without infinite cycles.
• Win stubs - no strobe, text/amount readable (AAA).

• Delta patches once every 250-1000 ms, butching;
• visual diff (arrow/color/thickness) without layout jumps;
• anti-bounce updates on hover/focus.

• account increment by batches 40-60 ms, table digits;
• sticky header, string virtualization.

13) Anti-patterns

No instant response to click (waiting for network).
Heavy 'filter/box-shadow' animations on hundreds of elements.
One huge JS bundle> 1-2 MB per critical path.
Spinner in the Void is over 1-2 with no progress/skeleton.
Reading/writing layout in one tick (layout thrashing).
Hover-only features on mobile.

14) Speed ​ ​ tokens (design system)

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 checklist of speed

Response

• Click/tap → visual response ≤ 100 ms; → echo input ≤ 50ms.
• No 300 ms delay on mobile.
• INP p75 ≤ 200ms; Long Tasks share ≤ 5%.

Loading

• TTFB ≤ 200ms; LCP ≤ 2. 5 s; CLS ≤ 0. 1.
• Skeletons/progress instead of "hanging" spinners.

Render

• Only 'transform/opacity' in animations; there are no "heavy" shadows on the arrays.
• content-visibility/virtualization for long lists.

Network

• Edge cache, preconnect, intent prefix.
• Idempotency and retreats for critical actions.

A11y

• 'prefers-reduced-motion' supported.
• Hover content is available by focus/keyboard.

16) Design system documentation

"Latency Budgets": table of thresholds (tap, hover, modal, toast, form).
"Instant Feedback": optimistic action patterns + pullback.
"Prefetch by Intent": guide and utilities.
"Performance Playbook": profiling checklists and RUM alerts.
"Do/Don't": Examples of fast/slow scripts with numbers.

Brief Summary

The speed of interaction is the instant response + predictable delivery of the result. Keep 100ms as a sacred budget for first-feedback, optimize the network (Edge/cache/prefix), offload the main stream, animate only cheap properties and apply optimistic patterns. Then the interface feels lively, understandable and resilient - especially in high-stakes, real-time iGaming scenarios.