Швидкість взаємодії та latency UI

1) Що таке швидкість інтерфейсу

1. Input latency - від жесту до обробника події.

2. Network latency - до відповіді бекенду/кешу.

3. Render latency - обробка на головному потоці (JS/CSS/layout/paint).

4. Animation latency - плавність і стабільність кадрів.

Мета: користувач миттєво бачить, що дія почалася і куди рухається процес; реальний результат приходить передбачувано.

2) Пороги людського сприйняття

≤ 50 мс - «блискавично» (відлуння друку, натискання клавіші).
≤ 100 мс - «миттєво» (клік → візуальний відгук).
≤ 200 мс - допустимо для більшості UI-реакцій.
≤ 1000 мс - терпимо при явному прогресі/скелетоні.

3) RAIL-модель і цільові бюджети

R (Response): відгук на введення

Клік/тап → візуальний відгук ≤ 100 мс.
Фокус/hover → ≤ 80-120 мс.

A (Animation): Плавність

60 FPS ⇒ кадр 16. 7 мс; важкі операції виносити з кадру.
Анімуємо тільки'transform '/' opacity'.

I (Idle): фонові завдання

Ділимо на слоти ≤ 50 мс, використовуємо idle-вікна.

L (Load): завантаження

TTFB ≤ 200 мс, LCP ≤ 2. 5 с, INP ≤ 200 мс, CLS ≤ 0. 1.

4) KPI і алерти швидкості

INP (Interaction to Next Paint): p75 <200 мс (добре), 200-500 (потрібно покращувати).
Long Tasks (> 50 мс): частка кадрів з LT <5%.
TTFB p75 <200 мс (кеш/Edge), LCP p75 <2. 5 с.
First User Feedback (FUF): час до першого візуального підтвердження дії ≤ 100 мс.
Time-to-Usable для форм: ≤ 1 з до введення першого поля.

5) UX-патерни миттєвого відгуку

1. Оптимістичні оновлення: змінюємо UI відразу (баланс/ставка/лайк), відкочуємо при помилці.
2. Скелетони замість спінера, якщо відома структура.
3. Прогрес/етапи: детермінований прогресбар, якщо довжина процесу відома.
4. Локальні підказки: миттєві тости/стейт «Відправляємо»... ≤ 100 мс.
5. Передзавантаження на намірі: hover/видимість →'prefetch '/' preload'.

6) Технічні прийоми зниження затримок

6. 1 Input → Render

Знімайте 300 мс delay на мобільних: `<meta name="viewport" content="width=device-width, initial-scale=1">`.
Слухачі passive для скролла/тача: `addEventListener('touchstart', handler, { passive: true })`.
Обробку кліка - в мікрозадачу або'requestAnimationFrame'для швидкого відмальовування підтвердження.
Уникайте layout-thrash: читання/запису layout - батчити.

6. 2 JS і головний потік

Розділяйте бандли (code-splitting), завантажуйте за маршрутами.
Важкі обчислення → Web Worker.
Використовуйте'scheduler. postTask '/' requestIdleCallback'для фонових завдань.
Критичний CSS - inline; JS с `defer`/`async`.
Віртуалізація списків,'content-visibility: auto`, `contain: content`.

6. 3 Рендер і анімації

Анімуйте'transform/opacity'; не анімуйте'height/left/box-shadow'на сотнях елементів.
'will-change'ставити тимчасово перед анімацією; прибирати після.
Спрайти/вектор замість величезних PNG; уникайте heavy blur.

6. 4 Мережа і кеш

Edge-кеш (CDN), `cache-control`, `stale-while-revalidate`.
Preconnect до критичних доменів; Early Hints (103), HTTP/2/3.
Префетч за наміром (hover/viewport).
Streaming/SSR + прогресивна гідрація/острови.

7) Дебаунс/троттлінг і черги

Дебаунс - для пошуку під час введення (150-300 мс).
Тротлінг - для скролла/resize (100-200 мс).
Черги/батчинг UI-оновлень при частих подіях (live-дані).

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) Патерни завантаження і зворотного зв'язку

Skeleton → Content (без зрушень, фіксовані висоти).
Shimmer 1200-1600 мс, амплітуда ≤ 20%.
Оптимістична картка: сірий прев'ю + текст - підміняємо при приході даних.
Помилка: короткий retry-банер, idempotency-ключі для повторів.

9) Мережеві стратегії для швидкої відповіді

• підтвердження UI відразу (оптимістично), бекенд - idempotent;
• при таймауті (3-5 с) показ статусу «отримали, обробляємо» + фонові ретраї;
• WebSocket/SSE для статусів, backoff 1-2-4-8 с.

Пре-дані: warm-up кешу за розкладом, префетч популярних маршрутів.

Edge функції: валідації/агрегації ближче до користувача.

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 по країнах/мережах/пристроях.
Трасування кліка: `input → handler → network → paint`.
Розмітка «червоних зон»: Long Task маркери, blocking-time, Slow-route list.
Алерти на деградацію INP/LCP/TTFB.
Сценарні тести: запис еталонного часу «клік → зміна DOM».

12) Специфіка iGaming

• UI: миттєва фіксація стану кнопки (pressed → busy), дубль - тост «Прийнято».
• Бекенд: idempotent ключ по ставці; статус - через WebSocket; таймаут → прозорий «pending».
• UI-бюджет: FUF ≤ 100 мс, підсумкове підтвердження ≤ 1 с (якщо довше - показуємо таймер/причину).

• Розгін ≤ 200 мс, рівномірне обертання, загасання 300-500 мс; без нескінченних циклів.
• Заглушки виграшу - без строба, текст/сума читаються (AAA).

• Дельта-патчі раз в 250-1000 мс, батчинг;
• візуальний дифф (стрілка/колір/товщина) без стрибків layout;
• анти-дребезг оновлень на hover/focus.

• інкремент рахунку батчами 40-60 мс, табличні цифри;
• sticky-шапка, віртуалізація рядків.

13) Анти-патерни

Відсутність миттєвої реакції на клік (очікування мережі).
Важкі анімації'filter/box-shadow'на сотнях елементів.
Один величезний JS-бандл> 1-2 МБ на критичний шлях.
«Спінер в порожнечі» більше 1-2 с без прогресу/скелетону.
Читання/запис layout в одному тику (layout thrashing).
Hover-only функції на мобільних.

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-чек-лист швидкості

Відгук

• Клік/тап → візуальний відгук ≤ 100 мс; введення → відлуння ≤ 50 мс.
• Немає 300 мс-затримки на мобільних.
• INP p75 ≤ 200 мс; частка Long Tasks ≤ 5%.

Завантаження

• TTFB ≤ 200 мс; LCP ≤ 2. 5 с; CLS ≤ 0. 1.
• Скелетони/прогрес замість «висять» спінерів.

Рендер

• Тільки'transform/opacity'в анімаціях; немає «важких» тіней на масивах.
• content-visibility/віртуалізація для довгих списків.

Мережа

• Edge-кеш, preconnect, префетч за наміром.
• Ідемпотентність і ретраї для критичних дій.

A11y

• 'prefers-reduced-motion'підтриманий.
• Hover-контент доступний за фокусом/клавіатурою.

16) Документація для дизайн-системи

«Latency Budgets»: таблиця порогів (tap, hover, modal, toast, форма).
«Instant Feedback»: патерни оптимістичних дій + відкат.
«Prefetch by Intent»: гайд та утиліти.
«Performance Playbook»: чек-листи профілювання та RUM-алерти.
«Do/Don’t»: приклади швидких/повільних сценаріїв з цифрами.

Коротке резюме

Швидкість взаємодії - це миттєвий відгук + передбачувана доставка результату. Тримайте 100 мс як священний бюджет для first-feedback, оптимізуйте мережу (Edge/кеш/префетч), розвантажуйте головний потік, анімуйте тільки дешеві властивості і застосовуйте оптимістичні патерни. Тоді інтерфейс відчувається живим, зрозумілим і стійким - особливо в сценаріях iGaming з високими ставками і реальним часом.