我可以将外部css文件放在html页面的末尾以防止渲染阻塞吗？

Question

我已经完成了谷歌网页速度测试。在报告中，它建议我删除折叠内容上方的渲染阻止css资源。我发现我有14个外部CSS文件导致加载我的页面延迟。那么我可以将我的CSS文件放在HTML标记的末尾，还是有其他方法可以做到这一点？

Answer 1

折叠内容意味着，你现在在屏幕上看到的内容没有向下滚动。上面的折叠内容的样式是初始加载所必需的，其他样式可以在以后下载。所以你可以做什么，有两个样式表一个包含初始页面加载的样式，另一个样式表将包含其余样式。您可以通过javascript包含第二个样式表

如何优化css文件以获得更好的性能

1. 而不是拥有这么多外部文件，将它们合并到一个文件中。这将减少对服务器的请求数量

2. 缩小您的css文件（这将删除不需要的空间）

3. 删除未使用的css。你可能已经使用过像twitter bootstrap和foundation这样的前端框架。有许多插件可以识别未使用的css列表。

Answer 2

按照你的建议加载一个没有设置样式的网站，然后在加载css之后，该网站将获得样式，这将产生一个生涩/糟糕的用户体验。相反，您可以内联（或添加内部头标记）第一个折叠内容，即在不滚动的情况下为您看到的网站的第一部分设置样式所需的CSS。然后在生产模式下，如果您的源是受信任的来源，则将所有css文件合并到一个dns-prefetch的文件中。此外，如果您使用通过webpack捆绑的react应用程序，您可以尝试实现code splitting来加载与路由相关的捆绑包。拆分供应商的css / js文件和应用程序文件，以便可以利用浏览器缓存。

Udacity有这个免费课程here，可以让您更好地了解如何优化页面加速时间。

Answer 3

你可以这样做，它会加载更快，但在加载时，它将没有样式。如果这对你没问题，那就继续吧。但是，如果你问我，你可以将你的CSS样式/文件分类为紧急而不是那么紧急。如果您的页面加载时间为5秒，同时一切都没有样式，那么您可能会认为结果在UX方面不是很好。所以，选择你想要在开始时加载的样式，然后把剩下的样式放在最后。

Answer 4

将它放在文件的末尾会导致浏览器首先显示所有的html而不管任何样式。我个人觉得不满意。

尝试将css文件合并在一起，只使用一个大的缩小文件，这样浏览器只需要为css加载一个文件。