Chargez vos CSS de manière asynchrone

ludo@hey.com

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 ?

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 :