Ottimizzare la velocità del sito: migliorare i Core Web Vitals

Per quanto bello, un sito lento fa scappare i visitatori. Secondo Google il 53% degli utenti abbandona un sito che impiega più di 3 secondi a caricarsi, e la velocità è un fattore di ranking diretto. Questa guida spiega in modo chiaro i Core Web Vitals e le tecniche che funzionano davvero.

Cosa sono i Core Web Vitals?

Tre metriche chiave dell’esperienza utente introdotte da Google nel 2020 e incluse nel ranking dal 2021, basate su dati reali degli utenti.

1. LCP — Largest Contentful Paint

Tempo di comparsa dell’elemento visibile più grande (spesso un’immagine hero o un titolo).

• Buono: fino a 2,5 secondi
• Da migliorare: 2,5–4 secondi
• Scarso: oltre 4 secondi

Fattori principali: immagini pesanti, server lento, JavaScript/CSS bloccanti.

2. INP — Interaction to Next Paint

Rapidità di risposta alle interazioni (clic, tocco, tastiera). Ha sostituito FID nel 2024.

• Buono: fino a 200 ms
• Da migliorare: 200–500 ms
• Scarso: oltre 500 ms

Task JavaScript lunghi, script di terze parti pesanti e gestori di eventi inefficienti lo peggiorano.

3. CLS — Cumulative Layout Shift

Misura quanto gli elementi “saltano” durante il caricamento.

• Buono: fino a 0,1
• Da migliorare: 0,1–0,25
• Scarso: oltre 0,25

Immagini senza dimensioni, contenuti iniettati e annunci tardivi ne sono le cause principali.

Dove misurare

Google PageSpeed Insights — dati di laboratorio e reali (CrUX), gratis.

Google Search Console → report Core Web Vitals — esperienza reale per gruppi di URL.

WebPageTest — grafici a cascata, video comparativi, test multi-step.

Chrome DevTools → Lighthouse — misure immediate in locale.

Migliorare l’LCP

Formati immagine moderni

Passare da JPEG/PNG a WebP o AVIF riduce spesso il peso del 30–50%.

``html <picture> <source srcset="hero.avif" type="image/avif" /> <source srcset="hero.webp" type="image/webp" /> <img src="hero.jpg" alt="..." width="1280" height="720" /> </picture> ``

Con Next.js il componente <Image> lo fa automaticamente.

Precaricare l’immagine principale

``html <link rel="preload" as="image" href="/hero.webp" fetchpriority="high" /> ``

Ridurre il tempo di risposta del server (TTFB)

• Generazione statica (SSG) o ISR invece del rendering a ogni richiesta
• CDN per servire i contenuti da vicino
• VPS o cloud se le risorse non bastano

CSS critico inline

Inserire nell’HTML gli stili della parte visibile accorcia il rendering; Critical o Critters lo automatizzano.

Migliorare l’INP: meno JavaScript

Spezzare i task lunghi

Oltre 50 ms un task blocca l’interazione. Dividi i lavori con setTimeout(..., 0) o scheduler.yield():

``javascript async function processLargeList(items) { for (let i = 0; i < items.length; i++) { process(items[i]); // Una pausa al thread principale ogni 50 elementi if (i % 50 === 0) await new Promise(r => setTimeout(r, 0)); } } ``

Eliminare script di terze parti inutili

Chat, reti pubblicitarie, analytics e pulsanti social pesano sull’INP. Controlla regolarmente Google Tag Manager.

Code splitting in React/Next.js

``javascript const HeavyComponent = dynamic(() => import('./HeavyComponent'), { ssr: false, loading: () => <div>Caricamento…</div>, }); ``

Portare il CLS a zero

Dimensioni su tutte le immagini

``html <img src="product.jpg" alt="Immagine prodotto" width="800" height="600" /> ``

``css .hero-image { aspect-ratio: 16 / 9; width: 100%; } ``

Evitare FOUT/FOIT con i font

Usa font-display: optional o swap e precarica i font:

``html <link rel="preload" href="/fonts/Brand.woff2" as="font" type="font/woff2" crossorigin /> ``

Segnaposto per i contenuti dinamici

``css .content-area { min-height: 120px; / riserva lo spazio fino al caricamento / } ``

Ottimizzazioni automatiche con Next.js

Con un sito Next.js queste funzioni sono pronte all’uso:

| Funzione | Cosa offre | |---|---| | Componente <Image> | WebP/AVIF automatico, lazy loading, dimensioni | | <Script strategy="lazyOnload"> | Rimanda gli script non critici | | Generazione statica (SSG) | Riduce al minimo il TTFB | | Ottimizzazione font | Self-hosting, strategia swap | | Code splitting automatico | Ogni pagina carica solo il JS necessario |

Ne parliamo anche nell’articolo sul costo di un sito aziendale.

Da dove iniziare

1. Ottimizzare le immagini — spesso da sole migliorano l’LCP del 30–40%.

2. Eliminare il JavaScript inutilizzato — strumento Coverage dei Chrome DevTools.

3. Ridurre le risorse bloccanti — async/defer o CSS critico inline.

4. Rivedere il server — con hosting condiviso e TTFB oltre 800 ms valuta un cambio.

5. Controllare gli script di terze parti — sezione “Codice di terze parti” di PageSpeed Insights.

Conclusione: la velocità è una necessità

I Core Web Vitals sono ormai una base obbligatoria per ranking, soddisfazione e conversioni: affrontali come un ciclo continuo di misura e miglioramento.

Vuoi conoscere lo stato dei tuoi Core Web Vitals o un’ottimizzazione professionale? Contattaci — offriamo un’analisi preliminare gratuita.