css - Google PageSpeed Insights - 渲染阻塞 CSS 不一致

Question

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

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

PageSpeed 的不一致性让我无法决定我的下一步行动。

有没有人遇到过这个？你采取了什么方法来解决这个问题？ Google 的 PageSpeed Insights 工具是否有问题？

Answer 1

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

内联.css

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

main.css(或 style.css)

这是构建移动版网站和大部分桌面版网站所需要的。

桌面.css

这是只有大众喜爱和更大屏幕才需要的额外功能。

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

开始的一些代码

我在这里 fork mattbanks/Drupal-7-Starter-Theme https://github.com/jonasdk/Drupal-7-Starter-Theme这可能会告诉您开始的方法。

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

scss/了解如何将 css 拆分为每个函数的不同文件。

templates/system/html.tpl.php我在其中嵌入 inline.css 并在需要时加载 desktop.css。