Ottimizzazione delle Prestazioni Web: Core Web Vitals e Miglioramento della Velocità

Cosa sono i Core Web Vitals?

I Core Web Vitals sono tre metriche chiave definite da Google per misurare l'esperienza utente: LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) e INP (Interaction to Next Paint).

LCP misura il tempo di caricamento del più grande elemento di contenuto della pagina (generalmente un'immagine hero o un titolo). Dovrebbe essere inferiore a 2,5 secondi. Un LCP lento fa abbandonare la pagina agli utenti.

CLS misura gli spostamenti di layout inattesi durante il caricamento. Gli spostamenti causati da immagini o annunci caricati tardi frustrano gli utenti. Dovrebbe essere inferiore a 0,1.

INP misura il tempo di risposta alle interazioni utente (clic, pressioni di tasti). Dovrebbe essere inferiore a 200 millisecondi. Un INP lento rende il sito inutilizzabile.

Buoni Core Web Vitals aiutano, ma non garantiscono posizioni elevate nei risultati di ricerca.

Ottimizzazione del LCP

Caricare rapidamente il più grande elemento di contenuto. L'immagine hero o il titolo principale è generalmente l'elemento LCP. Prioritizzate il suo caricamento.

Non caricare in modo differito l’immagine LCP. Riserva il lazy loading alle immagini fuori dalla vista iniziale.

Riducete il tempo di risposta del server (TTFB). Usate CDN (Content Delivery Network), ottimizzate le query del database, implementate il cache delle pagine.

async e defer riguardano JavaScript; il CSS non critico richiede una strategia di caricamento separata.

Precaricate risorse critiche con la direttiva preload: <link rel="preload" as="image" href="hero.webp">. Questo aiuta il browser a scoprire le risorse prima.

Ottimizzazione del CLS

Aggiungete attributi width e height agli elementi immagine e video. Questo permette al browser di riservare spazio ed evitare lo spostamento di layout.

Riservate contenitori di dimensione fissa per annunci ed embed. Gli annunci caricati tardi spostano il layout della pagina e aumentano il CLS.

Ottimizzate i font web: usate font-display: swap, precaricate i font critici. Minimizzate i problemi di FOUT e FOIT.

Elementi senza spazio riservato inseriti sopra il contenuto possono spostare il layout.

Usate transform e opacity nelle animazioni CSS. Queste proprietà non attivano il layout e non contribuiscono al CLS.

Ottimizzazione dell'INP

Riducete il tempo di esecuzione JavaScript. Dividete i task lunghi in pezzi più piccoli. I task oltre 50ms influenzano negativamente l'INP.

Ottimizzate gli event handler. Scrivete handler che rispondano rapidamente a clic e pressioni di tasti. Spostate calcoli pesanti nei Web Worker.

Script pesanti di terze parti possono aumentare INP. Rimuovi quelli inutili e misura nuovamente.

Differite operazioni pesanti con requestIdleCallback e setTimeout. Spostate il lavoro non critico in background durante le interazioni utente.

In framework come React/Vue, evitate re-render non necessari. Ignorate calcoli inutili con useMemo, useCallback e memo.

Ottimizzazione Generale della Velocità

Usate HTTP/2 o HTTP/3. Permettono elaborazione parallela di più richieste e compressione degli header. I provider di hosting moderni li supportano per impostazione predefinita.

Abilitate la compressione Gzip o Brotli. Le risorse basate su testo (HTML, CSS, JS) si riducono del 60-80%. Abilitate nella configurazione del server.

Mettete in cache gli asset statici. Impostate le durate di cache del browser e CDN con gli header Cache-Control. Usate TTL lunghi per asset immutabili.

Incorporate CSS critico inline, caricate il resto in modo asincrono. Incorporate il CSS necessario per il contenuto above-the-fold in cima alla pagina.

Dividete JavaScript con code splitting. Caricate solo il codice necessario per ogni pagina. Applicate lazy loading con dynamic import().

Lazy loadate le immagini. Caricate le immagini sotto il fold solo quando diventano visibili. L'attributo loading="lazy" è sufficiente.

Precaricate risorse con prefetch e preconnect. Stabilite connessioni DNS e TCP in anticipo con <link rel="preconnect" href="https://fonts.googleapis.com">.

Strumenti di Misurazione

Google PageSpeed Insights: Report di prestazione basato su Lighthouse. Fornisce punteggi separati per mobile e desktop. Offre suggerimenti di miglioramento.

Chrome DevTools Performance tab: Analizza il processo di caricamento della pagina passo dopo passo. Mostra long tasks, layout shifts e paint timing.

L’estensione Web Vitals non è più supportata. Usa Performance in Chrome DevTools.

CrUX (Chrome User Experience Report): Raccoglie dati di utenti reali. Appare come report Core Web Vitals in Search Console.

Report Core Web Vitals di Search Console: Classifica le vostre URL come 'Buono', 'Necessita miglioramenti' e 'Scarso'. Mostra quali pagine necessitano ottimizzazione.

• web.dev: LCP
• Chrome: Web Vitals
• Google Search: Page experience