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

本文关键字：优化文件 CSS 速度加载是否编程方式内 | 更新日期: 2023-09-27 18:14:57

Google PageSpeed经常建议优化CSS交付。我突然想到，像这样内联所有的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>

这似乎是一个合理的解决方案，页面加载缓慢的问题，并提高了我的pagspeed得分从88到95。

暂时把代码样式放在一边，如果有的话，不以这种方式内联所有CSS的技术原因是什么?

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

内联所有CSS意味着它不能被缓存，所以每个页面加载将包含所有所需的CSS，当你使用大型库时，这真的会浪费很多带宽。例如，Bootstrap大约是120k。注意你分享的Google链接指定了以下内容:

如果外部CSS资源比较小，可以直接插入到HTML文档中，称为内联。

所以单个页面加载可能更快，但总体上可能更慢。

我个人会避免这样做。然而，你可以做的一件事是将所有的CSS绑定到一个请求中(你使用MVC，所以相对简单)，这样你只需要为你的CSS做一次额外的服务器访问，并且浏览器将来请求的所有页面都不需要再次请求它们。

没有人提到这项技术的预期用例，它肯定不是加载100%的css。相反，这种技术是为了让用户认为页面加载得更快。

当我们讨论使页面加载更快时，真正的目标通常是使页面加载看起来更快。从用户体验的角度来看，这比实际减少加载时间要重要得多。如果整个页面需要500ms加载也没关系，因为人类无论如何也无法这么快地解析它。重要的是页面加载的速度。

因此，这种技术的正确用法是立即加载绝对必要的css以使页面正确呈现。也就是说，有一些css规则使图像大小合适，使内容正确浮动，避免页面内容在facebook SDK完成其业务时在页面上跳跃的可怕外观。该代码需要在加载标记的同一时刻出现。解决方案:内联关键的css.

但是绝对不要内联所有的css。如果css只对异步加载的内容进行样式化，则可能会有另外100kb的内容稍后加载。但是，如果页面结构必须在25毫秒后以正确的形式出现，则应该将css内联。

您误解了PageSpeed的建议。建议使用小型CSS文件:

如果外部CSS资源比较小，可以直接插入到HTML文档中，这称为内联。[…记住如果CSS文件较大，可能导致CSS完全内联pagspeed Insights警告说，上面的部分你的
页面太大，请优先考虑可见内容。

事实上，后面的文章为大型CSS文件建议了一种平衡的方法:内联关键CSS并延迟加载剩余的CSS文件。

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

冗余

内联CSS文件意味着您在页面上复制<style>...</style>标记。这意味着您为后续或重复的页面浏览提供冗余数据。冗余数据消耗带宽，增加下载时间。

单独的CSS文件与强缓存头允许你消除冗余。缓存标头指示浏览器在第一个页面视图中缓存CSS文件，并在后续或重复页面视图中重用。

内容vs数据

内联CSS文件减少"实际"页面上的内容。内联CSS文件要求将CSS插入到内容上方，而我们大多数人都努力将实际内容放在HTML顶部附近。

内联CSS还会导致浏览器在允许它下载其他资源(如JavaScript和图像)之前下载额外的字节。

压缩成本

如果你的HTML页面是动态生成的，那么它很可能是未压缩的。一些服务器(如IIS)和软件(如Wordpress)允许压缩动态内容，但与压缩静态内容(如CSS文件)相比，需要更多的CPU +内存。这也是为什么你应该把CSS放在单独的文件中的另一个原因。

基于上述原因，我会将我的CSS组合，缩小，压缩和缓存在一个单独的文件中，即使是一个页面的网站。

*不要与内联样式混淆

这段太长了，无法在注释中显示。在我工作的地方，我们使用内容安全策略头指令(特别是style-src)来明确禁止使用内联CSS。在这种情况下不使用内联CSS的理由是尽量减少动态创建页面的CSS注入风险。OWASP有关于这个主题的详细信息，包括利用示例:https://www.owasp.org/index.php/Testing_for_CSS_Injection_(OTG-CLIENT-005)。如果只向浏览器提供静态内容，应该没有风险。

相关文章：

最新信息: