Link rel="preload"

Très intéressant.

 

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).

 

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.

 

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.