Teste de Suavidade do Scroll – Meça o Jank do Deslocamento

Este teste de suavidade do scroll mede o tipo de movimento com que se depara mais do que qualquer outro: uma página ou lista a mover-se sob o seu dedo ou roda do rato. É no scroll que o jank surge primeiro, porque acontece constantemente e os seus olhos estão treinados para o detetar. Uma página que engasga ao mover-se, um feed que salta quando lhe dá um toque, um documento que treme linha a linha — tudo isto se resume a saber se o navegador consegue entregar um novo fotograma em cada atualização enquanto o conteúdo está em movimento. Este teste faz scroll de uma faixa alta de linhas numeradas com um passo fixo por fotograma e conta os fotogramas que chegam atrasados.

Como as linhas apresentam números claros e contornos nítidos, os seus olhos conseguem avaliar diretamente a suavidade, enquanto o medidor lhe atribui um valor. Isso permite-lhe comparar navegadores, extensões e máquinas com dados em vez de uma impressão vaga.

Como usar o teste de scroll

A faixa desloca-se por si só assim que a página carrega. Para a interpretar bem:

• Observe as linhas a mover-se. Um scroll suave parece um único deslize contínuo; o jank parece as linhas a saltar ou a hesitar à medida que passam.
• Siga o número de uma linha com os olhos à medida que sobe. Se deslizar de forma uniforme, o ritmo está bom; se der um solavanco, um fotograma chegou atrasado.
• Leia o medidor. O tempo de fotograma esperado é o seu intervalo normal entre fotogramas, o maior intervalo entre fotogramas é o atraso mais longo registado e os Janks contam cada fotograma atrasado.
• Experimente em ecrã inteiro e ajuste a velocidade para corresponder à forma como costuma fazer scroll — uma leitura tranquila ou um toque rápido.

Utilize Repor medidor para iniciar uma nova contagem. Deixar o teste a correr durante trinta segundos dá uma imagem mais fiel do que uma vista de olhos rápida, porque os engasgos de fundo vêm e vão.

Porque é que o scroll estremece

Um scroll suave exige que o navegador produza um novo fotograma em cada atualização — a cada 16.7 milissegundos a 60 Hz, a cada 8.3 a 120 Hz — enquanto também executa a página. Quando algo atrasa esse trabalho, um fotograma é perdido e o scroll dá um salto. Os culpados habituais são específicos e resolúveis.

Páginas e scripts pesados

Imagens grandes, disposições complexas e scripts ocupados tornam cada fotograma do scroll dispendioso de desenhar. As páginas que executam código a cada evento de scroll são especialmente propensas ao jank. Isto é uma propriedade tanto da página como da sua máquina, razão pela qual alguns sites fazem scroll de forma suave e outros não, no mesmo computador.

Extensões do navegador

As extensões de bloqueio de conteúdos, de compras e de acessibilidade inspecionam a página à medida que esta se move. Uma única extensão mal otimizada pode acrescentar trabalho suficiente por fotograma para causar estremecimento visível. Testar numa janela privada, onde a maioria das extensões está desativada, é uma forma rápida de verificar.

Composição e aceleração por hardware

Os navegadores tentam entregar o scroll à GPU para que se mantenha suave mesmo quando a página está ocupada. Quando a aceleração por hardware está desligada ou uma página força o trabalho de volta para a thread principal, o scroll recai no caminho mais lento e faz jank. Ligar a aceleração por hardware nas definições do navegador costuma ajudar.

Poupança de energia e carga de fundo

Como acontece com qualquer movimento, um portátil em poupança de bateria, um dispositivo quente a fazer throttling ou uma tarefa em segundo plano a roubar tempo de CPU farão todos com que os fotogramas cheguem atrasados. O teste de scroll reflete a mesma saúde do sistema que rege todos os outros tipos de movimento.

Como é um bom resultado

Um scroll saudável é uma taxa de fotogramas alta e estável, com uma contagem de jank próxima de zero e um maior intervalo entre fotogramas próximo do tempo de fotograma esperado. A tabela abaixo mostra o tempo de fotograma alvo para taxas de atualização comuns — o valor em torno do qual o teste deve rondar durante o scroll.

Uma taxa de atualização mais alta torna o scroll visivelmente mais suave, mas apenas se o navegador conseguir continuar a preencher esse orçamento mais apertado. Confirme a taxa de atualização a que está realmente a funcionar com o nosso guia da taxa de atualização e meça a sua taxa de fotogramas em bruto no teste principal de FPS.

Como tornar o scroll mais suave

• Ligue a aceleração por hardware nas definições do navegador para que o scroll corra na GPU.
• Desative as extensões pesadas uma de cada vez, ou teste numa janela privada, para encontrar o culpado.
• Feche a carga de fundo e mantenha o dispositivo fresco e ligado à corrente.
• Aumente a sua taxa de atualização se o seu ecrã a suportar e, depois, volte a testar para confirmar que o navegador acompanha.
• Atualize o navegador e os controladores gráficos, que muitas vezes trazem melhorias no compositor e no scroll.

Se o scroll está com jank aqui mas um jogo corre de forma suave, a causa costuma ser o navegador ou a página e não o seu hardware. Se o movimento está irregular em todo o lado, meça-o de forma isolada com o teste de stutter, que usa o mesmo medidor de tempo de fotograma sem o conteúdo do scroll.

Perguntas frequentes

O scroll é suave aqui mas tem jank nalguns sites. Porquê?

Porque a suavidade depende tanto da página como da sua máquina. Scripts pesados, imagens grandes e manipuladores de eventos de scroll tornam alguns sites dispendiosos de percorrer. Um resultado limpo aqui significa que o seu navegador e hardware são capazes; o site ocupado é o estrangulamento.

Uma taxa de atualização mais alta torna o scroll mais suave?

Sim, desde que o navegador consiga entregar um fotograma em cada atualização. Um ecrã de 120 Hz desliza de forma mais suave do que um de 60 Hz, mas apenas enquanto a página continuar a preencher o orçamento de fotograma mais curto. Se não conseguir, simplesmente vê o jank mais cedo.

Porque é que a mesma página faz scroll de forma diferente em dois navegadores?

Os navegadores diferem na forma como compõem e entregam o scroll à GPU, e na forma como as extensões se ligam à página. É comum um navegador fazer scroll de uma página de forma suave enquanto outro tem jank num hardware idêntico.

Isto é o mesmo que um teste de stutter?

Partilham o medidor de tempo de fotograma, mas este teste conduz conteúdo de scroll real através do compositor do navegador, que é o caso do dia a dia com que a maioria das pessoas se preocupa. O teste de stutter isola o ritmo de fotograma em bruto sem a camada de scroll.

Isto testa o meu monitor ou o meu navegador?

Sobretudo o seu navegador e a máquina em que corre. As linhas movem-se através do caminho de renderização e composição do navegador, pelo que um mau resultado costuma apontar para o navegador, uma extensão ou a carga do sistema, e não para o painel. O seu ecrã continua a definir o limite máximo — um ecrã de 60 Hz nunca poderá fazer scroll de forma tão suave como um de 120 Hz — mas, assumindo que a taxa de atualização é adequada, este teste está a avaliar o quão bem o software acompanha.

Definições de scroll suave e scroll de alta atualização

A maioria dos navegadores e sistemas operativos oferece uma opção de scroll suave que anima cada passo do deslocamento em vez de o fazer aos saltos. Torna o movimento mais suave à vista, mas não cria fotogramas que o navegador não consegue desenhar — se a página for pesada, o scroll suave limita-se a animar o jank. O ganho real vem de uma taxa de atualização alta combinada com uma página suficientemente leve para acompanhar. Num ecrã de 120 Hz, fazer scroll de uma página simples é visivelmente mais suave do que a 60 Hz, porque o dobro dos fotogramas descreve o mesmo movimento. Este teste permite-lhe confirmar que o seu navegador está genuinamente a entregar esses fotogramas em vez de deitar fora metade deles.

Scroll em telemóvel, trackpad e roda do rato

A forma como faz scroll altera o que sente. Uma roda do rato move-se em passos discretos, pelo que a suavidade depende do quão bem o navegador anima a transição entre eles. Um trackpad ou ecrã tátil faz scroll de forma contínua e é entregue ao compositor, que costuma ser o caminho mais suave — mas também o mais evidente quando um fotograma é deitado fora, porque o seu dedo cria uma expectativa que o ecrã tem de igualar. Os telemóveis e tablets são especialmente sensíveis aqui, uma vez que o scroll é a principal forma de percorrer tudo. Se uma página tiver jank sob o seu dedo mas não sob a roda do rato, o compositor está a ser forçado a esperar pela thread principal.

De que depende um scroll sem jank

Um scroll suave é uma cadeia, e o elo mais fraco define o resultado: a página tem de ser suficientemente leve para ser desenhada a tempo, o navegador tem de entregar o scroll à GPU, o sistema não pode estar ocupado ou a fazer throttling, e o ecrã tem de ter margem de atualização para mostrar os fotogramas. Este teste exercita toda a cadeia ao mesmo tempo. Quando o número é bom, todos os elos estão a aguentar; quando é mau, as secções acima ajudam a restringir qual o elo a examinar primeiro. Como o scroll é tão comum, pequenas melhorias compensam em todo o lado — uma atualização do navegador, uma extensão desativada ou uma mudança para a aceleração por hardware podem elevar um resultado com jank a um resultado limpo, e sentirá a diferença em todos os sites que visitar depois.

Testes de ecrã e movimento relacionados

O scroll é apenas uma fatia do dia a dia do desempenho de movimento. Continue com estas ferramentas complementares:

• Teste de Taxa de Fotogramas (teste de FPS) — meça a sua taxa de fotogramas e taxa de atualização em tempo real.
• Teste de Desfoque de Movimento — veja o quanto o seu ecrã esbate os detalhes em movimento.
• Teste de Salto de Fotogramas — verifique se o painel desenha todos os fotogramas.
• Teste de Screen Tearing — verifique se os fotogramas estão alinhados com a atualização.
• Teste de Stutter — meça a consistência do tempo de fotograma por software.