Google PageSpeed non è solo un numero: è un fattore di ranking e un indicatore dell'esperienza utente. Un sito veloce converte di più e posiziona meglio. Ecco 10 azioni concrete.
1. Comprimi le immagini
Le immagini sono la causa numero uno di siti lenti. Usa formati moderni come WebP o AVIF, ridimensiona le immagini alle dimensioni effettive di visualizzazione.
Implementa il lazy loading per caricare le immagini solo quando entrano nello viewport. Questo da solo può migliorare il caricamento iniziale del 30-40%.
2. Minifica CSS e JavaScript
Rimuovi spazi, commenti e codice inutilizzato dai file CSS e JS. Strumenti come Terser, cssnano o PurgeCSS possono ridurre le dimensioni del 30-50%.
Un file CSS da 200KB può diventare 80KB dopo la minifica. La differenza si sente soprattutto su connessioni lente e dispositivi mobili.
3. Elimina CSS e JS non utilizzato
Molti siti caricano librerie intere per usare solo una funzione. Analizza il codice con Chrome DevTools e rimuovi tutto ciò che non viene effettivamente usato.
Questo è particolarmente importante con le framework CSS come Bootstrap: caricare l'intera libreria quando usi solo il grid system è uno spreco enorme.
4. Implementa il caching lato server
Configura le intestazioni Cache-Control e Expires sul server. Per i file statici, usa cache aggressive con scadenza lunga.
Per HTML dinamico, usa la cache solo per sessioni anonime. Questo bilancia velocità e contenuti aggiornati per ogni visitatore.
5. Usa una CDN
Una Content Delivery Network distribuisce i tuoi file statici su server vicini agli utenti. Cloudflare, BunnyCDN o Amazon CloudFront sono ottime opzioni.
Con una CDN, un utente a Milano scarica le risorse da un server italiano invece che da uno negli USA. La latenza si dimezza.
6. Ottimizza il server
Passa a PHP 8.x, usa HTTP/2 o HTTP/3, attiva la compressione Brotli invece di Gzip. Un server ben configurato può dimezzare i tempi di risposta.
Anche la scelta dell'hosting conta: un VPS dedicato performa molto meglio di un hosting condiviso sovraccarico.
7. Riduci le richieste di rete
Ogni richiesta HTTP ha un costo. Unifica i file CSS/JS quando possibile, usa i font del sistema o caricali in modo non bloccante.
Evita troppi domini esterni: ogni dominio aggiuntivo richiede un nuovo DNS lookup e una nuova connessione TCP.
8. Carica in modo non bloccante
CSS non critico deve essere caricato con media="print" onload="this.media='all'". JavaScript deve usare defer o async.
Le immagini above-the-fold devono avere fetchpriority="high" per prioritarizzarle nel caricamento iniziale.
9. Ottimizza il Critical Rendering Path
Identifica il CSS critico (above-the-fold) e inlinealo nell'HTML. Il resto del CSS può essere caricato in modo asincrono.
Questo riduce drasticamente il FCP (First Contentful Paint), che è uno dei metriche Core Web Vitals più importanti per Google.
10. Monitora e testa continuamente
Usa Google PageSpeed Insights, Lighthouse e Chrome DevTools regolarmente. Le performance non sono "una tantum".
Vanno monitorate ad ogni modifica significativa. Anche un nuovo plugin o una libreria aggiornata possono impactare le prestazioni.
Il mio risultato
Su luigidonato.it ho applicato tutte queste ottimizzazioni: 100/100 su Accessibilità, SEO e Best Practices, con un punteggio Performance di 87/100 su mobile. Il tutto con CSS e JS custom di soli 120KB totali.
Il tuo sito è lento?
Posso analizzarlo e proporti soluzioni concrete per velocizzarlo.
Richiedi Analisi Gratuita