c# - 我应该以编程方式内联所有 CSS 文件以优化页面加载速度吗？

Question

Google PageSpeed 经常建议到 optimize CSS delivery .我想到像这样内联所有 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>

这似乎是解决页面加载缓慢问题的合理解决方案，并将我的 PageSpeed 分数从 88 提高到 95。

暂时将代码风格放在一边，不以这种方式内联所有 CSS 存在哪些技术原因(如果有的话)？

Answer 1

内联所有 CSS 意味着它无法被缓存，因此每个页面加载都将包含所需的所有 CSS，当您使用大型库时，这确实会浪费大量带宽。例如，Bootstrap 是 120k 左右。请注意您共享的 Google 链接指定以下内容(强调我的):

If the external CSS resources are small, you can insert those directly into the HTML document, which is called inlining.

因此，单个页面加载可能会更快，但总体而言可能会更慢。

就我个人而言，我不会这样做。但是，您可以做的一件事是将所有 CSS 捆绑到一个请求中(您使用的是 MVC，所以这相对简单)，因此您只需为您的 CSS 和请求的所有 future 页面做一次额外的服务器访问浏览器将不需要再次询问它们。