什么是“;在折叠内容之上”;在Google Pagespeed中

What is "above-the-fold content" in Google Pagespeed?

本文关键字：Google Pagespeed 折叠什么更新时间：2023-09-26

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

最近谷歌添加了一些影响页面速度分数的其他内容，我现在在页面速度上只得到89%，并得到了这个建议：

修复这个问题的建议似乎包括遍历我所有的.css和.js文件，分离它们的一些部分，并将它们内联添加到我的html中。这给我带来了一些困惑，因为我觉得我们必须尽可能多地在HTML中保留JS和CSS。

"折叠之上"的内容究竟是什么？如果是字体、背景色等几种风格；然后我可以看出，包含内联可能不是什么大不了的事情。我一直找不到这到底是什么的列表。

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

折叠上方（ATF）只是第一个屏幕的价值——任何你不需要滚动就能看到的东西。显然，这取决于设备及其方向，因此您可能需要进行概括，并可能找到一些可行的通用选项，可能一个针对智能手机，一个针对平板电脑，还有一个针对大型台式机。

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

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

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

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

它们还提供了指向工具的链接，这些工具可能能够自动化其中的一些。我没有试过他们和YMMV。

google页面洞察将清楚地告诉您，有多少%引用折叠上方内容的css加载太晚，页面本可以提前呈现。然后你可以移动css的一部分来获得一个绿色的结果。我可以帮你做：goo.gl/GsRxNc

来自谷歌的一个描述"折叠之上"的链接https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

折叠内容上方是网页首次加载时在浏览器窗口中可见的部分。谷歌希望看到从你的主CSS文件中提取的内联CSS，并将其注入到head标签中，让你首先看到的所有内容都能首先加载。

来源-https://www.c2experience.com/blog/passing-googles-abovethefold-css#:~：text=在%2D上方，%2D折叠%20内容%20是，首先%20到%20被%20加载%20。

他们指的是渲染阻塞js，如分析或跟踪代码，这就是为什么他们建议将这些"先加载我，然后再加载其他"脚本放在页脚中，因为一旦用户将网站放在屏幕上，它们就会被加载。