{"id":1174,"date":"2026-01-23T10:29:57","date_gmt":"2026-01-23T10:29:57","guid":{"rendered":"https:\/\/studioimmens.com\/100-lighthouse-performance-animazioni-css-wordpress\/"},"modified":"2026-07-16T17:02:51","modified_gmt":"2026-07-16T15:02:51","slug":"100-lighthouse-performance-animazioni-css-wordpress","status":"publish","type":"post","link":"https:\/\/studioimmens.com\/en\/100-lighthouse-performance-animazioni-css-wordpress\/","title":{"rendered":"100\/100 Lighthouse Performance con animazioni CSS in WordPress"},"content":{"rendered":"<p>Ottenere un punteggio di 100\/100 su Lighthouse Performance &egrave; considerato da molti sviluppatori WordPress un&#8221;impresa impossibile, soprattutto se vuoi includere animazioni nel sito. Ma la realt&agrave; &egrave; diversa: puoi avere animazioni spettacolari e allo stesso tempo ottenere 100\/100 Lighthouse. Il segreto &egrave; usare le giuste tecnologie nel modo giusto.<\/p>\n<h2>Perch&eacute; 100 Lighthouse &egrave; importante<\/h2>\n<p>Un punteggio Lighthouse di 100 non &egrave; solo un vanto tecnico. Ha impatti concreti:<\/p>\n<ul>\n<li><strong>SEO:<\/strong> Google premia i siti veloci con migliori posizionamenti<\/li>\n<li><strong>Conversioni:<\/strong> ogni secondo di caricamento in meno aumenta le conversioni del 2-5%<\/li>\n<li><strong>Esperienza utente:<\/strong> gli utenti abbandonano i siti che impiegano pi&ugrave; di 3 secondi a caricare<\/li>\n<li><strong>Accessibilit&agrave;:<\/strong> siti veloci sono pi&ugrave; accessibili su connessioni lente e dispositivi datati<\/li>\n<\/ul>\n<h2>Cosa fa perdere punti a Lighthouse<\/h2>\n<p>Ecco i fattori principali che abbassano il punteggio Lighthouse e come le animazioni JS contribuiscono al problema:<\/p>\n<table>\n<tr>\n<th>Elemento<\/th>\n<th>Impatto<\/th>\n<th>Causa<\/th>\n<\/tr>\n<tr>\n<td>Render-blocking resources<\/td>\n<td>Alto<\/td>\n<td>Script JS che bloccano il rendering della pagina<\/td>\n<\/tr>\n<tr>\n<td>Main-thread work<\/td>\n<td>Alto<\/td>\n<td>Librerie di animazioni che occupano il thread principale<\/td>\n<\/tr>\n<tr>\n<td>Total Blocking Time<\/td>\n<td>Alto<\/td>\n<td>JavaScript pesante che ritarda l&#8221;interattivit&agrave;<\/td>\n<\/tr>\n<tr>\n<td>Largest Contentful Paint<\/td>\n<td>Medio<\/td>\n<td>Risorse JS che ritardano la visualizzazione del contenuto principale<\/td>\n<\/tr>\n<tr>\n<td>Cumulative Layout Shift<\/td>\n<td>Medio<\/td>\n<td>Elementi che si spostano dopo essere stati renderizzati<\/td>\n<\/tr>\n<tr>\n<td>JavaScript execution timing<\/td>\n<td>Medio<\/td>\n<td>Script eseguiti troppo presto o troppo tardi<\/td>\n<\/tr>\n<\/table>\n<h2>La soluzione: animazioni CSS scroll-driven<\/h2>\n<p>Le animazioni scroll-driven CSS risolvono tutti questi problemi contemporaneamente:<\/p>\n<ul>\n<li><strong>Zero JavaScript:<\/strong> niente da scaricare, analizzare o eseguire<\/li>\n<li><strong>Compositor thread:<\/strong> le animazioni CSS sono gestite dal browser su un thread separato<\/li>\n<li><strong>Nessun layout shift:<\/strong> le animazioni sono dichiarative, non modificano il layout<\/li>\n<li><strong>Predictable:<\/strong> il browser conosce in anticipo il risultato finale<\/li>\n<\/ul>\n<h2>Benchmark reale: con e senza librerie JS<\/h2>\n<p>Abbiamo testato tre versioni della stessa pagina WordPress:<\/p>\n<table>\n<tr>\n<th>Versione<\/th>\n<th>Performance<\/th>\n<th>LCP<\/th>\n<th>TBT<\/th>\n<th>CLS<\/th>\n<th>Peso JS<\/th>\n<\/tr>\n<tr>\n<td>Senza animazioni<\/td>\n<td>100<\/td>\n<td>1.1s<\/td>\n<td>0ms<\/td>\n<td>0.02<\/td>\n<td>0KB<\/td>\n<\/tr>\n<tr>\n<td>Con AOS<\/td>\n<td>82<\/td>\n<td>1.9s<\/td>\n<td>110ms<\/td>\n<td>0.04<\/td>\n<td>35KB<\/td>\n<\/tr>\n<tr>\n<td>Con GSAP<\/td>\n<td>76<\/td>\n<td>2.2s<\/td>\n<td>170ms<\/td>\n<td>0.05<\/td>\n<td>50KB<\/td>\n<\/tr>\n<tr>\n<td>Con CSS Scroll-Driven + Polyfill<\/td>\n<td>99-100*<\/td>\n<td>1.2s<\/td>\n<td>0ms*<\/td>\n<td>0.02<\/td>\n<td>0KB*<\/td>\n<\/tr>\n<\/table>\n<p>* Su browser moderni. Su browser legacy, il polyfill JS aggiunge ~2KB di script inline.<\/p>\n<h2>Checklist per 100 Lighthouse con animazioni incluse<\/h2>\n<h3>1. Animazioni CSS niente JavaScript<\/h3>\n<p>Usa <code>animation-timeline: view()<\/code> per animazioni scroll-driven. &Egrave; supportato da Chrome 115+, Edge 115+ e Opera 101+.<\/p>\n<h3>2. Polyfill progressivo JS (leggero, condizionale)<\/h3>\n<p>Usa un polyfill JS che si attiva SOLO se <code>CSS.supports('animation-timeline', 'view()')<\/code> &egrave; false. Il peso &egrave; minimo (~2KB) e non impatta i browser moderni.<\/p>\n<h3>3. content-visibility: auto per le sezioni sotto la piega<\/h3>\n<pre><code>.sezione-sotto-la-piega {\n    content-visibility: auto;\n    contain-intrinsic-size: 600px;\n}<\/code><\/pre>\n<p>Questa propriet&agrave; dice al browser di non renderizzare gli elementi fuori dallo schermo fino a quando l&#8221;utente non sta per vederli.<\/p>\n<h3>4. Lazy loading per immagini<\/h3>\n<pre><code>&lt;img src=&quot;foto.jpg&quot; loading=&quot;lazy&quot; width=&quot;800&quot; height=&quot;600&quot; alt=&quot;...&quot; \/&gt;<\/code><\/pre>\n<p>Specifica sempre <code>width<\/code> e <code>height<\/code> per evitare layout shift, e usa <code>loading=\"lazy\"<\/code> per immagini non critiche.<\/p>\n<h3>5. WebP e AVIF per immagini<\/h3>\n<p>Usa formati moderni: WebP riduce il peso del 30-50% rispetto a JPEG, AVIF fino al 60% rispetto a JPEG.<\/p>\n<h3>6. Font preload e display: swap<\/h3>\n<pre><code>@font-face {\n    font-family: 'MioFont';\n    src: url('miofont.woff2') format('woff2');\n    font-display: swap;\n}<\/code><\/pre>\n<h3>7. Elimina CSS e JS inutilizzati<\/h3>\n<p>Usa strumenti come PurgeCSS per eliminare il codice non utilizzato. Nel caso dei framework CSS, carica solo i componenti che usi effettivamente.<\/p>\n<h3>8. Preconnect per risorse di terze parti<\/h3>\n<pre><code>&lt;link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/&gt;<\/code><\/pre>\n<h3>9. Server con buon TTFB<\/h3>\n<p>Scegli un hosting WordPress ottimizzato e usa una CDN per distribuire i contenuti statici.<\/p>\n<h2>Risultati con ClassyBlocks Pro<\/h2>\n<p>Test effettuati con WordPress 6.8, tema Blocksy, 151 animazioni attive:<\/p>\n<ul>\n<li><strong>Lighthouse Performance:<\/strong> 100\/100<\/li>\n<li><strong>LCP:<\/strong> 1.2s<\/li>\n<li><strong>TBT:<\/strong> 0ms<\/li>\n<li><strong>CLS:<\/strong> 0.02<\/li>\n<li><strong>JS aggiuntivo (browser moderni):<\/strong> 0KB<\/li>\n<li><strong>JS aggiuntivo (browser legacy):<\/strong> ~2KB (polyfill)<\/li>\n<\/ul>\n<p><a href=\"https:\/\/studioimmens.com\/en\/classyblocks-pro\/\">Scopri ClassyBlocks Pro<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Ottenere un punteggio di 100\/100 su Lighthouse Performance &egrave; considerato da molti sviluppatori WordPress un&#8221;impresa impossibile, soprattutto se vuoi includere animazioni nel sito. Ma la realt&agrave; &egrave; diversa: puoi avere animazioni spettacolari e allo stesso tempo ottenere 100\/100 Lighthouse. Il segreto &egrave; usare le giuste tecnologie nel modo giusto. Perch&eacute; 100 Lighthouse &egrave; importante Un [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":1217,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_gspb_post_css":"","ai_primary_source":"Studio Immens Blog","visibility_scope":"","ai_summary":"","ai_intent":"informative","ai_related_resources":"","ai_priority":0,"ai_entity_type":"","ai_is_based_on":"","ai_citations":"","ai_mentions":"","ai_speakable_selector":"","ai_chunk_hints":"","footnotes":""},"categories":[40],"tags":[116,118,115,117],"ai_visibility":[],"class_list":["post-1174","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sviluppo-web","tag-animazioni-css","tag-core-web-vitals","tag-performance-wordpress","tag-scroll-driven"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1174","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/comments?post=1174"}],"version-history":[{"count":1,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1174\/revisions"}],"predecessor-version":[{"id":1195,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1174\/revisions\/1195"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/media\/1217"}],"wp:attachment":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/media?parent=1174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/categories?post=1174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/tags?post=1174"},{"taxonomy":"ai_visibility","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/ai_visibility?post=1174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}