Mejora la Interaction to Next Paint abandonando el desplazamiento con JavaScript
Crea una hermosa experiencia de desplazamiento suave que no afecte a las Core Web Vitals
Reemplaza el desplazamiento de JavaScript por CSS hoy
Este blog tiene un poco de historia. Hasta 2017, la única forma de agregar un comportamiento de desplazamiento suave consistente era usar una biblioteca de JavaScript. Y muchos desarrolladores hicieron exactamente eso. Las Core Web Vitals aún no existían y todos usaban jQuery como su biblioteca de JavaScript principal.
Ahora avancemos hasta el día de hoy. Hay alternativas mucho mejores, más rápidas y más fáciles al desplazamiento por anclaje basado en JavaScript. Sin embargo, como consultor de Core Web Vitals, todavía las veo todos los días.
Por qué el desplazamiento basado en JavaScript es 'malo'
El desplazamiento basado en JavaScript es malo por 2 razones: es complicado y es lento.
Complicado: El desplazamiento basado en JavaScript es innecesariamente complicado. Tienes que escribir y mantener código difícil de leer y, aunque el método Window.scrollTo() ha facilitado mucho este código, sigue siendo mucho más difícil de mantener.
Lento. JavaScript tiende a bloquear el hilo principal y siempre es más lento que su contraparte CSS. Dependiendo de cómo se implementó la función de desplazamiento, puede bloquear el hilo principal durante bastante tiempo y causar un retraso importante en la métrica Interaction to Next Paint!
Por qué el Desplazamiento Suave CSS es 'bueno'
html{ scroll-behavior: smooth;}Simple y efectivo
La línea única de CSS html { scroll-behavior: smooth; } es súper simple de implementar y más eficiente que las soluciones basadas en JavaScript. Esta sola línea de código habilita el desplazamiento suave para toda la página sin ninguna función de JavaScript difícil de mantener.
Mejor Rendimiento
El desplazamiento suave basado en CSS es manejado nativamente por el navegador y en todos los casos superará a las implementaciones de JavaScript. Esto es especialmente importante para optimizar la métrica Interaction to Next Paint (INP), ya que será una carga menor para el hilo principal del navegador.
Compatibilidad del Navegador
El desplazamiento suave CSS tiene un soporte de navegador bastante bueno. Los navegadores antiguos, donde el desplazamiento suave no es compatible, simplemente recurren al salto directo predeterminado al ancla.
Fácil Personalización
CSS te permite personalizar fácilmente el comportamiento de desplazamiento. Por ejemplo, la propiedad scroll-margin-top te permite establecer la distancia superior al elemento desplazado:
h1, h2, h3 {scroll-margin-top: 5rem;} O incluso más fácil con la pseudo clase 'target'
:target {scroll-margin-top: 5rem;} Ejemplo completo:
Para ver este código en acción, simplemente haz clic en la Tabla de Contenidos en la parte superior de esta página. Notarás un agradable desplazamiento suave hacia el ancla clicada.
Aquí tienes un ejemplo simplificado para que copies y reutilices
<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>Find out what is actually slow.
I map your critical rendering path using real field data. You get a clear answer on what blocks LCP, what causes INP spikes, and where layout shifts originate.
Book a Deep Dive
