5546 sujets

Sémantique web et HTML

Utilité de l'attribut HTML preload ?

Bonjour à vous tous,

Je viens de découvrir l'attribut HTML preload, il est utilisé pour indiquer au navigateur qu'il doit charger une ressource en amont (par exemple une feuille de styles), c'est-à-dire avant que cette ressource ne soit requise par la page html. Cela peut aider à optimiser les performances en réduisant le temps de chargement global de la page, car les ressources préchargées seront disponibles en mémoire cache lorsque la page en aura besoin.

Voici un exemple d'utilisation de l'attribut preload pour précharger une feuille de style CSS :
<!DOCTYPE html>
<html>
<head>
   <link rel="preload" href="styles.css" as="style">
   <link rel="stylesheet" href="styles.css">
</head>
<body>
   <!-- Contenu de la page -->
</body>
</html>

Pensez-vous que cela soit utile de l'utiliser dans le <head> pour améliorer l'expérience utilisateur en accélérant les chargements ?

Merci pour vos remarques, et
que le code soit avec vous !
Modifié par ObiJuanKenobi (31 Aug 2023 - 19:39)
Non c’est complètement inutile.

Le body n’est lu qu’une fois le head chargé. On commencera à lire le premier caractère du body une fois que les feuilles de styles (correspondant au bon media) auront été chargées en entier. C’est pour cela que l’on met les feuilles de style dans le head, sinon on pourrait voir le corps de la page changer de couleur ou de taille de caractère si les feuilles de style et le contenu de la page pouvaient être lus en parallèle !
Modifié par adrien881 (31 Aug 2023 - 20:57)
adrien881 a écrit :
Non c’est complètement inutile.

Le body n’est lu qu’une fois le head chargé. On commencera à lire le premier caractère du body une fois que les feuilles de styles (correspondant au bon media) auront été chargées en entier. C’est pour cela que l’on met les feuilles de style dans le head, sinon on pourrait voir le corps de la page changer de couleur ou de taille de caractère si les feuilles de style et le contenu de la page pouvaient être lus en parallèle !


J'ai comme un doute que le chargement d'un tel CSS soit bloquant pour la lecture du body.
J'ai déjà *vu* des pages web dont le CSS n'a pas voulu se charger...
kerlutinoec a écrit :


J'ai comme un doute que le chargement d'un tel CSS soit bloquant pour la lecture du body.
J'ai déjà *vu* des pages web dont le CSS n'a pas voulu se charger...


S’il y a une erreur dans l’adresse du fichier css définit dans le head, le serveur renverra une erreur HTML 404 pour ce fichier css. Une fois que le navigateur aura reçu cette erreur, effectivement il ne bloquera pas le chargement du body.
Mais, le body est chargé après que le navigateur ait analysé le contenu de la balise <head>. C’est pourquoi on déconseille d’appeler du javascript dans le head, car cela ralentit le chargement de la page.
Prévenir un modérateur
Répondre au sujet
Aller à