Ottenere un punteggio di 100/100 su Lighthouse Performance è considerato da molti sviluppatori WordPress un”impresa impossibile, soprattutto se vuoi includere animazioni nel sito. Ma la realtà è diversa: puoi avere animazioni spettacolari e allo stesso tempo ottenere 100/100 Lighthouse. Il segreto è usare le giuste tecnologie nel modo giusto.
Perché 100 Lighthouse è importante
Un punteggio Lighthouse di 100 non è solo un vanto tecnico. Ha impatti concreti:
- SEO: Google premia i siti veloci con migliori posizionamenti
- Conversioni: ogni secondo di caricamento in meno aumenta le conversioni del 2-5%
- Esperienza utente: gli utenti abbandonano i siti che impiegano più di 3 secondi a caricare
- Accessibilità: siti veloci sono più accessibili su connessioni lente e dispositivi datati
Cosa fa perdere punti a Lighthouse
Ecco i fattori principali che abbassano il punteggio Lighthouse e come le animazioni JS contribuiscono al problema:
| Elemento | Impatto | Causa |
|---|---|---|
| Render-blocking resources | Alto | Script JS che bloccano il rendering della pagina |
| Main-thread work | Alto | Librerie di animazioni che occupano il thread principale |
| Total Blocking Time | Alto | JavaScript pesante che ritarda l”interattività |
| Largest Contentful Paint | Medio | Risorse JS che ritardano la visualizzazione del contenuto principale |
| Cumulative Layout Shift | Medio | Elementi che si spostano dopo essere stati renderizzati |
| JavaScript execution timing | Medio | Script eseguiti troppo presto o troppo tardi |
La soluzione: animazioni CSS scroll-driven
Le animazioni scroll-driven CSS risolvono tutti questi problemi contemporaneamente:
- Zero JavaScript: niente da scaricare, analizzare o eseguire
- Compositor thread: le animazioni CSS sono gestite dal browser su un thread separato
- Nessun layout shift: le animazioni sono dichiarative, non modificano il layout
- Predictable: il browser conosce in anticipo il risultato finale
Benchmark reale: con e senza librerie JS
Abbiamo testato tre versioni della stessa pagina WordPress:
| Versione | Performance | LCP | TBT | CLS | Peso JS |
|---|---|---|---|---|---|
| Senza animazioni | 100 | 1.1s | 0ms | 0.02 | 0KB |
| Con AOS | 82 | 1.9s | 110ms | 0.04 | 35KB |
| Con GSAP | 76 | 2.2s | 170ms | 0.05 | 50KB |
| Con CSS Scroll-Driven + Polyfill | 99-100* | 1.2s | 0ms* | 0.02 | 0KB* |
* Su browser moderni. Su browser legacy, il polyfill JS aggiunge ~2KB di script inline.
Checklist per 100 Lighthouse con animazioni incluse
1. Animazioni CSS niente JavaScript
Usa animation-timeline: view() per animazioni scroll-driven. È supportato da Chrome 115+, Edge 115+ e Opera 101+.
2. Polyfill progressivo JS (leggero, condizionale)
Usa un polyfill JS che si attiva SOLO se CSS.supports('animation-timeline', 'view()') è false. Il peso è minimo (~2KB) e non impatta i browser moderni.
3. content-visibility: auto per le sezioni sotto la piega
.sezione-sotto-la-piega {
content-visibility: auto;
contain-intrinsic-size: 600px;
}Questa proprietà dice al browser di non renderizzare gli elementi fuori dallo schermo fino a quando l”utente non sta per vederli.
4. Lazy loading per immagini
<img src="foto.jpg" loading="lazy" width="800" height="600" alt="..." />Specifica sempre width e height per evitare layout shift, e usa loading="lazy" per immagini non critiche.
5. WebP e AVIF per immagini
Usa formati moderni: WebP riduce il peso del 30-50% rispetto a JPEG, AVIF fino al 60% rispetto a JPEG.
6. Font preload e display: swap
@font-face {
font-family: 'MioFont';
src: url('miofont.woff2') format('woff2');
font-display: swap;
}7. Elimina CSS e JS inutilizzati
Usa strumenti come PurgeCSS per eliminare il codice non utilizzato. Nel caso dei framework CSS, carica solo i componenti che usi effettivamente.
8. Preconnect per risorse di terze parti
<link rel="preconnect" href="https://fonts.googleapis.com" />9. Server con buon TTFB
Scegli un hosting WordPress ottimizzato e usa una CDN per distribuire i contenuti statici.
Risultati con ClassyBlocks Pro
Test effettuati con WordPress 6.8, tema Blocksy, 151 animazioni attive:
- Lighthouse Performance: 100/100
- LCP: 1.2s
- TBT: 0ms
- CLS: 0.02
- JS aggiuntivo (browser moderni): 0KB
- JS aggiuntivo (browser legacy): ~2KB (polyfill)
