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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (56)

GooglePageSpeer经常建议优化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>

这似乎是一个合理的解决方案,缓慢的页面加载问题,并已将我的网页速度评分从88提高到95。

暂时抛开代码风格,如果有什么技术原因,没有以这种方式在所有css中存在吗?

提问于
用户回答回答于

内联所有的CSS意味着它不能被缓存,因此每一个页面负载将包含所有的CSS所需,当使用大型库,这可能是一个真正的浪费带宽。例如,Bootstrap大约是120 K。注意,共享的Google链接指定了以下内容(重点是我的链接):

如果外部css资源很小,可以将这些内容直接插入到HTML文档中,这称为内联。

因此,单页加载可能更快,但总体上可能更慢。

就我个人而言,我不会去做那件事。但是,可以做的一件事是将所有CSS绑定到一个请求中(您使用的是MVC,所以相对简单),因此只需为CSS多做一次到服务器的旅行,浏览器所请求的所有未来页面都不需要再次请求它们。

用户回答回答于

没有人提到这种技术的预期用例,这肯定不会加载100%的css。相反,这种技术是为了使用户思考页面加载得更快了。

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

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

但绝对不要内联所有的CSS。如果CSS只对异步加载的内容进行样式设置,则可以在以后加载另一个100 kb。但是如果页面结构在25 ms之后必须以正确的形式出现,那么CSS应该是内联的。

扫码关注云+社区

领取腾讯云代金券