2

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

4

4 回答 4

3

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

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

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

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

  3. 删除未使用的 CSS。您可能使用过 twitter bootstrap 和 Foundation 之类的前端框架。有很多插件可以识别未使用的 CSS 列表。

于 2017-07-14T06:26:41.803 回答
0

您可以这样做，它会加载得更快，但是在加载时，它将是无样式的。如果这对你来说没问题，那就继续做吧。但是，如果您问我，您可以将您的 CSS 样式/文件分类为紧急和不那么紧急。如果您的页面加载大约 5 秒，同时所有内容都没有样式，那么您可能会认为结果在 UX 方面不是很好。因此，请在开始时选择您绝对想要加载的样式，然后将其余样式放在最后。

于 2017-07-14T11:28:52.897 回答
0

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

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

于 2017-07-14T06:35:51.283 回答
-2

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

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

于 2017-07-14T06:13:04.097 回答