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

Question

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>

这似乎是缓慢页面加载问题的合理解决方案,并将我的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通过Prioritize Visible Content来警告页面的首页部分太大.

事实上,这篇文章后来为大型CSS文件提出了一种平衡的方法:内联关键CSS和延迟加载剩余的CSS文件.

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

冗余

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

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

内容与数据

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

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

压缩成本

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

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

*不要与内联样式混淆

Answer 4

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