我在构建网页时很认真，我的 PageSpeed 分数过去一直在 90-100 左右。
然而，最近它已在 80 年代用于桌面和 70 年代用于移动。
我遇到的主要问题是“消除首屏内容中的渲染阻塞 CSS”。我明白这意味着什么，也明白如何解决它，但我看不出这样做有什么实际意义。如果我理解正确的话:
您必须确定需要哪个 CSS 来呈现首屏内容并将其内联 - 虽然这是一个挑战，但与以下内容相比，这可能是我们最不担心的事情...
您的常规外部 CSS 文件仍会呈现 block ，因此您必须推迟它并改为通过 JavaScript 加载它。我觉得我们依赖 JavaScript 来帮助设置页面样式有点不可思议。
内联内容不会被缓存。如果您的首屏内容是标题和导航之类的内容，那么这很可能是每个页面上的首屏内容，因此缓存相关样式肯定是一件好事。
如果您在响应式设计中有多个断点，为避免无样式内容的闪现，您可能需要在内联内容中包含各种媒体查询。然后在您的外部 CSS 中使用相同的媒体查询。然后，如果您更改它们，请记住在两个地方都进行更改。
如果您的网站非常基础，那么内联内容可能会非常小，但对于更复杂的设计，内联内容可能会非常大。此外，从工作流程的 Angular 来看，将两者分开是一场噩梦。
我是唯一对此感到痛苦的人吗？有没有人们有效地做到这一点的例子？ (我见过的唯一例子是人们内联他们的整个 CSS，我认为这不是一个好的解决方案)。
是否可以想象 Google 最终会放弃此建议，因为它似乎对 99% 的网站都不实用？
最佳答案
我认为很难确定首屏内容需要哪种 CSS。例如，请参阅 Luke Wroblewski 的这篇文章:There is no fold .对于拥有巨大 CSS 文件的页面，在头部使用内联 CSS 可能是个好主意，因为 perceived performance改进了，但总的来说，我倾向于保持我的 CSS 文件较小并对其进行压缩和 gzip。
如果您的网站 CSS 非常小，内联 CSS 可能会更好，因为 HTTP 查找、服务器响应和发送文件可能比实际简单地将 CSS 放在 HTML 头部花费更多时间。
我也同意 3)，CSS 没有被缓存。内联 CSS 可能对微型网站或着陆页具有快速加载页面以增加转化率很有用，但它可能对在线商店产生不良影响，因为人们通常更多地“浏览”页面并因此加载不同的页面(和总是需要加载内联 CSS)。
似乎有一些关于 CSS 是否应该内联的讨论。此外，Google PageSpeed 会为您提供有关如何加快页面加载速度的建议，但并不是说它们总是正确的。有这么多不同的网站，您应该始终了解每个页面可以通过哪些方式进行改进。有时，提高页面加载的不是内联 CSS，而是从页面中删除的图像。
关于css - 修复 "Eliminate render-blocking CSS in above-the-fold content"是个坏主意吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30518152/