javascript - Google Pagespeed 中的 "above-the-fold content"是什么？

Question

直到最近，我的网站 (www.heatexchangers.ca) 在 Google Page Speed 上的得分为 98%。有几件事我无能为力，例如来自网络字体的查询字符串。我对此感到非常高兴，因为这代表了我所能做的一切。

最近谷歌添加了一些影响页面速度得分的东西，我现在在页面速度上只得到 89% 并得到这个建议:

• 消除首屏内容中阻止呈现的外部 JavaScript 和 CSS。

解决此问题的建议似乎涉及遍历我所有的 .css 和 .js 文件并将它们的某些部分分开并将它们内联添加到我的 html 中。这让我有些困惑，因为我的印象是我们必须尽可能多地在 HTML 中保留 JS 和 CSS。

“首屏”内容到底是什么？如果是字体、背景色等几种样式；然后我可以看到包含内联可能不是什么大不了的事。我无法找到确切的 list 。

Answer 1

这是因为谷歌最近更改了页面速度工具以更好地反射(reflect)日益移动的网络。移动数据网络具有与有线或 wifi 不同的性能特征，因此您需要做不同的事情来针对它们进行优化。

首屏 (ATF) 只是第一个屏幕的值(value)——您无需滚动即可看到的任何内容。显然，这会因设备及其方向而异，因此您可能需要概括并找到一些可行的通用选项，可能一种针对智能手机，一种针对平板电脑，另一种针对较大的台式机。

至于他们在谈论什么 CSS，他们实际上是想要所有 CSS 来完全设置 ATF 显示的任何内容的样式。为了确定您的 ATF 内容的加载时间，他们将拍摄最终版本的屏幕截图，并将其与加载时的页面进行视觉比较，当足够相似时，他们将考虑 ATF 内容所在的时间点已加载。

这是 Google 关于此主题的视频演示:

http://www.youtube.com/watch?v=YV1nKLWoARQ

重点是让用户在第一秒内做点什么。将 ATF 内容的 CSS 直接放入 HTML 背后的原因反射(reflect)了他们对移动数据性能的研究表明，如果没有 CSS，它就不会很快加载到第一秒内。

他们还提供了一些工具的链接，这些工具可能会自动执行其中的一些操作。我没有尝试过它们和 YMMV。