Google Pagespeed中的“above-the-fold content”是什么？

Question

Google Pagespeed中的“above-the-fold content”是什么？

javascripthtmlcssgoogle-pagespeed

135

直到最近，我的网站（www.heatexchangers.ca）在Google页面速度上得分为98%。有一些事情我无能为力，比如web字体的查询字符串。我对此非常满意，因为这代表了我所能做的一切。

最近，Google添加了其他影响页面速度得分的内容，我现在只获得89%的页面速度，并收到以下建议：

消除在以上折叠内容中外部阻止呈现的JavaScript和CSS。

解决此问题的建议似乎涉及浏览所有我的.css和.js文件，将其中的一些部分分离出来并将它们添加内联到我的html中。这让我感到困惑，因为我的印象是我们必须尽可能地将JS和CSS保持不在HTML中。

“以上折叠”内容到底是什么？如果它只是一些样式，比如字体、背景颜色等，那么我可以看到这可能不是太大的问题，可以内联添加。我没有找到一个确切的列表来说明这是什么。

- Glipt

49

“折叠”是指网页在加载时屏幕底部的位置。当你打开一个网站，任何无需滚动即可立即看到的内容都在“折叠线”之上。而需要向下滚动才能看到的内容则在“折叠线”之下。 - CaribouCode

21

“Above the Fold”是一个通常用于报纸的术语，指的是纵向折叠线以上的内容。在网页设计中，通常指的是前600像素左右（具体视谁说而定）。它所指的不是样式（字体、背景等），而是内容及可能阻塞该内容渲染的JavaScript类型。我怀疑Google建议使用内联样式，您能否实际发布您收到的建议？ - Christian

@Coop 为什么不直接写一个答案，而不是发表评论呢？ - Kellen Stuart

4个回答

2

Google页面洞察将清楚地告诉您，多少％的CSS引用了上折叠内容，并且加载过晚，页面本可以更早地呈现。然后，您可以移动一些CSS部分以实现绿色结果。我可以为您做到：goo.gl/GsRxNc

来自谷歌的链接描述“上折叠” https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

- NoWomenNoCry

你能澄清一下百分比的含义吗？假设PageSpeed报告称，55%的above-the-fold内容可以在不等待外部样式表加载的情况下呈现。这意味着45%的above-the-fold内容是使用外部样式表中的规则进行样式设置的。但事实并非如此。 - x-yuri

1

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

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

- Emily Katie

0

他们指的是阻止渲染的 JavaScript，例如分析或跟踪代码，因此建议将这些“在所有其他内容之前加载”的脚本放在页脚中，因为这样它们将在用户将网站显示在屏幕上后加载。

- CowboyWillie

这是正确的。它们应该被延迟或异步加载，或者移动到页脚/封闭</body>标记之前，因为它们对页面不是至关重要的。关键代码，如主页样式或Bootstrap，必须在页面顶部加载，否则您将遇到FOUC（未经修饰的内容闪烁），因此对于这些关键组件唯一能做的就是压缩和合并它们成较少的文件，以减少渲染阻塞。此评论支持CowboyWillie的评论，该评论被不公平地投下了反对票。 - Tahi Reu

没错，你需要推迟加载，一直推迟到页面的顶部。为了实现这个新概念，痛苦地拆分你完美运行的JavaScript和CSS文件是必须付出的代价！ - Salvador Valencia

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

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

- Joshua Coady · Accepted Answer

这是因为 Google 最近改进了页面速度工具，以更好地反映不断增长的移动网络。移动数据网络具有不同的性能特征，因此您需要执行不同的任务来进行优化。

“以上折叠”（ATF）仅是第一个屏幕的大小 - 任何不需要滚动即可查看的内容。很明显，这取决于设备及其方向，因此您可能需要概括一些可行的常见选项，例如针对智能手机、平板电脑和更大的桌面计算机。

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

这是 Google 关于此主题的视频演示： http://www.youtube.com/watch?v=YV1nKLWoARQ 重点是让用户在第一秒内获得一些事情可以做。将 ATF 内容的 CSS 直接放入 HTML 中的原因反映了他们对移动数据性能的研究，显示如果没有 CSS，它将无法在第一秒内加载足够快。

他们还提供了可能能够自动化部分内容的工具链接。我没有尝试过它们，您的体验可能有所不同。