Checklist Velocita Sito Web: 35 Ottimizzazioni per Migliorare i Core Web Vitals
La velocita del sito web non e piu un dettaglio tecnico: dal 2021 Google utilizza i Core Web Vitals come fattore di ranking diretto. Un sito lento perde posizioni nelle SERP, aumenta la frequenza di rimbalzo e riduce le conversioni. Secondo Google, ogni secondo di ritardo nel caricamento mobile riduce le conversioni del 20%. Questa checklist di 35 ottimizzazioni ti guida in modo sistematico attraverso tutte le aree di intervento, dal server al browser, per portare il tuo sito nella zona verde dei Core Web Vitals.
I Core Web Vitals: Metriche e Soglie di Riferimento
I Core Web Vitals sono tre metriche chiave usate da Google per valutare la qualita dell'esperienza utente. Prima di ottimizzare, misura il punto di partenza con Google PageSpeed Insights, Google Search Console e WebPageTest.org.
| Metrica | Cosa Misura | Buono | Da Migliorare | Scarso |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Caricamento elemento principale | Sotto 2,5 sec | 2,5-4 sec | Oltre 4 sec |
| INP (Interaction to Next Paint) | Reattivita alle interazioni | Sotto 200 ms | 200-500 ms | Oltre 500 ms |
| CLS (Cumulative Layout Shift) | Stabilita visiva della pagina | Sotto 0,1 | 0,1-0,25 | Oltre 0,25 |
Ottimizzazioni Server, Hosting e Rete (1-10)
- Scegli un hosting di qualita con SSD NVMe: un hosting condiviso economico e la causa principale dei siti lenti. Per una PMI sono sufficienti un VPS o un hosting managed WordPress di qualita con server in Europa.
- Abilita una CDN come Cloudflare: distribuisce i file statici da server vicini all'utente, riducendo la latenza anche del 40-60% per gli utenti italiani e stranieri.
- Attiva la compressione Gzip o Brotli: comprimi HTML, CSS e JS prima di inviarli al browser. Brotli e piu efficiente di Gzip e supportato dai browser moderni, riducendo le dimensioni del 70-90%.
- Configura la cache del server: usa Varnish, Redis o NGINX FastCGI cache per servire pagine gia generate. Su WordPress usa WP Rocket o W3 Total Cache per configurare la cache facilmente.
- Ottimizza il database periodicamente: svuota revisioni, transient e spam dal database. Su WordPress usa WP-Optimize. Un database gonfiato rallenta la generazione delle pagine PHP in modo significativo.
- Abilita HTTP/2 o HTTP/3: i protocolli moderni caricano risorse in parallelo molto piu efficacemente di HTTP/1.1. Quasi tutti gli hosting moderni li supportano per impostazione predefinita, verificalo nel pannello.
- Riduci il Time to First Byte (TTFB) sotto 600 ms: il TTFB misura il tempo tra la richiesta e la prima risposta del server. Un TTFB alto indica problemi di hosting, database lento o codice PHP non ottimizzato.
- Configura i header di cache HTTP per risorse statiche: imposta Expires e Cache-Control per immagini, CSS e JS con periodi lunghi (fino a 1 anno per file che non cambiano), riducendo le richieste ripetute.
- Elimina le catene di redirect: ogni redirect aggiunge un round-trip di rete. Correggi i redirect multipli A→B→C in redirect diretti A→C. Usa Screaming Frog per trovare tutte le catene nel sito.
- Aggiungi preconnect per domini di terze parti: usa link rel='preconnect' per Google Fonts, Analytics e altri servizi esterni. Avvia la connessione in anticipo riducendo la latenza percepita dall'utente.
Ottimizzazione delle Immagini (11-20)
- Converti le immagini in WebP o AVIF: WebP riduce le dimensioni del 25-35% rispetto a JPEG a parita di qualita. AVIF offre un'ulteriore riduzione del 20-30%. Usa Squoosh.app o plugin WordPress come ShortPixel.
- Comprimi tutte le immagini prima del caricamento: non caricare mai immagini originali da fotocamera da 5-20MB. Comprimi a qualita 75-85% e larghezza massima 1920px con TinyPNG o Compressor.io.
- Implementa il lazy loading nativo: aggiungi l'attributo loading='lazy' a tutti i tag img fuori dallo schermo. Le immagini below the fold non devono caricarsi al primo accesso alla pagina.
- Specifica sempre larghezza e altezza delle immagini: aggiungere attributi width e height ai tag img permette al browser di riservare lo spazio prima del caricamento, eliminando il layout shift (CLS).
- Usa immagini responsive con srcset: servi immagini di dimensioni diverse in base alla risoluzione del dispositivo. Un utente mobile non deve scaricare un'immagine da 1920px pensata per desktop.
- Pre-carica le immagini LCP con link preload: l'immagine principale above the fold che influenza l'LCP deve essere precaricata. E uno degli interventi piu efficaci per migliorare il punteggio LCP.
- Ottimizza le immagini di sfondo CSS: le background-image CSS non possono usare lazy loading nativo. Usa JavaScript o l'attributo CSS content-visibility per differire il caricamento delle immagini non critiche.
- Elimina le immagini decorative non necessarie: ogni immagine aggiunge peso alla pagina. Le immagini puramente decorative possono essere sostituite con forme CSS senza impatto sulle prestazioni del sito.
- Usa una CDN per ottimizzare le immagini automaticamente: Cloudflare Images o Cloudinary ottimizzano e ridimensionano le immagini in tempo reale in base al dispositivo dell'utente senza configurazioni manuali.
- Verifica le dimensioni delle immagini OpenGraph: le immagini per i social (og:image) devono essere ottimizzate anche se non impattano direttamente sulle prestazioni del sito nel browser dell'utente finale.
CSS, JavaScript, Font e CLS (21-35)
- Minimizza CSS e JavaScript: rimuovi spazi, commenti e codice non necessario. Su WordPress usa Autoptimize. La minimizzazione riduce le dimensioni dei file del 30-60% senza perdita di funzionalita.
- Rimuovi il CSS non utilizzato: temi e plugin caricano spesso centinaia di KB di CSS mai applicato. Usa PurgeCSS o il Critical CSS di WP Rocket per rimuovere il CSS inutilizzato dalla pagina.
- Rinvia il JavaScript non critico: aggiungi attributo defer o async ai tag script non necessari al caricamento iniziale. Il JavaScript sincrono blocca il rendering e aumenta l'LCP in modo significativo.
- Limita il numero di plugin attivi: su WordPress ogni plugin aggiunge richieste HTTP e codice CSS/JS. Disattiva e rimuovi i plugin non utilizzati. Valuta soluzioni all-in-one per ridurre il numero complessivo.
- Ospita i Google Fonts localmente: scarica i font e servili dal tuo server con font-display:swap. Elimina la dipendenza da Google Fonts CDN e le relative connessioni esterne che rallentano il caricamento.
- Implementa il Critical CSS inline: estrai e inserisci inline il CSS necessario per il rendering above the fold. Evita il blocco del rendering mentre il CSS esterno si carica. Strumenti: Critical, WP Rocket Critical CSS.
- Riduci il numero di richieste HTTP: ogni file CSS, JS, immagine e font richiede una connessione al server. Combina file dove possibile e usa sprite CSS per le icone ripetute nella stessa pagina.
- Valuta gli script di terze parti: chat live, pixel di tracciamento e widget social rallentano il sito. Caricali in modo asincrono e rimuovi quelli non strettamente necessari alla strategia di marketing.
- Riserva spazio per immagini e annunci prima del caricamento: definisci sempre larghezza e altezza per immagini, embed video e banner pubblicitari per evitare il Cumulative Layout Shift durante il caricamento.
- Usa font-display:swap per i font web: evita il Flash of Invisible Text (FOIT) che causa layout shift. Con swap, il browser mostra subito il testo con un font di sistema e poi sostituisce con il font personalizzato.
- Testa il sito su connessioni mobili lente: usa Chrome DevTools per simulare connessioni 3G lente e identifica i colli di bottiglia specifici per mobile, dove si concentra la maggior parte del traffico italiano.
- Ritarda il banner cookie dopo il caricamento: i banner cookie che appaiono durante il caricamento causano layout shift. Configurali per apparire dopo il completamento del caricamento principale della pagina.
- Precarica i font principali con link preload: per i font usati above the fold, aggiungi link rel='preload' per avviare il download in anticipo rispetto al parsing del CSS e ridurre il Flash of Invisible Text.
- Ottimizza l'ordine di caricamento delle risorse: CSS e HTML critici per primi, poi JS e risorse non critiche in modalita differita. L'ordine corretto delle risorse impatta significativamente sull'LCP percepito.
- Monitora i Core Web Vitals in Google Search Console ogni mese: la sezione Esperienza pagina di GSC mostra i CWV basati su dati reali degli utenti Chrome. Intervieni prontamente sui problemi segnalati per mantenere il sito nella zona verde.
FAQ sulla Velocita del Sito Web
Q: Quanto influisce la velocita del sito sul ranking di Google?
A: Dal 2021 i Core Web Vitals sono un fattore di ranking diretto. Tuttavia Google stesso afferma che la velocita e uno dei tanti segnali: un sito lento con contenuti molto rilevanti puo posizionarsi meglio di un sito velocissimo con contenuti scarsi. A parita di qualita dei contenuti, il sito piu veloce ha un vantaggio competitivo misurabile nelle SERP.
Q: Qual e il punteggio PageSpeed Insights ideale per una PMI?
A: Punta a un punteggio di almeno 70-80 su mobile e 80-90 su desktop. Un punteggio perfetto di 100 e spesso impossibile con siti complessi e non e necessario. L'obiettivo pratico e avere tutti e tre i Core Web Vitals nella zona verde: LCP sotto 2,5 sec, INP sotto 200ms e CLS sotto 0,1.
Q: WordPress e intrinsecamente lento?
A: No. WordPress diventa lento con troppi plugin, un tema pesante o un hosting scadente. Con le giuste ottimizzazioni, hosting di qualita, caching, ottimizzazione immagini e CDN, un sito WordPress raggiunge ottimi punteggi di velocita. I problemi di performance su WordPress sono quasi sempre risolvibili con le ottimizzazioni di questa checklist.
Q: Devo ottimizzare prima per mobile o desktop?
A: Prima per mobile. Google usa il mobile-first indexing e indicizza il sito principalmente nella versione mobile. Testa con PageSpeed Insights separatamente per mobile e desktop: spesso le ottimizzazioni mobile hanno impatto anche su desktop, ma non sempre vale il contrario.
Q: Quanto tempo ci vuole per vedere miglioramenti dopo le ottimizzazioni?
A: I miglioramenti tecnici come compressione, caching e ottimizzazione immagini sono visibili immediatamente nel prossimo test PageSpeed Insights. I miglioramenti nel ranking SEO richiedono 4-8 settimane perche Google deve re-crawlare il sito e aggiornare il Chrome User Experience Report con i nuovi dati reali degli utenti.