Componi i tag link rel preload utili

I team web lo usano quando una risorsa decisiva merita priorità ma precaricare tutto sprecherebbe banda.

Componi i tag link rel preload utili. I dati restano sul dispositivo e il risultato è facile da controllare e riutilizzare.

Come si usa

Elenca una risorsa per riga, come un file di font o un'immagine chiave.
Usa i percorsi esatti richiesti dalla tua pagina.
Avvia il generatore per creare i tag link rel preload.
Inserisci quei tag nel head prima di altre risorse prioritarie.

Esempio

Un team nota che il font del titolo arriva in ritardo e sposta il layout. Elenca il file di font usato dalla pagina, genera i tag di precaricamento e li posiziona nel head. Questo aiuta a evitare di precaricare ogni risorsa del sito. Un test su rete lenta mostra poi se la priorità del font è utile.

Input

/assets/font.woff2
/assets/hero.webp

Limiti e formati

Il precaricamento è utile solo per poche risorse davvero critiche.
Un percorso errato impedisce al browser di trovare il file.
Troppi tag possono ritardare altri elementi utili.
Lo strumento non controlla se la risorsa è già nella cache.
I browser possono ignorare un precaricamento inutile o malformato.

Dove avviene il trattamento

I percorsi che inserisci vengono trasformati in tag all'interno del tuo browser. Nessun file viene inviato all'esterno e lo strumento non attiva chiamate di rete. Il codice generato rimane disponibile per la copia.

Domande frequenti

Quali risorse dovrei precaricare?

Riserva il precaricamento ai file necessari al primo rendering, come un font per i titoli o un'immagine hero. Precaricare troppi elementi indebolisce il segnale di priorità. Controlla con gli strumenti del browser se la modifica aiuta.

In cosa è diverso dal caricamento differito?

Il precaricamento chiede al browser di recuperare una risorsa prima. Il caricamento differito ritarda le risorse che non servono ancora. Risolvono problemi opposti e dovrebbero essere usati per risorse diverse.

Posso precaricare un font esterno?

Puoi inserire un percorso relativo o assoluto a seconda della configurazione. Assicurati che corrisponda al file che la tua pagina serve effettivamente. Le regole cross-origin e di sicurezza possono comunque influire su come il browser lo usa.