Google PageSpeed Insights - 渲染阻止 CSS 不一致

Question

我一直致力于提高我所在公司网站的 Google PageSpeed Insight 得分。我已将主页的速度从 37/100 提高到 87/100。目前这对我来说已经足够好了。但是其他页面仍然是 73/100，因为有渲染阻止 CSS。

现在这是奇怪的部分。我使用了谷歌自己的延迟加载 CSS 的建议（这里：https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery），这适用于几页。问题是它不适用于所有页面。 PageSpeed Insights 仍然说我的一些页面有渲染阻止 CSS 文件（在主页上工作的相同文件）。我在 Rails 中工作，所有页面都使用共享布局。 CSS 文件在所有页面上加载完全相同。另外，当我测试它时，我可以清楚地看到无样式内容的闪光。 CSS 肯定是在首屏内容之后加载的。

PageSpeed 的不一致让我无法决定下一步该做什么。

有没有人遇到过这种情况？你采取了哪些方法来解决这个问题？谷歌的 PageSpeed Insights 工具是否有问题？

Answer 1

一段时间以来，我一直在处理相同的问题并在 Drupal 7 中进行实施。我的解决方案最终将 css 拆分为 3 个部分：

inline.css

以样式标签的形式直接嵌入到 HTML 中。这是为移动设备和桌面构建所有首屏所需的代码。

main.css（或 style.css）

这是构建网站的移动版本和大多数桌面网站所需要的。

desktop.css

这是仅在 belove-the-fold 和更大的屏幕上才需要的附加功能。

这种方法确实需要更多时间来构建和开发，但它可以让网站更快地进入用户浏览器 - 作为额外的附加功能，可以获得更好的页面速度得分。

一些代码开始

我已经在 https://github.com/jonasdk/Drupal-7-Starter-Theme 分叉了 mattbanks/Drupal-7-Starter-Theme@ 这可以告诉你一个开始的方法。

如果您不构建 Drupal 站点，那么您将查看以下文件。

scss/ 用于查看 css 如何为每个函数拆分为不同的文件。

模板/系统/html.tpl.php 我在哪里嵌入 inline.css 并在需要时加载 desktop.css。