Скорость взаимодействия и 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 в одном тикe (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 с высокими ставками и реальным временем.