我可以把外部CSS文件放在HTML页面末尾以防止渲染阻塞吗？

Question

我已经进行了Google页面速度测试。在报告中，它建议我删除阻止呈现的CSS资源以显示在折叠内容之上。我发现我有14个外部CSS文件，这导致我的页面加载延迟。那么，我可以将CSS文件放在HTML标签的末尾吗？还是有其他方法可以做到这一点？

- Intern

---

hypocrites - I haz kode

将不同样式表的内容放在一个单独的文件中？ - Cyclonecode

@实习生 - 解决多个地址并处理多个连接以下载文件，我相信会更糟糕。当然，您还应该对合并的样式表文件进行压缩。 - Cyclonecode

@Cyclonecode 好的先生，谢谢你的帮助。我会尝试您的解决方案，希望它能起作用。 - Intern

CSS文件的等待时间通常不是由于文件大小引起的，而是http请求中的连接部分占用了大部分时间。下载14个大小为10kb的文件需要建立14个不同的连接，可能比下载一个200kb的文件需要建立1个连接更耗时。在任何给定时间内，您只能进行有限数量的并发http请求。 - I haz kode

Answer 1

以上折叠内容是指在不向下滚动屏幕时当前看到的内容。为了初始加载，需要以上折叠内容的样式，其他样式可以稍后下载。您可以做什么？有两个样式表，一个包含初始页面加载的样式，另一个样式表将包含其余的样式。您可以通过JavaScript包含第二个样式表。

如何优化您的CSS文件以提高性能：

1. 将许多外部文件合并成一个单独的文件，这将减少对服务器的请求。 2. 最小化CSS文件（这将删除不必要的空格）。 3. 删除未使用的CSS。您可能已经使用了像Twitter Bootstrap和Foundation这样的前端框架，有很多插件可识别未使用的CSS列表。

- yasarui

---

确保您还发送了经过 g-zip 压缩的内容。现实生活中的性能 - 包括可维护性 - 优先于一些谷歌自己似乎不在意的评分系统。 - I haz kode

@Ihazkode 是的，我正在发送gzip压缩的内容。 - Intern

@Intem，我们可以做很多事情来优化网站，在这个网站https://varvy.com/pagespeed/上有非常好的文章。 - yasarui

Answer 2

执行您建议的操作将加载一个没有样式的站点，然后在 CSS 加载完成后，该站点将获得样式，从而导致卡顿/糟糕的用户体验。相反，您可以内联（或添加到 head 标签中）第一折叠内容，即用于为您看到的网站的第一部分进行样式设置的 CSS，而无需滚动。然后在生产模式下，将所有 CSS 文件合并为单个文件，如果您的源是可信任的源，则使用 dns-prefetch。此外，如果您正在使用通过 webpack 打包的 react 应用程序，可以尝试实现 代码拆分 以加载与路由相关的捆绑包。将供应商 CSS / JS 文件和应用程序文件拆分，以便可以利用浏览器缓存。

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

- Nitish Phanse

Answer 3

你可以这样做，它会加载得更快，但在加载时，它将没有样式。如果这对你来说没问题，那就去做吧。然而，如果你问我，你可以将CSS样式/文件分类为紧急和不那么紧急的。如果你的页面加载了大约5秒钟，同时一切都没有样式，那么你可能会认为用户体验方面的结果并不是很好。因此，挑选出你绝对想要在开始时加载的样式，并将其余部分放在最后。

- Lajos Arpad

Answer 4

将它放在文件末尾会导致浏览器首先显示所有的HTML而没有任何样式，我个人认为这是不令人满意的。

尝试将你的CSS文件合并在一起，只使用一个大的压缩文件，这样浏览器只需要加载一个CSS文件即可。

- SVARTBERG

---

这应该是一个注释。 - Abhishek Pandey