Optimisations PageSpeed (5 sur 31) : Combine external CSS

Avec la règle Combine external CSS, Google invite à combiner les feuilles de styles externes. Il paraît que ça permet d’améliorer la vitesse de chargement d’une page.
Comment ça ? Pourquoi devrais-je changer mon code, c’est quand même bien pratique d’avoir plusieurs appels à des feuilles de styles externes, non ?

D’ailleurs, souvent, c’est le CMS que j’utilise qui fait ce genre de choses sans qu’on ne lui demande rien :
<head>
<link rel="stylesheet" type="text/css" href="fiche1.css">
<link rel="stylesheet" type="text/css" href="fiche2.css">
<link rel="stylesheet" type="text/css" href="fiche3.css">
<link rel="stylesheet" type="text/css" href="fiche4.css">
</head>

Vous reconnaissez ce genre de chose, avouez-le ? Pour tout dire, c’est bien pratique pour moduler les appels à des feuilles de styles selon les pages. Mais vitesse et praticité sont rarement compatibles… Alors il faut s’adapter si la priorité est à la vitesse.

Dans l’exemple précédent, le navigateur va appeler 4 fichiers externes, c’est à dire qu’il va faire 4 appels http. C’est beaucoup alors qu’on pourrait n’en faire qu’un seul en centralisant tout le code CSS dans un seul fichier…

Ce n’est pas vraiment compliqué. Il suffit de faire un fichier global et d’y placer l’ensemble des codes CSS, et de modifier le header de la page.
<head>
<link rel="stylesheet" type="text/css" href="fichierGlobal.css">
</head>

Et voilà, on est bon ! Une seule requête http au lieu de 4, de quoi laisser un peu plus d’air à votre navigateur et votre connexion internet. Combiner les ressources CSS externes, c’est quelque chose de facile à faire et d’efficace !

Bien sûr, c’est aussi très important de minimiser la taille des requêtes http elles-mêmes, mais c’est une autre histoire, une autre bonne pratique, que l’on garde pour un jour prochain.