什么是 Google Pagespeed 中的“首屏内容”？答案

【问题标题】：What is "above-the-fold content" in Google Pagespeed?什么是 Google Pagespeed 中的“首屏内容”？
【发布时间】：2013-08-22 19:40:58
【问题描述】：

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

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

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

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

【问题讨论】：

“折叠”是页面加载时屏幕底部的位置。当您登陆网站时，您无需滚动即可立即看到的任何内容都是“首屏”。您必须向下滚动才能看到它“首屏”。
折叠上方是一个通常用于报纸的术语，也就是水平折叠纸张上方的内容。通常对于网页设计，这是前 600px~ 左右（取决于你问谁有争议）。它不是指样式（字体、背景等），它指的是内容，以及可能阻止呈现该内容的 js 类型。我怀疑谷歌是否建议使用内联样式，你真的可以发布你得到的建议吗？
@Coop 为什么不直接回答而不是发表评论？

【解决方案1】：

这是因为 Google 最近更改了页面速度工具，以更好地反映日益移动的网络。移动数据网络与有线或 wifi 相比具有不同的性能特征，因此您需要针对它们进行不同的优化。

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

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

这是来自 Google 的关于此主题的视频演示：

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

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

【讨论】：

@Joshua，我为“消除首屏内容中的渲染阻塞 JavaScript 和 CSS”做了一些事情。但只反映在手机上。不在桌面。对于这个网址winni.in/cake-delivery-in-bangalore

【解决方案2】：

谷歌页面洞察力将清楚地告诉您有多少百分比的 CSS 引用了首屏内容加载得太晚，页面可能已经提前呈现。比你可以移动部分 CSS 来获得绿色结果。我可以为你做：goo.gl/GsRxNc

【讨论】：

你能解释一下百分比是什么意思吗？假设 PageSpeed 报告说 55% 的首屏内容可以在不等待外部样式表加载的情况下呈现。这意味着 45% 的首屏内容使用来自外部样式表的规则进行样式设置。但那是not the case。

【解决方案3】：

他们指的是诸如分析或跟踪代码之类的渲染阻止 js，这就是为什么他们建议将那些“先加载我”脚本放在页脚中，因为一旦用户在屏幕上显示该站点，它们就会被加载。

【讨论】：

【解决方案4】：

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

【讨论】：