Performance del Sito Web

Perché le performance contano

La velocità è la cosa che più spesso vale la pena sistemare per prima, perché agisce su tutto il resto. Le rilevazioni di Google dicono che più di metà delle persone abbandona una pagina che da telefono ci mette più di tre secondi ad aprirsi: non hanno visto il tuo prodotto, non hanno letto il tuo testo, hanno solo aspettato e sono andati via.

La velocità tocca tre cose insieme:

• Esperienza utente: un sito veloce migliora la percezione del brand e la soddisfazione dell'utente
• SEO: Google utilizza la velocità come fattore di ranking, specialmente attraverso i Core Web Vitals
• Conversioni: la velocità impatta direttamente sul tasso di conversione e sul fatturato

"La performance non è una feature: è la feature. Un sito lento è un sito che perde utenti, conversioni e posizionamento ogni singolo giorno."

Core Web Vitals

I Core Web Vitals sono le tre misure con cui Google valuta l'esperienza reale delle persone sul tuo sito. Dal 2021 contano ufficialmente per il posizionamento, e hanno il vantaggio di essere misurabili sul campo invece che in laboratorio.

Queste metriche si basano su dati reali degli utenti (field data) raccolti attraverso il Chrome User Experience Report (CrUX), non su test di laboratorio.

PageSpeed Insights

PageSpeed Insights è lo strumento gratuito di Google per analizzare le performance di una pagina web. Fornisce un punteggio da 0 a 100 e suggerimenti pratici per migliorare la velocità.

Oltre a PageSpeed, gli strumenti che uso:

• Lighthouse: integrato in Chrome DevTools, offre audit dettagliati su performance, accessibilità e SEO
• GTmetrix: analisi approfondita con waterfall chart e confronto storico
• WebPageTest: test avanzati con possibilità di scegliere localizzazione e dispositivo
• Google Search Console: report sui Core Web Vitals basati su dati reali degli utenti

Strategie di caching

La cache è la tecnica che dà il risultato più grosso con la fatica più piccola: si tiene da parte una copia già pronta di pagine, immagini e script, invece di rifarla a ogni visita.

Le cache stanno su livelli diversi:

1. Browser caching: le risorse statiche vengono salvate nel browser dell'utente tramite header HTTP (Cache-Control, Expires)
2. Page caching: l'intero HTML della pagina viene salvato come file statico, evitando l'elaborazione PHP/database
3. Object caching: i risultati delle query al database vengono memorizzati in memoria (Redis, Memcached)
4. Opcode caching: il bytecode PHP compilato viene mantenuto in memoria (OPcache)

Su WordPress, plugin come WP Rocket o W3 Total Cache gestiscono automaticamente i primi tre livelli. Per siti custom, la configurazione va implementata a livello di server e applicazione.

Content Delivery Network (CDN)

Una CDN è una rete di server distribuiti geograficamente che servono i contenuti statici dal nodo più vicino all'utente. Questo riduce la latenza e accelera significativamente il caricamento delle pagine, specialmente per utenti lontani dal server di origine.

Cosa ti dà una CDN:

• Riduzione della latenza: i contenuti vengono serviti dal server più vicino all'utente
• Distribuzione del carico: il server di origine gestisce meno richieste
• Protezione DDoS: la CDN assorbe il traffico malevolo prima che raggiunga il server
• Disponibilità: se un nodo è inattivo, il traffico viene instradato verso un altro

Cloudflare, BunnyCDN e Fastly sono tra le soluzioni CDN più utilizzate. Cloudflare offre anche un piano gratuito con funzionalità base di CDN e protezione DDoS.

Ottimizzazione delle immagini

Le immagini pesano in media più della metà di una pagina, e sono il posto dove si recuperano più secondi: quasi sempre il problema è una foto caricata così com'è uscita dal telefono.

Cosa faccio, in ordine di resa:

• Formato corretto: utilizzare WebP o AVIF per le immagini fotografiche, SVG per icone e grafiche vettoriali
• Compressione: applicare compressione lossy (con perdita contenuta di qualità) per ridurre il peso fino all'80%
• Dimensioni appropriate: servire immagini delle dimensioni esatte richieste dal layout tramite l'attributo srcset
• Attributi width e height: specificare sempre le dimensioni per evitare il CLS (layout shift)

Lazy loading

Il lazy loading consiste nel caricare le risorse (immagini, video, iframe) solo quando stanno per entrare nel viewport dell'utente, anziché al caricamento iniziale della pagina.

I browser moderni supportano il lazy loading nativo tramite l'attributo loading="lazy" sugli elementi <img> e <iframe>. Per le immagini above the fold (visibili senza scroll) è importante non applicare il lazy loading e utilizzare invece il preload o l'attributo fetchpriority="high".

Il vantaggio principale è la riduzione del peso iniziale della pagina: caricando solo ciò che l'utente vede subito, il browser scarica meno dati e mostra il contenuto più rapidamente, con un impatto diretto sul LCP e sul consumo di banda da mobile. Lo stesso principio si estende a video, mappe e widget di terze parti, che possono essere caricati solo all'interazione o allo scroll. Attenzione però a non eccedere: applicare il lazy loading a elementi visibili da subito ritarda la loro comparsa e peggiora l'esperienza percepita.

Minificazione e compressione

La minificazione rimuove caratteri non necessari (spazi, commenti, newline) dai file CSS, JavaScript e HTML, riducendo il loro peso senza alterarne la funzionalità. La compressione (Gzip o Brotli) riduce ulteriormente il peso dei file durante il trasferimento tra server e browser.

Brotli offre una compressione superiore del 15-25% rispetto a Gzip ed è supportato da tutti i browser moderni. La configurazione avviene a livello di server (Nginx, Apache) o tramite la CDN.

In pratica, su un sito WordPress la minificazione si attiva con un solo clic da plugin come WP Rocket o Autoptimize, mentre su un progetto custom viene gestita dai build tool (Vite, Webpack, esbuild) che generano automaticamente i file ottimizzati per la produzione. È buona norma combinare minificazione e compressione con il caching del browser: una volta scaricati e memorizzati, i file leggeri non vengono richiesti nuovamente, riducendo ulteriormente i tempi di caricamento nelle visite successive.

L'ordine con cui interverrei su un sito lento è questo: prima l'hosting, che è il pavimento e non si aggira con nessun trucco; poi le immagini, che sono il peso morto; poi la cache; poi il resto. Per chi sta su WordPress ci sono indicazioni specifiche nella guida WordPress. E si misura prima e dopo ogni intervento, altrimenti dopo un mese hai fatto dieci cose e non sai quale ha funzionato.