Chargez vos CSS de manière asynchrone

Mais qu’est ce qu’il dit il a encore pété une durite 🙁

MAIS OUIIIIIIIII ! et alors ?

Allez parlons peut parlons bien

Que se passe-il lorsque le navigateur charge un fichier css qui se trouve dans la balise <head> ?

Si vous avez testé votre site sur Google PageSpeed vous avez vu qu’il vous crie dessus quand vous avez du CSS ou du JS dans le header, et il à raison (sale gosse, oui ce blog le fait mais la flemme de modifier WordPress pour corriger ça).

Alors que faire ? mettre les CSS en bas de page est une option mais a chaque chargement de page la page s’affichera sans style pendant un bref instant avant que le CSS soit chargé, c’est moche BOUUUHHHHHHHH.

L’autre solution consiste à exploiter à fond le cache du navigateur, vous savez en ajoutant un « cache-control » dans le header de la réponse HTTP pour que le navigateur garde le fichier sur le disque du client (la base quoi !).

On va également charger le CSS de manière asynchrone, le navigateur ne va pas attendre de traiter le fichier CSS pour continuer a lire le contenu de la page, si si TE JURE ! 😀

Sur github on trouve un script qui fait ça la fonction qui nous intéresse est celle-ci :

Cette fonction on va la minimifié avec Yui Compressor (le truc de Yahoooooo là qui permet de compresser le CSS et le JS)

Bref une fois compressé ça donne ça :

Vous n’avez plus qu’a insérer ceci en haut de votre page dans le header puis utiliser cette fonction de manière asynchrone pour charger votre (vos ?) CSS comme ceci :

Pensez également a utiliser une balise <noscript></noscript> avec du code plus traditionnel pour les utilisateurs qui bloquent le javascript (ça se fait encore en 2015 ? ah bon ? :o)

Oué mais ton truc là c’est naze, on met du JS dans la page donc on exploite pas le cache du navigateur pour cette fonction.

Très juste, mais le problème c’est qu’ici on souhaite que le CSS se charge de manière asynchrone, si on mettais ça dans un fichier .js il faudrait que le navigateur charge ce fichier (ou alors avec la balyse « async ») et Page Speed ne serait pas content car (du contenu bloque l’affichage de la ligne de flottaison) Après la fonction est compressé et ne prends pas tant de place que ça donc c’est « tolérable » (mais faites gaffe hein, je vous ai à l’œil !).

Maintenant il est possible qu’au premier chargement de page la page s’affiche pendant quelques millisecondes sans style mais une fois le premier chargement effectué elle sera en cache dans le navigateur (si bien-sure vous y avez penser !) et par la suite cet effet ne se fera plus, la différence est que vous gagnerez quelques MS a l’affichage de la page car le navigateur n’attendra pas de finir de traiter votre fichier CSS pour continuer la lecture de la page) même si ça se voit quasiment pas c’est intéressant de savoir que « oui on peut charger des CSS de manière asynchrone ».

Après le réel gain est de gagner des points sur PageSpeed mais avec SPDY et une bonne gestion du cache je ne pense pas qu’il y ai une réel différence, vous pouvez utiliser ça pour proposer un changement de thème à la volée sur votre site par exemple 😀

Vous avez aimé cet article ? Partagez-le :)

Facebook Google Plus Twitter Linkedin email

2 réflexions au sujet de « Chargez vos CSS de manière asynchrone »

  1. Bonjour,

    Merci pour cette astuce, ça a l’air pas mal !
    Juste quelques questions pour une junior.. A quel niveau doit-on intégrer l’url du css dans le script ?
    Mettons qu’on a plusieurs css à faire passer en asynchrone, comment faire pour que ce script les gère tous ?

    • Vu que les la fonction les charge de manière Aynschrone vous pouvez mettre ça dans le header, la fonction mimifier en premier dans une balise script puis plus bas vous faites dans une autre balise script loadCSS(« URL_DU_CSS »); vous pouvez en charger plusieurs comme ça dans une balise script
      loadCSS(« URL_DU_CSS1 »);
      loadCSS(« URL_DU_CSS2 »);
      loadCSS(« URL_DU_CSS3 »);

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *