Ottimizzare i tempi di caricamento: rendi il sito velocissimo

Ogni secondo conta. Se il tuo sito impiega troppo a caricarsi, perdi molti dei tuoi visitatori. Tornano indietro, scelgono un altro risultato e non tornano più. Allo stesso tempo la velocità di caricamento è un fattore di ranking ufficiale di Google. I siti lenti vengono spinti più in basso nei risultati di ricerca.

In questa guida ti mostro passo passo come rendere il sito più veloce, dalle basi come l'ottimizzazione delle immagini fino a tecniche avanzate come Critical CSS e Lazy Loading.

Core Web Vitals: le 3 metriche che Google misura

Google valuta le performance del sito tramite tre metriche concrete, i Core Web Vitals:

1. Largest Contentful Paint (LCP)

Misura quanto rapidamente l'elemento visibile più grande della pagina si carica: tipicamente un'immagine di header, un video o un grande blocco di testo.

• Bene: sotto 2,5 secondi
• Da migliorare: 2,5-4,0 secondi
• Male: oltre 4,0 secondi

2. Interaction to Next Paint (INP)

Misura quanto rapidamente la pagina risponde alle interazioni dell'utente: clic, tap, tastiera. Dal 2024 sostituisce il vecchio First Input Delay (FID).

• Bene: sotto 200 ms
• Da migliorare: 200-500 ms
• Male: oltre 500 ms

3. Cumulative Layout Shift (CLS)

Misura quanto si spostano gli elementi sulla pagina durante il caricamento. Conosci la sensazione? Vuoi cliccare un pulsante ma improvvisamente scivola un'immagine e clicchi qualcos'altro. È CLS alto.

• Bene: sotto 0,1
• Da migliorare: 0,1-0,25
• Male: oltre 0,25

Ottimizzazione immagini: la leva più grande

Sulla maggior parte dei siti le immagini sono la parte più grande del volume di dati. Qui c'è il maggiore potenziale di ottimizzazione.

Scegliere il formato giusto

• WebP: il miglior formato tuttofare per il 2026. Fino al 30% più piccolo del JPEG a parità di qualità. Supportato da tutti i browser moderni
• AVIF: ancora meglio di WebP (fino al 50% più leggero) e supportato da tutti i browser attuali. Ideale come prima scelta, con WebP come alternativa
• JPEG: per foto se WebP/AVIF non sono un'opzione. Qualità 75-85% di solito basta
• PNG: solo per immagini con trasparenza o grafiche/icone nitide. Troppo grande per le foto
• SVG: per loghi, icone e grafiche semplici. Scalabile all'infinito, dimensione minima

Dimensionare correttamente

Uno dei problemi più frequenti: un'immagine è larga 4000 px ma mostrata solo a 800. Il browser deve comunque scaricare l'intera immagine e ridimensionarla. Soluzione:

• Crea immagini nella dimensione effettiva di visualizzazione (max 2x per Retina)
• Usa l'attributo srcset per immagini responsive: fornisci dimensioni diverse per schermi diversi
• Imposta sempre width e height in HTML: evita layout shift (CLS)

Compressione immagini

Anche dopo aver scelto formato e dimensione puoi comprimere ulteriormente:

• Squoosh (squoosh.app): tool gratuito Google, direttamente nel browser
• TinyPNG (tinypng.com): comprime PNG e JPEG con minima perdita di qualità
• ShortPixel: plugin WordPress per compressione automatica all'upload

Regola: nessuna singola immagine del sito dovrebbe superare i 200 KB. Hero max 300 KB. Thumbnail sotto 50 KB.

Lazy Loading: carica solo ciò che è visibile

Il lazy loading significa che immagini e altre risorse vengono caricate solo quando l'utente le scorre. Tutto fuori dall'area visibile (viewport) si carica al bisogno.

Implementazione più semplice:

<img src="immagine.webp" loading="lazy" alt="descrizione" width="800" height="600">

L'attributo loading="lazy" è supportato da tutti i browser moderni e non richiede JavaScript. Importante: la prima immagine visibile (hero, logo) non deve essere lazy: peggiorerebbe l'LCP.

Caching: velocizza le visite ripetute

La cache del browser memorizza file statici (CSS, JS, immagini, font) localmente sul dispositivo. Alla visita successiva quei file non vanno riscaricati.

Impostare header Cache-Control

Tramite il server (es. nginx, Apache, Caddy) decidi quanto a lungo cachare i file:

• Immagini, font: 1 anno (cambiano raramente)
• CSS e JavaScript: da 1 mese a 1 anno (con versioning nel nome file)
• File HTML: poco o nessun caching (devono essere sempre attuali)

CDN (Content Delivery Network)

Un CDN distribuisce i file su server in tutto il mondo. Il server più vicino consegna i file, riduce molto la latenza. Per siti tedeschi con pubblico tedesco è ideale un CDN con server a Francoforte o Amsterdam.

• Cloudflare: piano base gratuito con CDN, protezione DDoS e ottimizzazione automatica
• Bunny CDN: economico, potente, server in Europa

Ottimizzare CSS e JavaScript

Ottimizzazione CSS

• Minificazione: rimuovi spazi, commenti e caratteri inutili. Tool: cssnano, clean-css
• Critical CSS: estrai il CSS necessario per l'area visibile e caricalo inline. Il resto si carica in async
• Rimuovere il CSS inutilizzato: molti siti caricano parecchio CSS che nella pagina attuale non viene usato. Strumenti: PurgeCSS, UnCSS

Ottimizzazione JavaScript

• Defer e Async: non caricare JS bloccando il render: <script defer src="..">
• Tree shaking: con bundler (Webpack, Vite): includi solo il codice realmente usato
• Minimizzare script di terze parti: ogni script esterno (analytics, chat widget, pulsanti social) rallenta. Verifica se ognuno serve davvero

Ottimizzare i font

I web font (Google Fonts, Adobe Fonts) possono pesare molto sui tempi. Ogni famiglia e ogni peso è un file in più.

• Massimo 2 famiglie e 3-4 pesi
• Impostare font-display: swap: mostra subito il font di sistema e scambia quando il web font è pronto
• Ospitare i font in locale invece di caricarli da Google Fonts, risparmia un DNS lookup ed è più GDPR-friendly
• Usare il formato WOFF2: il più compatto
• Subsetting: carica solo i caratteri necessari (latini, non cirillici ecc.)

Migliorare le performance server

Qualità hosting

Shared hosting economico con decine di altri siti sullo stesso server è il killer più frequente lato server. Per un sito veloce serve:

• Time to First Byte (TTFB) rapido, idealmente sotto 200ms
• Storage SSD: molto più veloce dei dischi classici
• Server in Germania: linea più corta per visitatori tedeschi
• HTTP/2 o HTTP/3: trasferimento più rapido di HTTP/1.1

Attivare compressione

La compressione Gzip o Brotli riduce HTML, CSS e JS del 60-80%. Brotli è più nuovo e ancora più efficiente di Gzip. Entrambi vanno attivati sul server.

I migliori tool per analisi velocità

• Google PageSpeed Insights (pagespeed.web.dev): il test standard basato su Lighthouse. Dà un punteggio 0-100 e suggerimenti concreti
• GTmetrix (gtmetrix.com): report dettagliato con waterfall. Mostra quanto impiega ogni file
• WebPageTest (webpagetest.org): il test da professionisti. Vari server, velocità e browser
• Chrome DevTools: la scheda Network mostra i tempi in tempo reale, la scheda Performance misura i Core Web Vitals
• Google Search Console: mostra i Core Web Vitals per tutto il sito su dati reali utenti

Checklist quick-win: 10 passi per un sito più veloce

• Convertire e comprimere immagini in WebP
• Attivare lazy loading per le immagini sotto il viewport
• Minificare CSS e JavaScript
• Caricare JS con defer o async
• Configurare il caching browser
• Ospitare font in locale e limitare a 2 famiglie
• Attivare compressione Gzip/Brotli sul server
• Rimuovere plugin e script di terze parti inutili
• Indicare dimensioni immagini (width/height) in HTML
• Verificare il provider: TTFB sotto 200ms?

Conclusione: la velocità non è un lusso

Un sito veloce non è un nice-to-have, è la base per buoni ranking, visitatori soddisfatti e conversioni più alte. La maggior parte delle ottimizzazioni non costa denaro, solo tempo e know-how. Inizia dalle immagini: è quasi sempre l'effetto più immediato.

Vuoi far analizzare e ottimizzare le prestazioni del tuo sito in modo professionale? Controllo la tua pagina su tutti i fattori di velocità rilevanti e mi occupo io delle ottimizzazioni, in modo misurabile e trasparente.

Stefanos Svarnas, Knusperholz a Ludwigsburg. Creo siti web e faccio in modo che le attività vengano trovate su Google. Di persona, senza i giri di un'agenzia.

Prenota il primo colloquioPiù su di me