rel = précharge pour la feuille de style n'applique pas les styles une fois téléchargés
J'essaye rel=preload pour la première fois, en l'utilisant pour quelques feuilles de style. Voici le code en question:
<link rel="preload" href="css/styles.css" as="style">
<link rel="preload" href="//allyoucan.cloud/cdn/icofont/1.0.0beta/css/icofont.css" crossorigin="anonymous" as="style">
Je teste en Chrome 61, et je peux voir que les feuilles de style sont téléchargées comme prévu, mais elles ne sont jamais réellement appliquées, et je reçois le message sur la console disant qu'une ressource préchargée n'est pas utilisé.
Si je supprime le rel=preload en faveur de juste rel=stylesheet, alors cela fonctionne parfaitement.
Y a-t-il quelque chose qui me manque?
Vous devez avoir 2 lignes pour chacune avec rel = feuille de style et une avec rel = précharge. Comme la précharge le récupère et ne l'applique pas.
Cependant, vous ne remarquerez probablement pas beaucoup d'amélioration des performances car elle atteint une ligne juste avant l'autre.
La meilleure option est d'inclure le css ( voir ici ) qui est vu au-dessus du pli, puis d'utiliser javascript pour l'ajouter dans le fichier css au chargement de la page ( voir ici ) .
Que pensez-vous de cette approche:
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">