Fase 1: Analisi approfondita del carico delle risorse – il primo passo critico per il Tier 2 – non può limitarsi a contare file, ma richiede una valutazione precisa di dimensioni, tipologie e criticità di ogni asset. In Italia, dove le reti mobili variano tra 4G e 5G con latenze imprevedibili, ogni kilobyte conta. Cominciate con un audit tecnico completo usando Chrome DevTools e WebPageTest: analizzate il waterfall per identificare risorse bloccanti, richieste sincrone, e tempi di parsing. Focalizzatevi su CSS critico e JavaScript non essenziale: un singolo file JS di 1,2MB può ritardare il render iniziale di oltre 800ms. Utilizzate la scheda “Performance” di DevTools per misurare il LCP (Largest Contentful Paint) e correlarlo al peso totale delle risorse caricate.
Takeaway immediato: Calcolate il peso totale delle risorse e confrontatelo con il limite consigliato da Core Web Vitals per il contesto italiano (LCP < 2,5s, FID < 100ms).
Fase 2: Categorizzazione avanzata delle risorse – non tutte le risorse sono uguali. Separate in base a criticità e impatto:
– **Critico**: immagini < 100KB in formato WebP o AVIF, font essenziali, CSS inline per la viewport, script di tracking prioritari.
– **Secondario**: video in H.265 con fallback MP4, immagini responsive estese, script di funzionalità non bloccanti.
– **Non critico**: immagini > 500KB, font decorativi, video in alta risoluzione, script di analytics secondari.
**Metodo pratico**: creare un file JSON di categorizzazione automatizzato (es. in JavaScript) che assegna tag e priorità in base a dimensione, formato e posizionamento DOM.
Esempio pratico: Script JS per categorizzare risorse in tempo reale:
const resources = Array.from(document.head.getElementsByTagName(‘link’)).concat(Array.from(document.body.getElementsByTagName(‘img’)));
const categorized = resources.map(r => ({
url: r.href,
type: r.tagName,
size: r.naturalHeight || r.naturalWidth || r.dataset.size || r.naturalLength,
category: r.src?.endsWith(‘.webp’) ? ‘Critico’ : r.src?.endsWith(‘.mp4’) ? ‘Secondario’ : ‘Non critico’
}));
console.log(‘Categorizzazione:’, categorized.slice(0, 15));
Questo permette di applicare strategie di caricamento differenziato fin dalla fase iniziale.
Fase 3: Ottimizzazione tecnica mirata. Per le immagini, adottate formati moderni: WebP riduce il peso del 30-50% rispetto a JPEG senza perdita percettiva; AVIF fino al 60% in più, ma con supporto limitato su browser legacy – usate fallback AVIF/WEBP con `
Per JavaScript, applichete il code splitting dinamico con Webpack o Vite: caricare solo il bundle necessario per la pagina corrente, deferring il resto. Esempio di configurazione Vite per chunk on-demand:
import { defineConfig } from ‘vite’;
export default defineConfig({
build: {
rollupOptions: { input: ‘src/main.js’, output: { manualChunks: (id) => id.includes(‘components’) ? ‘ui’ : ‘lib’ } }
}
});
Dati reali: un sito multilingue italiano con 12 pagine ha ridotto il peso totale da 4,3MB a 1,1MB grazie a WebP, lazy loading e code splitting, migliorando il LCP da 3,8s a 1,6s.
Fase 4: Gestione strategica della cache e priorità. Differenziate le policy di cache: risorse Tier 1 (CSS, JS essenziali) con TTL lungo (6-12 mesi) e cache aggressiva; risorse Tier 2 (immagini, video) con cache più breve (30-90 giorni) e versioning basato su hash per evitare asset obsoleti. Configurate Cache-Control e ETag con regole precise:
Cache-Control: public, max-age=31536000, immutable (per JS/CSS statici)
ETag: «abc123» (versione hash del file)
Per utenti italiani, implementate caching geolocalizzato con CDN (es. Cloudflare con regole geografiche) per ridurre latenza e consumo dati, soprattutto su reti mobili.
Errore comune: Cache mal configurata → asset vecchi serviti a causa di TTL errato → bounce e perdita di fiducia. Soluzione: versioning tramite hash e invalidazione forzata via tag query.
Fase 5: Preloading selettivo e risorse critiche. Usate “ per font critici, script inline essenziali e immagini above-the-fold. Esempio: