Perche le prestazioni sono una funzionalita, non un ripensamento
Un secondo di ritardo nel tempo di caricamento della pagina riduce le conversioni del 7% in media. Google utilizza le metriche di prestazione come segnali di ranking. Gli utenti hanno tempi di attenzione piu brevi che mai. E le connessioni mobili in molte parti del mondo sono ancora lente e inaffidabili.
L'ottimizzazione delle prestazioni non riguarda il raggiungimento di un punteggio Lighthouse perfetto. Riguarda il rendere il sito web utilizzabile e reattivo per persone reali su dispositivi e reti reali. Questa guida copre le tecniche che fanno la maggiore differenza, organizzate per impatto.
Ottimizzazione delle immagini: la vittoria piu grande
Le immagini rappresentano tipicamente il 50-70% del peso totale di una pagina. Ottimizzare le immagini e quasi sempre il singolo miglioramento di prestazioni con il maggiore impatto.
Formati moderni: WebP e AVIF
JPEG e PNG sono formati legacy. Le alternative moderne offrono una compressione drasticamente migliore a qualita uguale o superiore:
| Formato | Compressione vs JPEG | Supporto browser | Ideale per |
|---|---|---|---|
| WebP | 25-35% piu piccolo | 97%+ (tutti i browser moderni) | Uso generale, foto, grafiche |
| AVIF | 40-50% piu piccolo | 92%+ (Chrome, Firefox, Safari 16.4+) | Foto, immagini alta qualita |
| SVG | N/A (vettoriale) | 100% | Icone, loghi, illustrazioni |
Come servire i formati moderni
Usa l'elemento <picture> per servire il miglior formato supportato da ciascun browser. Il browser sceglie il primo formato che supporta. I browser piu vecchi tornano al JPEG.
Immagini responsive
Servire un'immagine hero da 2400px a un telefono con viewport da 375px spreca banda. Usa gli attributi srcset e sizes per permettere al browser di scegliere la dimensione giusta dell'immagine.
Lazy loading
Le immagini sotto la piega non devono caricarsi immediatamente. Il lazy loading nativo e supportato da tutti i browser moderni:
<img src="image.webp" alt="Descrizione" loading="lazy" width="800" height="600">
Non applicare il lazy loading alle immagini above-the-fold. L'immagine hero e qualsiasi immagine visibile senza scorrere dovrebbe caricarsi immediatamente.
Compressione delle immagini
- Qualita JPEG/WebP 75-85 e generalmente indistinguibile dalla qualita 100% per l'occhio umano ma 40-60% piu piccola.
- Qualita AVIF 60-70 raggiunge una qualita visiva comparabile al JPEG a 85.
- Rimuovi sempre i metadati. I dati EXIF possono aggiungere 50-200KB per immagine.
- Ridimensiona prima di comprimere.
Ottimizzazione CSS e JavaScript
Minificazione
La minificazione rimuove spazi bianchi, commenti e rinomina le variabili. E un vantaggio gratuito senza impatto visivo. Se usi uno strumento di build moderno (Vite, webpack, Rollup), la minificazione e tipicamente attiva di default per le build di produzione.
Bundling e code splitting
Il bundling combina piu file in meno file, riducendo le richieste HTTP. Il code splitting spezza il bundle in chunk che si caricano su richiesta. Il code splitting basato sulle route e il punto ottimale per la maggior parte delle applicazioni.
Tree shaking
Il tree shaking rimuove il codice inutilizzato dai bundle. Controlla le dimensioni del bundle con strumenti come webpack-bundle-analyzer o source-map-explorer.
CSS critico
Il CSS e render-blocking di default. Il CSS critico e la tecnica di inserire inline il CSS necessario per il contenuto above-the-fold direttamente nel <head>, poi caricare il resto in modo asincrono.
Strategie di caricamento dei font
I web font sono un comune collo di bottiglia per le prestazioni. Un tipico file font e 20-50KB per combinazione peso/stile.
Il problema FOIT e FOUT
- FOIT - Il browser nasconde il testo fino al caricamento del font.
- FOUT - Il browser mostra il testo in un font di fallback, poi passa al web font quando si carica.
FOUT e la migliore esperienza utente. Controlla questo con font-display: swap;
Tecniche di ottimizzazione dei font
- Usa solo WOFF2. 97%+ di supporto browser e 30% piu piccolo di WOFF.
- Subset dei font. Se usi solo caratteri latini, non spedire glifi CJK.
- Precarica i font critici.
- Self-hosting dei font. Elimina il DNS lookup verso un'origine di terze parti.
- Considera i font di sistema. Elimina completamente il caricamento dei font.
Tempo di risposta del server
Tutta l'ottimizzazione frontend del mondo non aiutera se il server impiega due secondi per generare l'HTML. Il tempo di risposta del server (TTFB) dovrebbe essere sotto i 200ms.
Cause comuni di TTFB lento
- Query database lente. Query senza indice, query N+1.
- Nessun caching delle pagine.
- Posizione del server. Se il server e negli USA e i tuoi utenti sono in Svizzera.
- Hosting condiviso sovraccarico.
Soluzioni
- Usa un CDN. Per approfondire i benefici del CDN, leggi il nostro articolo su benefici e sicurezza dei CDN.
- Implementa il caching delle pagine.
- Considera la generazione statica.
- Ottimizza le query database.
Strategie di caching
Il caching e l'ottimizzazione delle prestazioni piu efficace dopo la riduzione iniziale dei contenuti.
Caching del browser
Controlla il caching del browser con gli header HTTP. Per gli asset statici con nomi file hash: Cache-Control: public, max-age=31536000, immutable
Per le pagine HTML che possono cambiare: Cache-Control: public, max-age=0, must-revalidate
Caching CDN
- Cache aggressivo per asset statici. Immagini, CSS, JS, font: cache per un anno.
- Cache HTML con TTL brevi o stale-while-revalidate.
- Purge al deploy.
Caching Service Worker
I service worker danno controllo programmatico sul caching lato client. Strategie comuni:
- Cache First - Per asset statici.
- Network First - Per chiamate API e contenuti dinamici.
- Stale While Revalidate - Il miglior equilibrio tra velocita e freschezza.
Script di terze parti: la tassa sulle prestazioni
Abbiamo verificato siti dove gli script di terze parti rappresentavano il 60%+ del tempo totale di esecuzione JavaScript e 300-500ms di tempo di caricamento aggiuntivo.
Strategie di mitigazione
- Verifica ogni script di terze parti. Elencali tutti. Per ognuno, chiediti: usiamo realmente i dati che raccoglie?
- Ritarda gli script non critici. Analytics e widget chat non devono caricarsi immediatamente.
- Self-hosting dove possibile.
- Usa facade per gli embed. Mostra una miniatura invece di caricare il player completo.
Misurare e monitorare le prestazioni
Non puoi ottimizzare cio che non misuri. Hai bisogno di dati di laboratorio e dati sul campo.
Core Web Vitals
Per un approfondimento, leggi il nostro articolo su Core Web Vitals e impatto SEO.
| Metrica | Cosa misura | Buono | Da migliorare | Scarso |
|---|---|---|---|---|
| LCP | Velocita di caricamento | ≤ 2.5s | ≤ 4.0s | > 4.0s |
| INP | Reattivita | ≤ 200ms | ≤ 500ms | > 500ms |
| CLS | Stabilita visiva | ≤ 0.1 | ≤ 0.25 | > 0.25 |
Checklist per l'ottimizzazione delle prestazioni
- Ottimizza le immagini. Converti in WebP/AVIF, usa immagini responsive, lazy load.
- Abilita la compressione. Brotli (preferito) o gzip.
- Configura il caching corretto.
- Usa un CDN.
- Minimizza le risorse render-blocking.
- Riduci gli script di terze parti.
- Minifica e bundla.
- Ottimizza i font.
- Migliora il tempo di risposta del server.
- Configura il monitoraggio.
Conclusione
Le prestazioni del sito web non sono un compito una tantum. Richiedono attenzione continua. Inizia con immagini e caching: queste due aree da sole possono dimezzare il tempo di caricamento per molti siti.
Se hai bisogno di aiuto per ottimizzare le prestazioni del tuo sito web, contatta il nostro team a Lugano. Aiutiamo le aziende in tutta la Svizzera a costruire siti web veloci e sicuri che producono risultati reali.
Vuoi sapere se il tuo sito è sicuro?
Richiedi un audit di sicurezza gratuito. In 48 ore ricevi un report completo.
Richiedi Audit Gratuito