Listeners de eventos passivos

A Silktide carrega suas páginas em um navegador real e procura scripts que escutam eventos de toque e da roda do mouse de uma forma que pode atrasar a rolagem. Marcar esses listeners como passivos permite que o navegador role a página imediatamente.

Quando um script escuta eventos de toque ou da roda do mouse, o navegador precisa aguardar a execução desse script antes de rolar a página, caso o script cancele a rolagem. Em páginas ocupadas, isso faz a rolagem travar ou apresentar atrasos — um dos tipos de instabilidade mais perceptíveis, especialmente em celulares.

Por que isso é importante

Rolar a página é a ação mais comum que os visitantes realizam em uma página, e as pessoas percebem imediatamente quando a rolagem não é suave. Uma página que hesita ou treme sob o dedo parece estar com defeito, mesmo quando tudo nela funciona, e essa impressão é ainda mais forte em dispositivos móveis, onde a rolagem por toque é constante.

Como corrigir

Marque os listeners de toque e da roda do mouse como passivos. Isso garante ao navegador que eles nunca cancelarão a rolagem:

// Bloqueia a rolagem até que o handler seja executado
document.addEventListener('touchstart', onTouchStart);

// Passivo: o navegador rola a página imediatamente
document.addEventListener('touchstart', onTouchStart, { passive: true });

Adicione { passive: true } aos seus próprios listeners de touchstart, touchmove, wheel e mousewheel, a menos que um listener realmente chame preventDefault() para interromper a rolagem.
Para listeners informados dentro de scripts de terceiros, verifique se há uma versão atualizada da biblioteca ou entre em contato com o fornecedor — consulte código de terceiros.

Todos os navegadores modernos são compatíveis com listeners passivos; apenas navegadores muito antigos precisam de detecção de recursos.

Como a Silktide verifica isso

Carrega a página em um navegador real e encontra listeners de eventos de toque e da roda do mouse que não estão marcados como passivos e podem atrasar a rolagem.
Informa o script que contém cada listener desse tipo, com a linha em que ele é registrado.

Solução de problemas

Meu listener precisa cancelar a rolagem

Um listener que realmente chama preventDefault() para interromper a rolagem não pode ser passivo — marcá-lo como passivo faz o navegador ignorar a chamada a preventDefault(). Se um listener informado realmente precisar cancelar a rolagem, deixá-lo não passivo é o correto; considere restringir o local onde ele é associado para que não afete a rolagem em outras partes da página.