Generatore di preload, preconnect e dns-prefetch

Generatore di preload, preconnect e dns-prefetch: a cosa serve

I resource hint sono tag nell’<head> che avvisano il browser di ciò di cui la pagina avrà bisogno, così anticipa connessioni e download. Usati con moderazione, accorciano il tempo prima che compaia il contenuto principale; usati troppo, peggiorano le cose.

Incolla gli indirizzi o l’HTML della pagina e lo strumento sceglie: preconnect (con crossorigin per i font) per al massimo tre domini importanti, dns-prefetch per il resto e per gli script di analisi, preload solo per uno o due font e per l’immagine principale con fetchpriority=high, e prefetch per la probabile pagina successiva. Ogni tag viene con il motivo.

Come si usa

1. Incolla gli indirizzi o l’HTML.
2. Controlla il dominio, l’immagine principale e la pagina successiva.
3. Copia i tag nell’<head>.

Quando usarlo

• Siti con Google Fonts.
• Pagine con un’immagine grande in cima.
• Migliorare l’LCP dei Core Web Vitals.

Domande frequenti

Qual è la differenza tra preconnect e dns-prefetch?

Il preconnect apre l’intera connessione con l’altro dominio (DNS, TCP e TLS) prima che il browser ne abbia bisogno. Il dns-prefetch risolve solo il DNS, è più economico e serve per domini meno importanti. Usa preconnect su pochi domini, due o tre, e dns-prefetch sul resto.

Quando usare il preload?

Solo per risorse critiche che il browser scopre tardi, come il font del titolo (nascosto dentro il CSS) o l’immagine principale impostata come sfondo dal CSS. Troppi preload competono per la banda con ciò che conta e rallentano il sito.

Perché il font ha bisogno di crossorigin?

I font vengono sempre richiesti in modalità CORS. Senza l’attributo crossorigin nel preload o nel preconnect, il browser non riutilizza ciò che ha già scaricato e finisce per richiedere il font due volte.

È davvero gratis?

Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.

Strumenti simili