Analytics de Movimento

O que Analytics de Movimento faz?

A qualidade do movimento é mensurável. "Parece suave" e "parece próximo da referência" são afirmações; esta skill as transforma em números que você pode repetir na próxima semana.

Duas tarefas:

1. Desempenho: quanto tempo cada quadro leva, quão pesada é a página e como ela se adapta quando o dispositivo está lento. Guia: references/performance.md. Ferramenta: scripts/frame-meter.js.
2. Avaliação de referência: quão próxima uma página está de uma referência ou de seu próprio alvo de design, julgado de forma justa. Guia: references/reference-grading.md. Ferramenta: scripts/compare-sheet.mjs.

Início rápido

Medir tempo de quadro em qualquer página

Insira o medidor e abra a página com ?meter:

<script src="frame-meter.js" defer></script>

Um pequeno visor mostra p50, p95 e um nível de qualidade sugerido, e o console registra um resumo a cada cinco segundos. Pelo console você também pode executar:

frameMeter.start();          // iniciar uma medição limpa
// ...role pela página, use a interação principal...
frameMeter.report();         // { frames, p50, p95, p99, max, fps, longFrames, jank, suggest }

Meça no dispositivo mais lento que você se importa, não na sua estação de trabalho. Role toda a página e use a interação principal durante a medição, porque quadros ociosos escondem os momentos caros.

Construir uma folha lado a lado

node scripts/compare-sheet.mjs ./shots/nossas ./shots/referencia ./comparar --labels "Nossas,Referência"

Emparelha imagens com o mesmo nome de arquivo, escreve compare.html (sempre) e compare.png (quando sharp estiver instalado). Entregue a folha para os avaliadores conforme descrito no guia de avaliação.

Os números que importam

Medida	Alvo	Porquê
Tempo de quadro p95	16,7 ms ou menos no dispositivo alvo (60 Hz)	p95 é o que as pessoas sentem; a mediana esconde travamentos
Tempo de quadro p50	Bem abaixo de p95	Uma grande diferença significa picos: uploads, GC, compilação de shaders
Quadros longos (acima de 50 ms)	0 durante a rolagem	Cada um é um soluço visível
Peso da página na primeira tela	Abaixo de 3 MB	Primeira impressão em dados móveis
Página inteira	Abaixo de 10 MB	Tempo de carregamento, custo de dados, bateria
Maior Pintura com Conteúdo	Abaixo de 2,5 s	Mostrar uma imagem composta antes de ativos pesados chegarem
Mudança Cumulativa de Layout	Abaixo de 0,1	Caixas de canvas e vídeo devem reservar seu espaço
Interação à Próxima Pintura	Abaixo de 200 ms	Loops de renderização pesados não devem bloquear a entrada

Detalhes, orçamentos por tipo de ativo e uma escada de qualidade funcional estão em references/performance.md.

Fluxo de trabalho

1. Linha de base. Carregue a página com ?meter, role de cima a baixo duas vezes, use a interação principal, depois leia frameMeter.report(). Anote dispositivo, navegador, viewport e os números.
2. Encontre a seção cara. Repita por seção com frameMeter.start() na seção e report() após ela. O pior p95 é onde trabalhar.
3. Corrija a causa. Geralmente uma de: proporção de pixel do dispositivo muito alta, passe de pós-processamento em resolução total, muitas chamadas de desenho, uma textura enviada no meio da rolagem, um shader compilado na primeira visualização ou renderização enquanto oculta. Veja a tabela de correções no guia de desempenho.
4. Adicione a escada. Mesmo uma página rápida precisa de um caminho para baixo em um telefone fraco. Use o trecho de escada contínua: desça acima de 22 ms p95, suba abaixo de 12 ms.
5. Meça novamente da mesma forma. Mesmo dispositivo, mesmo caminho, mesma duração. Relate antes e depois.
6. Avalie contra o alvo. Quando a página recria um design ou um visual de referência, construa folhas de quatro momentos e execute o método de três avaliadores em references/reference-grading.md.

Formato do relatório

Página: <nome>   Dispositivo: <modelo, navegador>   Viewport: <larg x alt, DPR>
Caminho: rolagem completa x2 + interação principal, 60 s
Antes: p50 9,8 ms, p95 31,2 ms, quadros longos 6, peso 14,1 MB
Depois: p50 7,1 ms, p95 15,9 ms, quadros longos 0, peso 8,7 MB
Mudanças: limite de DPR 1,5 em telefones, bloom com meia resolução, texturas hero para WebP 2048, shaders pré-compilados no carregador
Escada: níveis 0 a 3, estabiliza no nível 3 no desktop, nível 2 no telefone de teste

Regras

• Relate p95, não FPS médio. Uma média de 58 fps pode esconder um travamento a cada segundo.
• Uma classe de dispositivo por número. Nunca misture uma medição de laptop com uma medição de telefone em uma afirmação.
• Mesmo caminho sempre. Medições só são comparáveis quando o caminho de rolagem, a interação e a duração são iguais.
• Meça a carga fria também. A primeira visualização compila shaders e envia texturas. É aí que os quadros longos vivem.
• Avalie com evidência. Um veredito "próximo" precisa de folhas em momentos correspondentes e avaliadores que não construíram a página.

Relacionados

• Rubrica de revisão e verificações de QA bloqueantes: ../motion-review/SKILL.md.
• Fluxo de trabalho de criação e biblioteca de técnicas: ../motioncraft-builder/SKILL.md.