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链接指定了以下内容（强调我的）：

如果外部CSS资源很小，您可以将它们直接插入到HTML文档中，这称为内联。

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

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

Answer 2

没有人提到过这种技术的预期用例，绝对不能加载100％的css。相反，这种技术旨在让用户认为页面的加载速度更快。

当我们讨论加快页面加载时，真正的目标通常是使页面加载看起来更快。从用户体验的角度来看，这比实际使负载花费更少的时间更重要。如果整个页面加载500ms并不重要，因为无论如何人类都无法快速解析它。重要的是页面加载的速度有多快。

因此，适当使用此技术的方法是立即加载绝对必要的css，以使页面正确呈现。也就是说，有一些css规则可以使图像尺寸合适，使事情正确浮动，避免页面内容在facebook SDK完成其业务时跳转到页面内部。该代码需要在加载标记的同一时刻出现。解决方案：内联关键css。

但绝对不要内联所有的CSS。如果css只调整异步加载的内容，那么之后可以加载另外100kb。但是如果页面结构在25ms之后必须以正确的形式存在，则应该内联该css。

Answer 3

你误解了PageSpeed的建议。建议用于小型CSS文件：

如果外部CSS资源很小，您可以直接插入进入HTML文档，称为内联。 [...]请记住如果CSS文件很大，完全内联CSS可能会导致 PageSpeed Insights警告您的上层部分通过优先显示可见内容，页面太大。

事实上，这篇文章后来建议对大型CSS文件采取平衡的方法：内联关键CSS并推迟加载剩余的CSS文件。

现在，即使PageSpeed在内联大型CSS文件后给你一个不错的分数*它可能仍然是一个坏主意：

冗余

内联CSS文件意味着您跨页面复制<style>...</style>标记。这意味着您为后续或重复页面查看提供冗余数据。冗余数据会增加带宽并增加下载时间。

单独的CSS文件以及强大的缓存标头可以消除冗余。缓存标头指示浏览器将CSS文件缓存在第一页视图上，并在后续或重复页面视图中重用。

内容与数据

内联CSS文件可减少页面上“实际”内容的比例。内联CSS文件要求您在内容上方插入CSS，而我们大多数人都努力将实际内容放在顶级HTML附近。

内联CSS还会导致浏览器下载额外的字节，然后才能下载其他资源，如JavaScript和图像。

压缩成本

如果您的HTML页面是动态生成的，那么很可能会以未压缩的方式提供。一些服务器（例如IIS）和软件（例如Wordpress）允许压缩动态内容，但与静态内容（例如CSS文件）的压缩相比需要更多的CPU +内存。这是你应该将CSS保存在单独文件中的另一个原因。

由于上述原因，我会将CSS合并，缩小，压缩和缓存，放在一个单独的文件中，即使对于一个页面的网站也是如此。

*不要与inline styles

混淆

Answer 4

这太长了，不适合评论。在我工作的地方，我们使用Content Security Policy标头指令（特别是style-src）来明确禁止使用内联CSS。在这种情况下，不使用内联CSS的理由是最大限度地降低动态创建页面的CSS注入风险。 OWASP提供了有关此主题的详细信息，包括漏洞利用示例：https://www.owasp.org/index.php/Testing_for_CSS_Injection_(OTG-CLIENT-005)。如果只向浏览器提供静态内容，则应该没有风险。

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

4 个答案:

冗余

内容与数据

压缩成本