Profitant de la récente mise à jour du fabuleux outil d’analyse WebPageTest1, j’ai entrepris de comparer la performance de la page d’accueil de NoPhysic, avec le CSS soit en ligne, soit externe.
Les résultats
Vous pouvez retrouver les données fournies par l’outil sous forme de graphiques en cascades, en suivant les liens ci-dessous.
J’ai aussi rassemblé les données les plus pertinentes dans un petit tableau :
| CSS | Rendu débute | Rendu terminé | Bonus avec cache | Bonus sans cache |
|---|---|---|---|---|
| externe | 0,55 | 1,28 | 0,01 | non |
| interne | 0,31 | 1,10 | non | 0,20 |
Note : dans mon étude, les pages HTML sont servies gzippées. La pénalité qu’engendre le CSS en ligne serait plus importante autrement.
Analyse des résultats
La différence la plus marquante lorsque l’on regarde les deux graphiques en cascades, c’est la barre vertical qui indique le début du rendu de la page : elle arrive bien plus tôt dans le cas du CSS interne. C’est un avantage important je pense, car un rendu qui commence tôt donnera au visiteur une impression de grande réactivité.
Un deuxième avantage du CSS en ligne est que la page est rendue plus rapidement dans son ensemble. Cela tient au fait que non seulement on économise 75 ms de connexion au serveur et 100 ms d’attente pour le 1er octet, mais surtout que l’on évite d’attendre d’avoir le fichier CSS entièrement téléchargé avant de s’occuper de récupérer les images de background qu’il précise. On saute une marche de l’escalier.
Le seul inconvénient du CSS interne en fin de compte — hormis le fait qu’il est moins pratique à gérer et qu’il rend le code source moins lisible — est bien sûr son impossibilité d’exploiter le cache du navigateur. Cependant, sauf dans quelques cas particuliers que je traite plus bas, cet inconvénient n’entrave pas ses performances, bien supérieures à celles du CSS externe.
Conclusions
Même si cela rend le code source moins lisible, si vous avez la possibilité de mettre votre CSS directement en ligne dans les pages HTML, faites le. La page semblera plus réactive, et sera prête plus tôt.
Bien sûr dans certains cas, ce n’est pas rentable :
- si votre fichier CSS est énorme, vous allez vouloir exploiter le cache et donc l’externaliser ;
- si le nombre de pages lues par chacun de vos visiteurs est élevé, là aussi vous voudrez profiter du cache ;
- si votre besoin d’organisation est plus important que la performance de vos pages2.
En conclusion, je vous engage à tester vous-même et comparer les résultats. N’hésitez pas à me faire part de vos découvertes via le mini formulaire plus bas.
- Pour les utilisateurs mac, je pense que c’est l’outil le plus poussé que l’on puisse trouver. ↩
- J’estime cependant que l’organisation du code est un faux problème, puisqu’il est facile de travailler dans des fichiers CSS externes proprement, et de créer un processus automatisé qui va récupérer ces données, les compacter, et les injecter dans les pages HTML. ↩
Message express à l’auteur