Link rel="preload"

[saluts92]

Je suis passé un peu à coté de rel="preload" pour la balise LINK, et je souhaite le mettre en place pour mes fichier CSS et JQUERY

1/ je n'arrive pas à savoir s'il y a un réel gain de chargement (parallélisme avec le html, ..) ou s'il s'agit simplement de priorisation des chargements

2/ concernant la syntaxe certain (dont WRI) rajoute onload="this.onload=null;this.rel='stylesheet'" dans la balise LINK et d'autres non. Est ce obligatoire ? que se passe t-il si on le met pas ?

D'avance merci

 

[nicodak]

Très intéressant.

 

[aMoN12]

Hello, non ce n'est pas obligatoire.

Cela permet juste de charger des fichiers CSS de manière asynchrone afin que le rendu de la page ne soit pas bloqué pendant le chargement de la feuille de style, je l'utilise sur mes sites (no WP).

 

[saluts92]

Cela permet juste de charger des fichiers CSS de manière asynchrone

Ok mais alors à quoi sert d'utiliser "preload" si le "onload" le charge après le chargement de la page ?

 

[aMoN12]

link rel = "preload" as = "style" appelle la feuille de style de manière asynchrone.

A ne pas mélanger avec l''attribut onload qui, dans le lien, permet au CSS d'être traité une fois le chargement terminé.

onload=null : En "annulant" le gestionnaire onload une fois qu'il est utilisé, certains navigateurs évitent de le rappeler lors du changement de l'attribut rel.

En général on utilise un <noscript > juste après comme une solution de secours pour les navigateurs qui n'exécutent pas JavaScript.

 

[saluts92]

A ne pas mélanger avec l''attribut onload qui, dans le lien, permet au CSS d'être traité une fois le chargement terminé.

OK, mais que se passe t-il si on ne met pas le onload stp ?

 

[colonies]

OK, mais que se passe t-il si on ne met pas le onload stp ?

La page peut être affichée une fois la CSS chargée. Comme si tu n'avais pas preload, en fait.

Link rel=preload sur une CSS qui est présente directement en balise link dans le HTML ne sert à rien, les feuilles de styles étant déjà des ressources avec une priorité haute et le navigateur pouvant les détecter au même moment qu'il détecte les preload.

Ce à quoi sert preload dans le HTML, c'est à indiquer au navigateur des sources qu'il ne peut pas découvrir immédiatement dans une première lecture du HTML. Par exemple, un fichier de police de caractères qui est dans une CSS externe : normalement le navigateur devrait lire la CSS, puis la parser pour découvrir qu'il aura besoin de la police et démarrer son téléchargement.
Si tu as mis la police en preload, elle aura commencé son chargement dès le parsing du HTML.

Preload sert également à donner une haute priorité à des ressources qui normalement ont une priorité basse, notamment les background-image. Si ta page a un header avec une telle image et qu'elle est importante, tu peux la mettre en preload pour accélérer son chargement.

Une (ou des) ressource en preload peut aussi être indiquée en header HTTP, ce qui active le server push sur un serveur supportant HTTP2 (qui n'est pas trop ancien, en somme).
Par exemple avec Apache : https://httpd.apache.org/docs/2.4/fr/howto/http2.html#push

Dans ce cas, les ressources sont directement envoyées au navigateur après le HTML sans qu'il ait demandé quoi que ce soit, et il arrêtera les transferts s'il n'a pas besoin des dites ressources. C'est à manier avec précaution et seulement si on sait ce qu'on fait, et ça demande de faire des tests avant de mettre en production. Bien utilisé, ça permet d'améliorer les performances. Utilisé sans trop comprendre comment ça marche, ça a plutôt tendance à détériorer les perfs.