Devrais-je intégrer tous les fichiers CSS par programme pour optimiser la vitesse de chargement des pages?

Question

Google PageSpeed le suggère souvent à optimiser CSS de livraison. Il me semble que ce serait réduire les allers-retours inline tous les CSS comme ceci:

<style type="text/css">

    @{ 
        var bootstrap = File.ReadAllText(Server.MapPath("bootstrap.min.css"));
        var bootstrapTheme = File.ReadAllText(Server.MapPath("theme.min.css"));
        var fontAwesome = File.ReadAllText(Server.MapPath("font-awesome.min.css"));
        var bigfont = File.ReadAllText(Server.MapPath("bigfont.min.css"));
        var bigfontPrint = File.ReadAllText(Server.MapPath("bigfont-print.min.css"));
    }

    @Html.Raw(bootstrap)
    @Html.Raw(bootstrapTheme)
    @Html.Raw(fontAwesome)
    @Html.Raw(bigfont)
    @Html.Raw(bigfontPrint)

</style>

Cela semble être une solution raisonnable au problème de la lenteur de chargement de la page et a augmenté mon score PageSpeed de 95 à partir de 88.

Mettre le code de style de côté pour le moment, que des raisons techniques, le cas échéant, existent pour ne PAS en doublure de tous les CSS de cette façon?

Answer 1

Inline tous vos CSS signifie qu'il ne peut pas être mis en cache, de sorte que chaque chargement de la page va contenir l'ensemble de la CSS nécessaire, et lorsque vous utilisez de grandes bibliothèques qui peuvent vraiment être beaucoup de gaspillage de la bande passante. Par exemple, Bootstrap est d'environ 120k. Remarque le Google lien que vous avez partagé spécifie les éléments suivants (l'emphase est mienne):

Si le CSS externe, les ressources sont de petite taille, vous pouvez insérer directement dans le code HTML du document, qui est appelé inline.

Donc, un seul chargement de la page peut être plus rapide mais l'ensemble est susceptible d'être plus lente.

Personnellement, je resterais loin de le faire. Cependant, une chose que vous pouvez faire est de regrouper toutes vos CSS en une seule requête (vous êtes en utilisant MVC, donc c'est relativement simple) donc, vous n'avez qu'à faire un seul voyage supplémentaire pour le serveur pour votre CSS et toutes les pages demandées par le navigateur pas besoin de demander pour eux de nouveau.

Answer 2

Personne n'a mentionné l'utilisation prévue cas pour cette technique, qui n'est certainement pas à la charge de 100% de votre css. Plutôt, cette technique est destinée à rendre les utilisateurs pense que la page est chargée plus rapidement.

Lorsque nous discutons de la prise de chargement des pages plus rapide, l'objectif réel est généralement de chargement de la page semble plus rapide. Du point de vue de l'expérience utilisateur, c'est beaucoup plus important que la réalité de la charge de prendre moins de temps. Il n'a pas d'importance si la page entière à prendre 500ms à la charge, car un homme ne peut pas l'analyser rapidement de toute façon. Ce qui importe est la façon dont rapidement la page semble avoir chargé.

Donc, l'utilisation appropriée de cette technique consiste à charger, tout de suite, absolument essentiel css pour faire de la page s'afficher correctement. C'est, il y a quelques règles css qui rendent les images à la bonne taille, qui font des choses qui flottent correctement, qui permettent d'éviter l'horrible aspect du contenu de la page en sautant autour de la page alors que le facebook SDK termine son entreprise. Ce code doit être présent dans l'instant même le balisage est chargé. Solution: inline qui critique css.

Mais certainement NE PAS inline tous les css. Il y a peut être un autre 100kb que des charges plus tard, si le css styles de contenu en cours de chargement asynchrone de toute façon. Mais si il y a structure de la page qui doit être dans la forme correcte après 25ms, css doit être insérée.

Answer 3

Vous avez mal compris le PageSpeed suggestion. La recommandation est pour les petits fichiers CSS:

Si le CSS externe, les ressources sont de petite taille, vous pouvez insérer directement dans le document HTML, qui est appelé inline. [...] Gardez à l'esprit si le fichier CSS est grand, complètement inline CSS peut provoquer PageSpeed Insights pour avertir que le ci-dessus le pli partie de votre la page est trop grande par de Hiérarchiser le Contenu Visible.

En fait, l'article plus tard, suggère une approche équilibrée pour les gros fichiers CSS: inline critique CSS et de reporter charge le reste des fichier CSS.

---

Maintenant, même si PageSpeed vous donne un score décent après un alignement de gros fichiers CSS* il pourrait encore être une mauvaise idée:

La redondance

CSS fichiers signifie que vous dupliquez l' <style>...</style> balise dans toutes les pages. Cela signifie que vous servir des données redondantes pour la suite ou la répétition de pages vues. Les données redondantes les coûts de bande passante et augmente les temps de téléchargement.

Séparer fichier CSS ainsi que le soutien de la mise en cache des en-têtes vous permettent d'éliminer la redondance. La mise en cache des en-têtes de charger les navigateurs de mettre en cache le fichier CSS sur la première page de la vue et de la réutilisation sur d'autres ou de répétition de pages vues.

Contenu vs Données

CSS fichiers de réduire la proportion de "réel" du contenu sur la page. CSS fichiers vous demander d'insérer le CSS au-dessus du contenu alors que la plupart d'entre nous efforçons de mettre le contenu réel en haut, près du HTML.

Inline CSS sera également provoquer le navigateur pour télécharger les octets supplémentaires, avant de la laisser pour télécharger d'autres ressources telles que JavaScript et les images.

La Compression Des Coûts

Si votre page HTML est généré dynamiquement alors, plus probablement, il va être servi, non compressé. Certains serveurs (par exemple IIS) et les logiciels (par exemple, Wordprsss) autoriser la compression de contenu dynamique, mais nécessite plus de CPU + Mémoire par rapport à la compression du contenu statique (par exemple, les fichiers CSS). C'est encore une autre raison pourquoi vous devez garder CSS dans un fichier distinct.

Pour les raisons ci-dessus, je voudrais garder mon CSS combiné, compacte, à la compression et mise en cache dans un fichier séparé, même pour une page web.

---

* À ne pas confondre avec les styles en ligne

Answer 4

C'est trop long pour tenir dans un commentaire. Là où je travaille, nous utilisons le Contenu Politique de Sécurité de l' en-tête de directives (plus précisément style-src) d'interdire explicitement l'utilisation de CSS. La justification de ne pas utiliser du CSS dans ce cas est de minimiser les risques de CSS pour l'injection de pages créées dynamiquement. OWASP a des informations détaillées sur ce sujet, y compris exploiter des échantillons: https://www.owasp.org/index.php/Testing_for_CSS_Injection_(OTG-CLIENT-005). Si seulement le contenu statique est servi pour le navigateur, il devrait y avoir aucun risque.