jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils HTML

Gratuit Constructeur de balises preload

Générez des balises link preload correctes pour les polices, images hero, CSS et scripts.

Chargement de l'outil...

Qu'est-ce que Constructeur de balises preload ?

Preload demande au navigateur de recuperer une ressource tot, avant qu'elle ne soit normalement decouverte. Cela accelere le chargement des polices, des images hero, du CSS critique et des scripts. L'attribut as est obligatoire pour indiquer au navigateur quel type de ressource attendre. L'absence de as ou un crossorigin incorrect sont des erreurs courantes.

Réponse rapide

Utilisez preload pour recuperer les ressources critiques -- comme les images hero, les polices ou le CSS au-dessus de la ligne de flottaison -- avant que l'analyseur ne les decouvre. Ne prechargez que quelques ressources par page pour eviter la concurrence de bande passante.

Last updated: 2026-05-25

Limites

  • Preload necessite l'attribut as. L'omettre ou utiliser une valeur incorrecte peut amener le navigateur a recuperer la ressource deux fois.
  • Les ressources prechargees inter-origines, comme les polices provenant d'un CDN, doivent inclure l'attribut crossorigin.
  • Un prechargement excessif retarde les autres ressources et peut nuire aux performances au lieu de les aider.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Selectionnez le type de ressource a precharger : police, image, CSS ou script.
  2. Saisissez l'URL ou le chemin du fichier de la ressource.
  3. L'outil ajoute les attributs as et crossorigin corrects pour le type selectionne.
  4. Copiez la balise link dans l'en-tete de la page avant les autres references de ressources.

A quoi il sert

  • Precharger un fichier de police critique pour que le texte s'affiche correctement des le premier affichage.
  • Precharger une image hero pour ameliorer le Largest Contentful Paint.
  • Precharger un fichier CSS critique ou un module JavaScript pour un rendu plus rapide.

Cas d'usage

Exemples concrets

Exemple

Prechargement de police web

Une page utilise une police web personnalisee. La balise preload avec as='font' et crossorigin la recupere tot, reduisant le flash de texte invisible.

Exemple

Prechargement d'image hero pour LCP

Une page d'accueil precharge l'image hero d'arriere-plan avec as='image' pour reduire le temps du Largest Contentful Paint de plusieurs centaines de millisecondes.

Erreurs frequentes

  • Precharger trop de ressources, ce qui gaspille de la bande passante.
  • Utiliser preload sans l'attribut as requis.
  • Ajouter preload pour des polices inter-origines sans l'attribut crossorigin.

Vérification

  1. Ouvrez le panneau Reseau de Chrome DevTools et verifiez que la ressource prechargee apparaît tot dans la cascade de requetes avec la Priorite correcte.
  2. Verifiez dans la console du navigateur les avertissements de preload manquant, comme 'The resource was already loaded and preload was not used'.

Comparaison

preload vs prefetch vs modulepreload

Aspectpreloadprefetchmodulepreload
What it loadsResources needed for the current pageResources likely needed for the next navigationES module scripts for the current page
When the browser fetches itImmediately, at high priority during page loadDuring idle time after the current page finishes loadingImmediately at high priority, similar to preload, but fetches the module and its dependencies
What it is best forCritical fonts, hero images, above-the-fold CSSNext-page resources such as docs, images, or scripts for the likely next pageES module entry points and their dependency trees in modern bundler output
Required attributesrel="preload" and the as attributerel="prefetch"rel="modulepreload"
Browser support milestoneChrome 50+, Safari 9+, Firefox 56+Chrome 50+, Safari 9+, Firefox 2+Chrome 80+, Safari 15+, Firefox 115+

Preload fetches current-page resources early at high priority. Prefetch fetches likely next-page resources during idle time. Modulepreload is a specialized preload for ES module scripts and their dependencies.

FAQ

Questions sur Constructeur de balises preload

Quelle est la difference entre preload et prefetch ?

Preload recupere les ressources necessaires a la page actuelle le plus tot possible. Prefetch recupere les ressources probablement necessaires pour la navigation suivante.

Dois-je tout precharger ?

Non. Prechargez un petit nombre de ressources vraiment critiques. Trop d'indications preload retardent les ressources importantes.

Ai-je besoin de l'attribut as sur chaque lien preload ?

Oui. L'attribut as est obligatoire sur les liens preload. Il indique au navigateur le type de ressource chargee (style, script, font, image, fetch, etc.) afin qu'il puisse appliquer la priorisation correcte, les verifications de Content-Security-Policy et les regles de mise en cache.

Que se passe-t-il si une ressource prechargee n'est pas utilisee en quelques secondes ?

Le navigateur emet un avertissement dans la console et la ressource prechargee peut etre ignoree. Les precharges inutilisees gaspillent de la bande passante et concurrencent les ressources vraiment critiques.

Outils lies

Autres outils outils html

A essayer aussi

A essayer aussi