Preload, prefetch e preconnect
Indicare al browser di recuperare in anticipo le risorse critiche
Preload, prefetch e preconnect è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.
Perché usare i resource hint
I browser moderni individuano le risorse solo durante l'analisi dell'HTML. I resource hint (attributi rel di link nell'<head>) consentono di comunicare al browser "ne avrò bisogno presto", così la richiesta di rete inizia prima di quanto normalmente permetterebbe l'individuazione.
preload carica subito
<link rel="preload" as="..." href="..."> indica al browser di recuperare immediatamente la risorsa con la priorità appropriata al tipo specificato da as. Lo utilizzi per gli asset di cui la pagina avrà sicuramente bisogno: immagini hero, font critici e JavaScript specifico della route.
<link rel="preload" as="font" type="font/woff2" href="/inter.woff2" crossorigin>L'attributo as
Imposti sempre as: determina la priorità della richiesta, l'intestazione Accept e l'applicazione della CSP. Valori comuni: "script", "style", "font", "image", "fetch". Senza as, i browser ignorano il preload e registrano un avviso.
crossorigin per i font
I preload dei font richiedono crossorigin anche quando il font ha la stessa origine. Senza questo attributo, il browser recupera il font in modalità CORS per l'uso effettivo, ma in modalità anonima per il preload, raddoppiando il download: un problema di prestazioni comune ma difficile da individuare.
prefetch carica in seguito
<link rel="prefetch" href="..."> suggerisce che una risorsa sarà necessaria per una navigazione futura. Il browser la recupera con la priorità più bassa durante i periodi di inattività, quindi la memorizza nella cache affinché la pagina successiva venga visualizzata istantaneamente.
<link rel="prefetch" href="/next-page.html">preconnect prepara le connessioni
<link rel="preconnect" href="https://api.example.com"> indica al browser di eseguire la risoluzione DNS e l'handshake TCP e TLS verso un'origine di terze parti prima che arrivi la prima richiesta. Lo utilizzi per gli host API e i CDN che la pagina contatterà.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>dns-prefetch è il cugino più leggero
<link rel="dns-prefetch"> esegue solo la ricerca DNS, con un costo inferiore rispetto a preconnect. Lo utilizzi per molti host di terze parti quando non può permettersi un preconnect completo per ciascuno; abbini preconnect alle poche origini più importanti.
Limiti dei resource hint
Un numero eccessivo di preload compete per la stessa larghezza di banda e rallenta la pagina. Precarichi solo le risorse che bloccano il percorso di rendering critico, in genere un'immagine hero e uno o due font critici. Per tutto il resto, può affidarsi all'individuazione normale.
modulepreload per i moduli ES
<link rel="modulepreload" href="/app.js"> precarica non solo il file del modulo, ma anche il relativo albero delle dipendenze. In questo modo evita il download a cascata tipico dei moduli ES nativi, in cui ogni import attende l'analisi di quello precedente.
Misurare l'impatto
Utilizzi la colonna Initiator del pannello Network per verificare che le risorse precaricate vengano effettivamente recuperate in anticipo e l'audit "Preconnect to required origins" di Lighthouse per individuare le opportunità mancate. Rimuovere un preload lento ma inutilizzato spesso porta vantaggi pari a quelli ottenuti aggiungendone uno efficace.
Particolarità di ciascun hint
preload attiva un avviso nella console se la risorsa non viene utilizzata entro circa 3 secondi. prefetch può essere annullato dal browser in condizioni di pressione sulla rete o sulla memoria. Le connessioni preconnect vengono chiuse dopo circa 10 secondi di inattività: lo utilizzi per le risorse che verranno richieste a breve.
Verifica delle conoscenze
Che cosa fa preconnect che dns-prefetch non fa?
Riepilogo
preload recupera subito le risorse critiche (con as e crossorigin quando necessario). prefetch memorizza nella cache le risorse probabili della navigazione successiva durante i periodi di inattività. preconnect (TCP+TLS) e dns-prefetch (solo DNS) preparano le connessioni verso origini di terze parti. modulepreload estende preload all'albero delle dipendenze dei moduli ES. Li utilizzi con moderazione e ne misuri l'impatto.
Domande Frequenti
La lezione «Preload, prefetch e preconnect» è gratuita?
Sì — il testo completo di «Preload, prefetch e preconnect» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.
Cosa imparerò in «Preload, prefetch e preconnect»?
Indicare al browser di recuperare in anticipo le risorse critiche Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML Academy?
Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Preload, prefetch e preconnect»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML Academy?
Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Gli attributi async e defer
- Preload, prefetch e preconnect
- Caricamento differito delle immagini: loading=lazy
- Resource hints: modulepreload