什么是谷歌网页速度中的“超前内容”？

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

最近 Google 添加了一些其他的东西来影响页面速度得分，现在我的页面速度只有89% ，并且得到了这样的建议:

  • 在上面的内容中消除外部呈现阻塞 JavaScript 和 CSS。

解决这个问题的建议似乎涉及到我所有的。CSS 和。Js 文件，并分离其中的一些部分，并将它们内联地添加到我的 html 中。这给我带来了一些困惑，因为我的印象是，我们必须尽可能多地将 JS 和 CSS 排除在 HTML 之外。

《天上人间》的内容到底是什么？如果它是一些样式，如字体，背景颜色等，那么我可以看到它可能不是太大的问题，包括内联。我还没找到一份清单，上面详细列出了这是什么。

64887 次浏览
小开

这是因为谷歌最近改变了页面速度工具，以更好地反映日益增长的移动网络。移动数据网络与有线或无线网络有不同的性能特征，因此需要做不同的事情来优化它们。

最上面的(ATF)仅仅是第一个屏幕的价值——任何你不需要滚动来看的东西。显然，这取决于设备和它的方向，所以你可能需要概括，也许找到一些可行的共同选项，也许一个针对智能手机，一个针对平板电脑，一个针对更大的台式机。

至于什么样的 CSS 他们正在谈论，他们真的打算所有的 CSS 需要完全样式的任何内容显示 ATF。为了确定 ATF 内容的加载时间，他们将对最终版本进行屏幕截图，并在页面加载时将其与页面进行可视化比较，当页面足够相似时，他们将考虑加载 ATF 内容的点。

这是谷歌关于这个主题的视频演示:

Http://www.youtube.com/watch?v=yv1nklwoarq

重点在于让用户在第一秒钟内完成一些事情。将用于 ATF 内容的 CSS 直接放入 HTML 背后的原因反映了他们对移动数据性能的研究，表明如果没有 CSS，它不会很快加载到第一秒钟内。

它们还提供了一些工具的链接，这些工具可以自动完成其中的一些工作。我还没有尝试他们和 YMMV。

小开

谷歌页面的洞察力将告诉你有多少% 的 CSS 引用上述折叠的内容是被加载太晚，页面本来可以提前呈现。比你可以移动部分 css，以实现绿色的结果。 我可以帮你做: goo.gl/GsRxNc

来自谷歌的一个链接描述了“在折叠之上” Https://developers.google.com/speed/docs/insights/optimizecssdelivery

小开

他们引用了渲染阻塞的 js，比如分析或跟踪代码，这就是为什么他们建议在页脚中放置那些“加载我优先于其他任何东西”的脚本，因为一旦用户在屏幕上看到站点，就会加载这些脚本。

小开

最上面的内容是页面首次加载时在浏览器窗口中可见的部分。Google 希望看到从您的主 CSS 文件中提取的内联 CSS 并注入到 head 标记中，从而允许首先加载您首先看到的所有内容。

来源 -https://www.c2experience.com/blog/passing-googles-abovethefold-css#:~:text=Above%2Dthe%2Dfold%20content%20is,first%20to%20be%20loaded%20first。


提交答案