Dimensione ottimale della pagina web per caricamento veloce: guida completa all'ottimizzazione

Non esiste una singola "dimensione perfetta" della pagina web, ma mantenere il peso totale della pagina sotto 1 MB (idealmente 500 KB) garantisce caricamenti veloci su dispositivi e connessioni. Ecco una ripartizione completa di obiettivi e tecniche.

Obiettivi di dimensione per tipo di pagina

Tipo di pagina	Eccellente	Buono	Da migliorare
Landing/Marketing	<300 KB	300-600 KB	>1 MB
Blog/Articolo	<200 KB	200-500 KB	>800 KB
Prodotto e-commerce	<500 KB	500 KB-1 MB	>2 MB
Web App/Dashboard	<400 KB	400-800 KB	>1.5 MB

Ripartizione del peso tipico di una pagina

• Immagini: 50-70% (ottimizza prima!)
• JavaScript: 15-25%
• CSS: 5-10%
• Font: 5-15%
• HTML: <5%
• Video/Altro: Variabile

Strategie di ottimizzazione

1. Ottimizzazione immagini (Maggiore impatto)

• Formato: WebP/AVIF > JPEG > PNG (per foto); SVG per icone/loghi
• Compressione: 75-85% qualità per JPEG/WebP; senza perdita per PNG
• Immagini responsive: <picture> + srcset per dimensioni appropriate al dispositivo
• Lazy loading: loading="lazy" per immagini sotto la piega
• Dimensioni: Sirvi le dimensioni esatte di visualizzazione—nessuna riduzione tramite CSS

2. Minificazione e compressione del codice

• Minifica: Rimuovi spazi bianchi, commenti, codice inutilizzato (HTML, CSS, JS)
• Gzip/Brotli: Abilita compressione del server (riduzione 70-90%)
• Tree shaking: Rimuovi moduli JS inutilizzati (Webpack, Vite, Rollup)
• Code splitting: Carica solo il JS necessario per rotta/pagina

3. Strategia di caching

• Asset statici: Cache-Control: max-age=31536000, immutable (1 anno)
• HTML: max-age=0, must-revalidate o cache breve
• Nomi file con versione: app.v2.3.1.js per cache busting
• Service Workers: Caching offline per PWA

4. Ottimizzazione font

• Sottoinsieme font: Includi solo i glifi necessari (Latino, Cirillico, ecc.)
• Solo WOFF2: Migliore compressione; elimina TTF/EOT/WOFF
• Preload font chiave: <link rel="preload" as="font" crossorigin>
• Font-display: swap: Previeni testo invisibile durante il caricamento
• Font variabili: Singolo file per più pesi

5. Script di terze parti

• Controlla ogni script: analisi, chat, annunci, widget social
• Carica in modo asincrono: async o defer
• Valuta l'auto-hosting degli script critici
• Usa preconnect/dns-prefetch per domini esterni

6. CDN e consegna

• Sirvi asset statici da CDN (Cloudflare, CloudFront, Bunny)
• Abilita HTTP/2 o HTTP/3 (QUIC)
• Caching edge per contenuti dinamici dove possibile

Strumenti di test

• Google PageSpeed Insights — Core Web Vitals + opportunità
• WebPageTest — Cascata dettagliata, filmstrip, località globali
• GTmetrix — Tracciamento storico, punteggi Lighthouse
• Lighthouse CI — Automatizzato in pipeline CI/CD

Metriche chiave da monitorare

• LCP (Largest Contentful Paint): <2.5s
• CLS (Cumulative Layout Shift): <0.1
• FID/INP (Interattività): <200ms
• TTFB (Time to First Byte): <600ms
• Tempo totale di blocco: <200ms

Ricorda: la performance percepita conta più dei byte grezzi. Dai priorità al percorso di rendering critico, differisci il non essenziale e testa su dispositivi reali (specialmente Android di fascia media su 3G/4G).