La maggior parte delle scroll animation rallenta il sito, e le versioni più economiche sono quelle che costano di più in termini di prestazioni. Scrollytelling, plugin parallax ed effetti fade-in-on-scroll aggiunti a posteriori sono la causa più comune per cui un sito dall'aspetto curato non supera i Core Web Vitals.
I dati di campo di Google sono inequivocabili. Ogni secondo aggiuntivo di caricamento riduce le conversioni di circa il 7%, e un caricamento mobile di 3 secondi fa perdere circa il 53% dei visitatori prima che vedano anche solo i contenuti.
Il movimento è stato aggiunto per una ragione: il sito sembrava piatto, un template prometteva un effetto premium, oppure la homepage di un concorrente scorreva come un video. Questo articolo mostra quali effetti di scroll penalizzano le prestazioni, il lavoro preciso che il browser svolge per ciascuno di essi, e le decisioni ingegneristiche che mantengono il movimento fluido e veloce.
- Le scroll animation economiche sono una tassa sulle prestazioni. Lo scroll-jacking e le proprietà di layout animate costringono il browser a ricalcolare la pagina a ogni fotogramma.
- INP e CLS ne risentono direttamente. Gli scroll handler pesanti ritardano la risposta della pagina ai tocchi, mentre il movimento tardivo sposta il layout sotto gli occhi del lettore.
- Alcune proprietà sono gratuite, la maggior parte non lo è. Animare opacity, translate, scale e rotate rimane sul GPU. Animare width, height, top o margin attiva un lavoro di layout completo.
- Il buon movimento è una decisione ingegneristica. Proprietà solo compositor, IntersectionObserver, passive listener e un fallback per reduced-motion mantengono gli effetti veloci.
- Un ingegnere vero lo misura. INP e CLS da dati di campo, più un test su un telefono Android di fascia media, indicano se l'animazione sta aiutando o costando vendite.
Cosa Fa alla Pagina una Scroll Animation Economica
Le scroll animation economiche arrivano solitamente come plugin o snippet copiati. Collegano un handler all'evento scroll ed eseguono JavaScript a ogni fotogramma in cui l'utente scorre.
Quell'handler spesso legge valori di layout e scrive nuovi stili nello stesso fotogramma, costringendo il browser a ricalcolare la geometria della pagina continuamente. Ogni libreria parallax o animate-on-scroll porta con sé il proprio codice, spesso tra 30KB e 150KB che il browser deve analizzare prima che qualcosa si muova.
Su un laptop veloce il costo si nasconde. Su un telefono Android di fascia media, dove si trova gran parte del traffico reale, la pagina si inceppa e lo scorrimento risulta pesante.
Per questo motivo webvise costruisce landing page e siti di lancio con un budget prestazionale definito dal primo commit. Il movimento diventa uno strato deliberato, misurato rispetto ai Core Web Vitals, anziché qualcosa aggiunto alla fine.
I Core Web Vitals che Vengono Compromessi
Google valuta la velocità della pagina su tre metriche, e le scroll animation possono danneggiarle tutte e tre.
| Metrica | Punteggio ottimale | Come la scroll animation la penalizza |
|---|---|---|
| INP (Interaction to Next Paint) | sotto 200ms | Gli scroll handler eseguono task lunghi sul main thread, facendo attendere tocchi e clic |
| CLS (Cumulative Layout Shift) | sotto 0,1 | Elementi che animano in ritardo, o che animano width e height, spostano i contenuti |
| LCP (Largest Contentful Paint) | sotto 2,5s | Le librerie di animazione si caricano presto e competono per la banda con l'immagine hero e i font |
INP ha sostituito FID come Core Web Vital a marzo 2024, ed è la metrica che le scroll animation penalizzano di più. INP misura la rapidità con cui una pagina risponde dopo un tocco o un clic. Uno scroll handler che esegue lavoro di layout blocca quella risposta e porta il punteggio oltre i 200ms.
Cosa si Può Animare Gratuitamente, e Cosa No
I browser eseguono il rendering in fasi: layout, poi paint, poi composite. La fase che una proprietà tocca determina quanto è costoso animarla.
| Animare questo | Fase del browser | Costo per fotogramma |
|---|---|---|
| opacity | Solo composite | Economico, gestito dal GPU |
| translate, scale, rotate | Solo composite | Economico, gestito dal GPU |
| width, height, top, left, margin | Layout completo | Costoso, ricalcola la pagina |
| box-shadow, filter, background | Paint | Moderato, ridipinge aree estese |
La regola alla base di ogni sito fluido è semplice. Si animano opacity e le proprietà di posizione translate, scale e rotate, perché il GPU le gestisce senza toccare il layout. Gli effetti economici ricorrono a width, height e top, il che forza un ricalcolo del layout a ogni singolo fotogramma.
Perché lo Scrollytelling è una Trappola per le Prestazioni
Lo scrollytelling dirottа la scrollbar per pilotare una timeline di animazione. La pagina smette di scorrere alla sua velocità naturale e inizia a riprodurre una sequenza controllata dallo sviluppatore.
Questo crea tre problemi. Lo scorrimento personalizzato risulta innaturale sul trackpad e ancora peggio sul telefono, dove ci si aspetta che il pollice muova la pagina direttamente. I lettori di schermo e gli utenti da tastiera perdono l'ordine di lettura normale. Ogni fotogramma di scroll esegue JavaScript, che è esattamente il lavoro sul main thread che danneggia l'INP.
Lo scrollytelling guadagna il suo posto in casi rari: un articolo di dati su una testata giornalistica, una presentazione di prodotto in cui la scena conta più della velocità, una campagna di brand con un vero budget per il movimento. Per una landing page che esiste per raccogliere richieste, il costo quasi sempre supera il beneficio.
Cosa Costa Davvero il Buon Movimento
Il movimento fluido nasce da un elenco breve di decisioni, ognuna delle quali richiede un ingegnere che conosce il browser.
- Animare solo le proprietà compositor. Attenersi a opacity, translate, scale e rotate in modo che il GPU faccia il lavoro e il main thread rimanga libero.
- Attivare sulla visibilità, non sulla posizione di scroll. IntersectionObserver si attiva una sola volta quando un elemento entra nel viewport, invece di eseguire codice a ogni fotogramma di scroll.
- Mantenere i listener passivi. Un passive scroll listener indica al browser che non bloccherà lo scorrimento, proteggendo il punteggio INP.
- Rispettare i budget di timing. Le micro-interazioni durano da 120ms a 250ms, le entrate da 500ms a 800ms, le coreografie più grandi da 800ms a 1500ms. Oltre queste soglie, tutto sembra rotto.
- Includere un fallback per reduced-motion. Rispettare prefers-reduced-motion garantisce una versione senza movimento a chi soffre di cinetosi e agli strumenti di verifica dell'accessibilità.
- Caricare il codice di animazione come un'isola. Un componente client-only che si pulisce alla navigazione mantiene il JavaScript delle animazioni fuori dal primo paint.
Un page builder nasconde ognuna di queste scelte. Un tool drag-and-drop consegna l'effetto e il costo prestazionale in un solo clic, senza alcun controllo sulla proprietà animata né sul JavaScript caricato. Un ingegnere sceglie la proprietà, il trigger e il timing con cognizione di causa, poi verifica il risultato.
Il beneficio si traduce in denaro reale. Le pagine più veloci convertono meglio, e la matematica delle conversioni è sviluppata in come la velocità del sito influisce sulle conversioni. Il movimento che rispetta quella matematica aggiunge cura e non consuma nulla della velocità.
Un Audit in 6 Punti per il Proprio Sito
È possibile verificare il proprio sito in circa 10 minuti. Per una versione completa, si consulti la checklist di audit del sito web. Si seguano questi passaggi nell'ordine indicato.
- Aprire PageSpeed Insights e leggere INP e CLS da dati di campo, non solo il punteggio di laboratorio. I dati di campo riflettono i telefoni reali.
- Registrare una traccia Performance in Chrome DevTools durante lo scroll. I task rossi lunghi sul main thread indicano che gli scroll handler stanno lavorando troppo.
- Osservare il conteggio dei layout shift durante il caricamento della pagina. Qualsiasi elemento che anima in ritardo è un rischio per il CLS.
- Controllare il bundle JavaScript alla ricerca di librerie di animazione. Una singola libreria di scroll oltre i 40KB merita una valutazione attenta.
- Attivare e disattivare prefers-reduced-motion nel pannello di rendering di Chrome DevTools. Se la pagina si rompe o appare vuota, il movimento non era mai facoltativo.
- Testare su un vero Android di fascia media, non sul laptop. È il telefono il luogo in cui vive il jank.
Le animazioni dovrebbero far sembrare la pagina curata, senza costare nulla in velocità. Quell'equilibrio nasce dalla scelta della proprietà giusta, del trigger giusto e del timing giusto, misurati poi su un telefono reale. webvise costruisce siti di lancio e landing page in cui il movimento è ingegnerizzato rispetto ai Core Web Vitals fin dal primo giorno. Se il sito ha un bell'aspetto ma punteggi bassi, si descriva cosa si sta costruendo e si vedrà dove il movimento sta costando conversioni.