3

我相信你们中的许多人都知道，当您测试您的网站时，Google PageSpeed Insights 有时会抱怨它所谓的“渲染阻止 css”。

他们的建议是在 HEAD 中仅呈现“必要的”内联 CSS。如果您在外部文件中有 CSS（大多数人都这样做），建议在页面加载后加载它。这似乎很极端，但这是建议。这似乎也是提高一个人的 Mobile PageSpeed 分数的一大障碍......

您可以使用 Apache 或 nginx 的 PageSpeed 模块来帮助您确定哪些 CSS 实际上是“必要的”。同样，人们可以争论这样做的相对价值，但这是谷歌目前的建议。

我有一个想法，通过在我的主题的页脚中触发一个小脚本，将 CSS 注入头部，使用 javascript 来“延迟加载”CSS 文件。您可以在此处查看此技术的示例：https ://bensmann.no - 这不是我的网站。我基本上是在寻找复制或复制他对缩小的 CSS 所做的事情 - 在页面通过页面底部包含的 Javascript 加载后将其加载到 HEAD 中

然后我会放入<!-- W3TC-include-css --> 一个<noscript>标签，从而抑制缩小 CSS 的位置，并确保它出现在非 JS 浏览器中。

所以，问题是我需要以某种方式获取缩小的 CSS 文件的位置，以及用于命名文件的哈希值（用于元素的 ID）。任何人都知道如何在页脚中使用 PHP 访问缩小的 CSS 文件的位置？

4

2 回答 2

0

虽然这篇文章没有为您提供解决方案，但它可能会让您更接近将 css 移动到您想要的位置：http:
//freetheweb.tumblr.com/post/12482217372/w3-total-cache-better-css-js-放置

于 2014-04-25T10:10:10.293 回答
0

您必须了解关键路径 CSS，这是一个滑坡，实际上，没有人真正知道哪个 CSS 是关键的或不是关键的。

在此期间（或作为永久解决方案），安装像Autoptimize这样的插件并使用它会大大提高您的 Page Speed Insights 分数。

进入设置时记得勾选显示高级选项。我个人建议只内联所有CSS 并使用该选项，但这只是我。

如果在实现后有任何插件损坏，只需取消选中优化 CSS 代码，找到插件的 CSS 文件，并将其添加到异常列表中。

于 2014-11-01T12:51:39.600 回答