Aiuto e documentazione
Velocità Impatto basso Medio 15–30 min
Precaricamento delle risorse chiave (preload)
Le risorse importanti si possono caricare prima tramite rel="preload".
Cos'è
rel="preload" indica al browser di scaricare in anticipo, con alta priorità, una risorsa che servirà presto (immagine principale above the fold, font chiave, critical CSS).
Perché è importante
Senza preload il browser scopre alcune risorse importanti tardi (ad es. un font referenziato solo dal CSS), il che ne ritarda la comparsa. Il preload lo accelera e migliora l'LCP.
Come fare
- 1Precarica l'immagine LCP (l'elemento visivo principale above the fold).
- 2Precarica i font chiave e aggiungi font-display: swap.
- 3Non esagerare, precaricare tutto disperde la priorità e danneggia.
Esempio
Corretto
<link rel="preload" href="/fonts/jakarta.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/img/hero.webp" as="image">Conclusione
Il preload è uno strumento mirato per poche risorse davvero chiave (immagine LCP, font principale). Usato con criterio migliora l'LCP; usato in modo generalizzato al contrario danneggia. Meno è meglio.
Argomenti correlati