Melhore o Interaction to Next Paint eliminando o scrolling com JavaScript
Crie uma experiência de smooth scrolling bonita que não afeta os Core Web Vitals
Substitua o scrolling com JavaScript por CSS hoje
Este blog tem um pouco de história. Até 2017, a única maneira de adicionar um comportamento consistente de smooth scrolling era usar uma biblioteca JavaScript. E muitos desenvolvedores fizeram exatamente isso. Os Core Web Vitals ainda não existiam e todos usavam jQuery como sua principal biblioteca JavaScript.
Agora avance para os dias atuais. Existem alternativas muito melhores, mais rápidas e mais fáceis ao scrolling de âncoras baseado em JavaScript. No entanto, como consultor de Core Web Vitals, ainda os vejo todos os dias.
Por que o scrolling baseado em JavaScript é 'ruim'
O scrolling baseado em JavaScript é ruim por 2 razões: é complicado e é lento.
Complicado: O scrolling baseado em JavaScript é desnecessariamente complicado. Você precisa escrever e manter código difícil de ler e, embora o método Window.scrollTo() tenha tornado esse código muito mais fácil, ainda é muito mais difícil de manter.
Lento. JavaScript tende a bloquear a main thread e é sempre mais lento que sua contraparte CSS. Dependendo de como a função de scroll foi implementada, ela pode bloquear a main thread por bastante tempo e causar um grande atraso na métrica Interaction to Next Paint!
Por que o CSS Smooth Scrolling é 'bom'
html{ scroll-behavior: smooth;}Simples e eficaz
A linha única de CSS html { scroll-behavior: smooth; } é super simples de implementar e mais eficiente que soluções baseadas em JavaScript. Esta única linha de código habilita smooth scrolling para toda a página sem quaisquer funções JavaScript difíceis de manter.
Melhor Performance
O smooth scrolling baseado em CSS é tratado nativamente pelo navegador e em todos os casos superará implementações JavaScript. Isso é especialmente importante para otimizar a métrica Interaction to Next Paint (INP), pois será menos um fardo na main thread do navegador.
Compatibilidade com Navegadores
O CSS smooth scrolling tem um suporte de navegadores bastante bom. Navegadores antigos, onde o smooth scrolling não é suportado, simplesmente fazem fallback para o salto direto padrão para a âncora.
Personalização Fácil
CSS permite personalizar facilmente o comportamento de scroll. Por exemplo, a propriedade scroll-margin-top permite definir a distância superior até o elemento alvo do scroll:
h1, h2, h3 {scroll-margin-top: 5rem;} Ou ainda mais fácil com a pseudo classe 'target'
:target {scroll-margin-top: 5rem;} Exemplo completo:
Para ver este código em ação, basta clicar no Índice no topo desta página. Você notará um smooth scroll agradável até a âncora clicada.
Aqui está um exemplo simplificado para você copiar e reutilizar
<html>
<head>
<title>Smooth scroll to target</title>
<style>
html {
scroll-behavior: smooth;
}
:target {
scroll-margin-top: 5rem;
}
.largedivider {
height: 1000px;
}
</style>
</head>
<body>
<nav>
<a href="#target">scroll to target</a>
</nav>
<div class="largedivider"> -- </div>
<h2 id="target">scroll to me</h2>
<div class="largedivider"> -- </div>
</body>
</html>Compare your segments.
Is iOS slower than Android? Is the checkout route failing INP? Filter by device, route, and connection type.
- Device filtering
- Route Analysis
- Connection Types
