我应该以编程方式embedded所有CSS文件以优化页面加载速度吗？
Google PageSpeed经常build议优化CSS传递 。 我想到，它会减lessnetworking往返内联所有的CSS，如下所示：
<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> 这似乎是一个合理的解决scheme，页面加载速度慢的问题，并已从88增加我的PageSpeed分数为95。
把代码风格放在一边，如果有的话，技术上的原因是不是以这种方式embedded所有的CSS？
内联所有的CSS意味着它不能被caching，所以每一个页面加载将包含所有需要的CSS，并且当你使用大型的库时，真的会浪费大量的带宽。 例如，Bootstrap约为12万。 请注意，您分享的Google链接指定了以下内容（强调我的）：
如果外部CSS资源很小 ，可以直接将这些资源插入HTML文档，这就是所谓的内联。
所以单页面加载可能会更快，但总体来说可能会更慢。
就我个人而言，我会远离这样做。 然而，你可以做的一件事就是把你所有的CSS绑定到一个请求中（你使用的是MVC，这样相对简单），所以你只需要为你的CSS和所有未来的页面浏览器将不需要再次询问它们。
没有人提到这种技术的预期用例，这绝对不是加载你的CSS的100％。 相反，这种技术是为了让用户认为页面加载速度更快。
当我们讨论使页面加载速度更快时，真正的目标通常是使页面加载看起来更快。 从用户体验的angular度来看，这比实际使负载占用更less的时间更重要。 整个页面加载500毫秒并不重要，因为人类无法快速parsing它。 重要的是页面显示已加载的速度。
所以这个技巧的恰当用法是立即加载绝对必要的CSS来使页面正确呈现。 也就是说，有一些css规则可以使图像尺寸合适，这样可以避免页面内容在facebook完成业务时跳出页面的可怕外观。 该代码需要在加载标记的同一时刻出现。 解决scheme：内联关键的CSS。
但绝对不要内联所有的CSS。 可能会有另外100KB的加载以后，如果该CSS只样式内容asynchronous加载反正。 但是如果25ms后必须有正确格式的页面结构，那么这个css应该被内联。
你误解了PageSpeed的build议。 这个build议是针对小型CSS文件的：
如果外部CSS资源很小，可以直接将这些资源插入HTML文档，这就是所谓的内联。 […]请记住，如果CSS文件很大，则完全内联CSS可能会导致PageSpeed Insights通过优先显示可见内容来警告页面的上面部分太大。
事实上，文章后来提出了一个大型CSS文件的平衡方法：内联关键CSS和延期加载剩余的CSS文件。
现在，即使PageSpeed在内联大型CSS文件后给你一个不错的分数，它可能仍然是一个坏主意：
冗余
内联CSS文件意味着您跨页面复制<style>...</style>标签。 这意味着您可以为后续或重复页面查看提供冗余数据。 冗余数据成本带宽和下载时间增加。
独立的CSS文件以及强大的caching头允许您消除冗余。 caching标题指示浏览器在首页视图上cachingCSS文件，并在后续或重复页面视图上重新使用。
内容与数据
内联CSS文件减less了页面上“实际”内容的比例。 内联CSS文件要求您在内容之上插入CSS，而我们大多数人则努力将实际内容放在顶部HTML附近。
内联CSS还会导致浏览器在允许下载其他资源（如JavaScript和图像）之前下载其他字节。
压缩成本
如果您的HTML页面是dynamic生成的，那么最有可能的是，它将被解压缩。 一些服务器（如IIS）和软件（如Wordpress）允许压缩dynamic内容，但与静态内容压缩（如CSS文件）相比，需要更多的CPU +内存。 这是为什么你应该保持CSS在单独的文件的另一个原因。
由于上述原因，我会保持我的CSS组合，缩小，压缩和caching，在一个单独的文件，即使是一个网页的网站。
*不要与内联样式混淆
这太长了，不适合发表评论。 在我工作的地方，我们使用Content Security Policy头指令（特别是style-src ）明确禁止使用内联CSS。 在这种情况下不使用内联CSS的基本原理是尽量减lessdynamic创build页面的CSS注入风险。 OWASP有关于这个主题的详细信息，包括漏洞利用样本： https ：//www.owasp.org/index.php/Testing_for_CSS_Injection_(OTG-CLIENT-005 ） 。 如果仅将静态内容提供给浏览器，则不应该存在风险。
