修复“消除阻止呈现以上折叠内容的CSS”是个坏主意吗？

Question

4

我很认真地构建网页，我的PageSpeed得分通常在90-100左右。

然而近来，我的得分在桌面端只有80分左右，在移动端更是只有70分。

我主要遇到的问题是“消除以上折叠内容中阻止呈现的CSS”。尽管我知道这是什么意思，并且知道如何修复它，但我认为这根本不现实。如我所理解的：

您必须确定哪些CSS是呈现折叠内容所需的，并将其内联 - 尽管这是一个挑战，但与以下问题相比，这可能是我们最小的担忧...
您的常规外部CSS文件仍将呈现为阻止，因此您需要推迟这一点，并通过JavaScript加载。我发现我们竟然依赖于JavaScript来帮助页面样式设计，这让人感到难以置信。
内联内容将无法缓存。如果您的折叠内容是头部和导航之类的内容，则这可能是每个页面上的折叠内容，因此与相关样式的缓存肯定是好事。
如果您在响应式设计中使用多个断点，则为了避免出现未经样式化的内容闪烁，您可能需要在内联内容中包含各种媒体查询。然后在您的外部CSS里也要有相同的媒体查询。并且如果您更改它们，也要记得在两个地方都更改。
如果您的网站非常基础，那么内联内容可能会很小，但是对于更复杂的设计来说，内联内容可能会很大。此外，从工作流程的角度来看，将这两个分开是一场噩梦。

我是唯一感到痛苦的人吗？是否有任何示例可以证明人们有效地执行此操作？（我看到的唯一示例是人们将整个CSS内联了，我认为这不是一个好的解决方案）。

谷歌是否会考虑放弃此建议，因为它对99％的网站而言似乎不切实际？

- MrCarrot

1

我倾向于不担心这个问题，而是专注于我可以解决的所有项目。很感兴趣看到一些深入的答案/意见，尽管已经有类似的问题：https://dev59.com/lWMl5IYBdhLWcg3wBy_y?rq=1 - David Alsbright

我也很不满！想知道你是否改变了你的观点？ - D.Tate

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user2218824 · Answer 1

我认为很难确定需要哪些CSS用于above-the-fold内容。例如，可以看看Luke Wroblewski的这篇文章：没有折叠。对于具有巨大CSS文件的页面，在头部使用内联CSS可能是一个好主意，因为感知性能会得到改善，但通常我倾向于保持我的CSS文件小而进行压缩和gzip处理。

如果您网站的CSS相当小，那么内联CSS可能比将CSS放在HTML头部更好，因为HTTP查找、服务器响应和发送文件可能需要比简单地将CSS放在HTML头部花费更多时间。

我也同意第3点，即CSS未被缓存。内联CSS可能对微型网站或着陆页有用，以获得快速加载页面以提高转化率，但它可能对在线商店产生不良影响，因为人们通常更“浏览”页面，因此加载不同的页面（并且始终需要加载内联CSS）。

关于CSS是否应该内联，似乎有一些讨论。此外，Google PageSpeed会给出如何使页面加载更快的建议，但并不意味着它们总是正确的。由于有这么多不同的网站，您应该始终查看每个页面可以以哪种方式进行改进。有时候，改善页面加载速度的不是内联的CSS，而是从页面中删除的图像。