Migliora l'Interaction to Next Paint eliminando lo scrolling JavaScript
Crea un'esperienza di smooth scrolling piacevole che non influisce sui Core Web Vitals
Sostituisci lo scrolling JavaScript con CSS oggi
Questo blog ha un po' di storia alle spalle. Fino al 2017 l'unico modo per aggiungere un comportamento di smooth scrolling consistente era utilizzare una libreria JavaScript. E molti sviluppatori facevano proprio così. I Core Web Vitals non esistevano ancora e tutti usavano jQuery come libreria JavaScript principale.
Ora facciamo un salto avanti fino ai giorni nostri. Esistono alternative molto migliori, più veloci e più semplici allo scrolling basato su JavaScript. Tuttavia, come consulente Core Web Vitals, li vedo ancora ogni giorno.
Perché lo scrolling basato su JavaScript è 'negativo'
Lo scrolling basato su JavaScript è negativo per 2 motivi: è complicato ed è lento.
Complicato: Lo scrolling basato su JavaScript è inutilmente complicato. Devi scrivere e mantenere codice difficile da leggere e anche se il metodo Window.scrollTo() ha reso questo codice molto più semplice, è comunque molto più difficile da mantenere.
Lento. JavaScript tende a bloccare il thread principale ed è sempre più lento della sua controparte CSS. A seconda di come è stata implementata la funzione di scroll, può bloccare il thread principale per un periodo considerevole e causare un ritardo significativo nella metrica Interaction to Next Paint!
Perché il CSS Smooth Scrolling è 'positivo'
html{ scroll-behavior: smooth;}Semplice ed efficace
La riga CSS html { scroll-behavior: smooth; } è semplicissima da implementare e più efficiente delle soluzioni basate su JavaScript. Questa singola riga di codice abilita il smooth scrolling per l'intera pagina senza alcuna funzione JavaScript difficile da mantenere.
Prestazioni migliori
Il smooth scrolling basato su CSS è gestito nativamente dal browser e in tutti i casi supera le implementazioni JavaScript. Questo è particolarmente importante per ottimizzare la metrica Interaction to Next Paint (INP), poiché sarà meno gravoso per il thread principale del browser.
Compatibilità con i browser
Il CSS smooth scrolling ha un ottimo supporto da parte dei browser. I browser più vecchi, dove il smooth scrolling non è supportato, ricadono semplicemente sul salto diretto predefinito all'ancora.
Personalizzazione semplice
CSS ti permette di personalizzare facilmente il comportamento di scroll. Ad esempio, la proprietà scroll-margin-top ti consente di impostare la distanza superiore rispetto all'elemento verso cui si scorre:
h1, h2, h3 {scroll-margin-top: 5rem;} O ancora più semplice con la pseudo classe 'target'
:target {scroll-margin-top: 5rem;} Esempio completo:
Per vedere questo codice in azione, fai semplicemente clic sull'Indice in cima a questa pagina. Noterai un piacevole smooth scroll verso l'ancora cliccata.
Ecco un esempio semplificato da copiare e riutilizzare
<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>
The RUM tool I built for my own clients.
CoreDash is what I use to audit enterprise platforms. Under 1KB tracking script, EU hosted, no consent banner. AI with MCP support built in. The same tool, available to everyone.
Create Free Account
