Taxa de interação e latency UI

1) O que é a velocidade da interface

1. Input latency - de um gesto a um gestor de evento.

2. Rede latency - até a resposta do backend/cajá.

3. Render latency - processamento em fluxo principal (JS/CSS/layout/paint).

4. Animation latency - fluidez e estabilidade de quadros.

Alvo: o usuário vê instantaneamente que a ação começou e para onde o processo se move; o resultado real vem previsível.

2) Liminares da percepção humana

≤ 50 ms - «relâmpago» (eco de impressão, tecla pressionada).
100 ms - Instantaneamente (clique resposta visual).
200 ms para a maioria das reações UI.
≤ 1000 ms - tolerável em progressos evidentes/esqueleton.

3) Modelo RAIL e orçamentos de destino

R (Response): resposta de entrada

Clique/tap → resposta visual ≤ 100 ms.
Foco/hover → ≤ 80-120 ms.

A (Animal): fluidez

60 FPS ⇒ quadro 16. 7 ms; operações pesadas para fora do quadro.
Só animamos 'transform '/' opacity'.

I (Idle): tarefas de fundo

Dividimos em slots 50 ms, usamos as janelas idle.

L (Load): download

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

4) KPI e alertas de velocidade

INP (Interation to Next Paint): p75 <200 ms (bom), 200-500 (a melhorar).
Long Tasks (> 50 ms): participação de quadros com LT <5%.
TTFB p75 <200 ms (kesh/Edge), LCP p75 <2. 5 s.
First User Feedback (FUF): até a primeira confirmação visual ≤ 100 ms.
Time-to-Usable para formulários: ≤ 1 c antes da entrada do primeiro campo.

5) Pattern UX de resposta instantânea

1. Atualizações otimistas: Alterando a UI imediatamente (saldo/taxa/like), revertendo com erro.
2. Esqueletos em vez de spinner, se a estrutura é conhecida.
3. Progressão/etapa: Progressão definida, se for conhecido o comprimento do processo.
4. Dicas locais: brinde instantâneo/state «Envio»... ≤ 100 ms.
5. O pré-teste de intenção é hover/visibilidade → 'prefetch '/' preteload'.

6) Técnicas de redução de atrasos

6. 1 Input → Render

Retire 300 ms delay em celulares: '<meta name = "viewport" conteúdo = "width = device-width, inicial-scale = 1"> ".
Ouvintes passive para scroll/tac: 'addEventListener (' touchstart ', handler, <passive: true f.)'.
O click é processado em microalgas ou 'requestAnimationFrame' para a confirmação rápida.
Evite layout-thrash: ler/escrever layout - bater.

6. 2 JS e fluxo principal

Separe os bandles (código-splitting) e carregue-os nas rotas.
Computação pesada → Web Worker.
Use 'scheduler. postTask '/' requestIdleCallback 'para tarefas de fundo.
CSS crítico - inline; JS с `defer`/`async`.
Virtualização das listas, 'conteúdo-visibilidade: auto', 'contain: conteúdo'.

6. 3 Render e animações

Anime 'transform/opacity'; não animem 'height/left/box-shadow' em centenas de itens.
Colocar temporariamente antes da animação; Limpar depois.
Spright/vetor em vez de PNG enorme; evite o heavy blur.

6. 4 Rede e kesh

Edge-кеш (CDN), `cache-control`, `stale-while-revalidate`.
O Precinect para domínios críticos; Early Hints (103), HTTP/2/3.
Prefetch de intenção (hover/viewport).
Streaming/SSR + hidração progressiva/ilhas.

7) Debauns/trottling e filas

Debouns - para pesquisar durante a digitação (150-300 ms).
Trottling - para scroll/resize (100-200 ms).
Filas/batching de atualizações UI em eventos frequentes (dados ao vivo).

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) Pattern download e feedback

O Skeleton (sem alterações, alturas fixas).
Shimmer 1200-1600 ms, amplitude ≤ 20%.
Cartão otimista: suporte cinzento + texto - Substituir quando os dados chegarem.
Erro: barra retry-banner, chaves idempotency para repetições.

9) Estratégias de rede para uma resposta rápida

• confirmação da UI imediatamente (otimista), backend - idempotent;
• durante o tempo (3-5 c), a exibição do status «recebeu, processando» + retais de fundo;
• WebSocket/SSE para estatais, backoff 1-2-4-8 s.

Pré-dados: dinheiro warm-up programado, prefetch rotas populares.

Edge funções: validação/agregação mais perto do usuário.

10) Código-snippets UI rápido

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) Diagnóstico e monitorização

Campo: RUM (métricas de campo) p75 por país/rede/dispositivo.
Traçado do clique: 'input → handler → network → paint'.
Marcador de «zonas vermelhas»: Longo Task marcadores, blocking-time, Slow-road list.
Alertas de degradação INP/LCP/TTFB.
Testes de cenário: gravação do tempo de referência clique → alteração DOM.

12) Especificidades iGaming

• UI: a fixação instantânea do estado do botão (pressed → busy) e o tomo brinde «Aceito».
• Backend: chave idempotent à taxa; status - através de WebSocket; timeout → «pending» transparente.
• Orçamento UI: FUF ≤ 100 ms, confirmação final ≤ 1 c (se for mais longo - apresentando o tempo/causa).

• Aceleração de 200 ms, rotação uniforme, afundamento de 300-500 ms; sem ciclos infinitos.
• As barras de ganho são sem versos, texto/soma são lidos (AAA).

• Delta patchi a cada 250-1000 ms, batching;
• diff visual (seta/cor/espessura) sem saltos layout;
• atualizações anti-drible em hover/focus.

• Acréscimo da conta com batches de 40-60 ms, números de tabela;
• chapéu sticky, virtualização de linhas.

13) Anti-pattern

Não há resposta instantânea ao clique (à espera da rede).
Animações pesadas 'filter/box-shadow' em centenas de itens.
Um enorme JS-bandl> 1-2 MB para um caminho crítico.
«Spinner no vazio» mais de 1-2 c sem progresso/skeleton.
Ler/gravar layout em uma única tecla (layout thrashing).
Funções hover-only no celular.

14) Tokens de velocidade (sistema de design)

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-folha de velocidade

Resposta

• Clique/tap → resposta visual ≤ 100 ms; digitar → ecos ≤ 50 ms.
• Não há 300 ms de atraso no celular.
• INP p75 ≤ 200 ms; Long Tasks ≤ 5%.

Carregar

• TTFB ≤ 200 ms; LCP ≤ 2. 5 c; CLS ≤ 0. 1.
• Esqueletos/progresso em vez de spinners «pendurados».

Render

• Somente 'trans/opacity' nas animações; não há sombras pesadas nas matrizes.
• conteúdo-visibilidade/virtualização para listas longas.

Rede

• Edge-kesh, preconnect, prefetch de intenção.
• Idempotidade e retais para ações críticas.

A11y

• 'preferers-reduced-motion' está suportado.
• Conteúdo hover disponível por foco/teclado.

16) Documentação para o sistema de design

«Latency Budets»: tabela de liminares (tap, hover, modal, toast, forma).
«Time Feedback»: pattern de ação otimista + retrocesso.
«Prefetch by Intent»: hyde e utilidades.
Performance Playbook: folhas de perfil de cheque e alertas RUM.
«Do/Don 't»: exemplos de cenários rápidos/lentos com números.

Resumo curto

A taxa de interação é uma resposta instantânea, e a entrega de resultados é previsível. Mantenha 100 ms como um orçamento sagrado para first-feedback, otimize a rede (Edge/kesh/prefetch), descarregue o fluxo principal, anime apenas propriedades baratas e aplique patters otimistas. A interface é então sentida viva, compreensível e sustentável - especialmente em cenários com taxas elevadas e tempo real.