La différence réelle entre la feuille de style dans l'en-tête et un fichier séparé
On m'a toujours appris à avoir tous les CSS dans un fichier séparé qui est référencé à partir du début de la page. Reading cet article , l'auteur parle de rendre le site Web Guardian réactif. Une des choses qu'il a faites pour rendre le site plus rapide et plus résistant consiste à ajouter le CSS en ligne dans l'en-tête, réduisant ainsi le nombre de requêtes HTTP.
Cela m’a amené à réfléchir au moyen le plus approprié/le plus rapide d’utiliser le CSS.
Si vous avez un fichier CSS principal, il sera appelé et lu par le site sur chaque page, quelle que soit sa taille. Donc, dans cet esprit, je commence à penser qu'il vaut mieux aligner toute la feuille de style et supprimer un aller-retour HTTP.
Je sais que pour des raisons de propreté et de pouvoir modifier le fichier, un fichier séparé est préférable.
Mais que recommanderiez-vous et lequel pensez-vous est le plus rapide?
Sans réellement lire leur article, je peux affirmer que leur logique est erronée. Les fichiers CSS sont demandés une seule fois et mis en cache par le navigateur (sauf si vous bloquez intentionnellement ce comportement). Le résultat est une seule requête HTTP supplémentaire pour obtenir le fichier CSS (ce qui devrait être rapide si vous êtes compresser votre conten ). Toutes les autres pages se chargent ensuite plus rapidement car le client n'a pas à télécharger tout le contenu CSS encore et encore.
Pour les meilleures pratiques, le CSS externe est bon, mais si vous avez appliqué le CSS en ligne et le CSS externe à une même page, le CSS en ligne aura la priorité. La priorité de CSS est la suivante:
- cSS en ligne
- CSS dans l'en-tête
- cSS externe