# preload, prefetch e fetchpriority: quale usare preload anticipa una risorsa critica, prefetch prepara la pagina successiva, fetchpriority cambia l'ordine. Tre strumenti diversi, tre errori da evitare. > Pagina: https://ui.eneawork.it/blog/preload-prefetch-priority > Markdown: https://ui.eneawork.it/blog/preload-prefetch-priority.md *2026-11-01* preload scarica subito una risorsa che serve a questa pagina, prefetch prepara una risorsa per la pagina successiva, fetchpriority cambia la priorità di una richiesta già presente nell'HTML. Sono tre strumenti diversi e si sostituiscono male. Abbiamo misurato client/dist/index.html il 1 novembre 2026: 5 per i font, 1 modulepreload per il chunk vendor da 141.671 byte e il CSS servito con media="print" più uno switch da JavaScript. La domanda «What are the differences between preload and prefetch in HTML?» vale 83 voti su Stack Overflow, letta il 1 novembre 2026 con la Stack Exchange API. Il catalogo EneUI misura 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, letti da /api/stats il 1 novembre 2026. Le definizioni vengono da MDN, licenza CC BY-SA 2.5. ## Le tre direttive in una tabella ## L'errore uno: preload su tutto Ogni preload compete con le altre richieste. Con cinque preload il browser li mette davanti al CSS e la pagina aspetta la risorsa sbagliata. Un preload non usato entro 3 secondi produce un avviso in console. curl -s https://ui.eneawork.it/ | grep -o 'rel="preload"' | wc -l Il comando conta i preload dichiarati nell'HTML servito. Sulla home il risultato è 5 e sono tutti font: nessuna immagine ha bisogno di un preload in più. ## Il preload che scarica due volte Un preload senza as, o con crossorigin diverso dal tag che lo riusa, produce due richieste. I font richiedono sempre crossorigin, anche quando arrivano dallo stesso dominio. La prima riga anticipa il font. La seconda dichiara l'immagine LCP senza aggiungere una richiesta, perché il browser la trova comunque nel markup. ## prefetch: quando conviene prefetch consuma banda per una pagina che l'utente può non aprire. Usalo su una sola rotta con probabilità alta, per esempio il link ai prezzi dalla home, e mai su mobile con dati a consumo. ## La limitazione Queste direttive sono suggerimenti: il browser può ignorarle e cambiare priorità in base alla connessione e al viewport. Anche l'ordine HTTP/2 conta, quindi una priorità più alta nel markup non garantisce un arrivo prima. ## Dove continuare Il catalogo EneUI indicizza 111.985 componenti e 12.808 icone con preview. Il record scroll expansion hero è una hero con immagine grande: è il caso in cui vale la pena misurare il preload. Per il lazy loading leggi quando il lazy loading peggiora, per le soglie Core Web Vitals, per le immagini in Next.js next/image. ## FAQ ### Devo fare preload del font? Sì, se il font è quello usato dall'elemento LCP. Il preload deve dichiarare as="font", type e crossorigin, altrimenti il browser scarica il file due volte. ### preload sostituisce fetchpriority? No. preload crea una richiesta anticipata, fetchpriority cambia la priorità di una richiesta che esiste già nell'HTML. Sull'immagine LCP di solito basta fetchpriority. ### prefetch è dannoso? Può esserlo: consuma banda e cache per una pagina che l'utente può non visitare. Va limitato a una rotta con probabilità alta e alleggerito su mobile. ### Perché la console segna un preload non usato? Perché la risorsa è stata scaricata e non richiesta entro pochi secondi. Di solito è un preload duplicato, un as sbagliato o una risorsa che il layout non usa più. ### Funziona anche su Safari? preload e prefetch sono supportati; fetchpriority è arrivato più tardi e sulle versioni vecchie viene ignorato senza errori. Il peggior caso è l'ordine predefinito.