Html 什么是 Google Pagespeed 中的“首屏内容”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18340402/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is "above-the-fold content" in Google Pagespeed?
提问by Glipt
Until recently, my site (www.heatexchangers.ca) scored 98% on Google Page Speed. There were a couple of things I could do nothing about such as the query string from web fonts. I was very happy with this as this represented all that I could do.
直到最近，我的网站 (www.heatexchangers.ca) 在 Google Page Speed 上的得分为 98%。有几件事我无能为力，例如来自网络字体的查询字符串。我对此非常满意，因为这代表了我所能做的一切。
Recently Google added something else that affects the page speed score and I now only get 89% on Page Speed and get this suggestion:
最近谷歌添加了一些影响页面速度得分的东西，我现在只得到 89% 的页面速度并得到这个建议：
- Eliminate external render-blocking JavaScript and CSS in above-the-fold content.
- 消除首屏内容中阻止外部渲染的 JavaScript 和 CSS。
The suggestion to fix this seems to involve trolling through all my .css and .js files and separating some parts of them and adding them inline to my html. This is causing me some confusion as I was under the impression we must keep as much JS and CSS out of the HTML as possible.
解决这个问题的建议似乎涉及浏览我所有的 .css 和 .js 文件，并将它们的某些部分分开并将它们内联添加到我的 html 中。这让我有些困惑，因为我的印象是我们必须尽可能多地将 JS 和 CSS 排除在 HTML 之外。
What exactly is "Above the Fold" content? If it is a few styles such as font, background colour etc; then I can see it might not be too big a deal to include inline. I have not been able to find a list of exactly what this is.
“首屏”内容究竟是什么？如果是字体、背景色等几种样式；然后我可以看到包含内联可能不是什么大不了的事。我一直无法找到确切的清单。
回答by Joshua Coady
This is because Google recently changed the page speed tool to better reflect an increasingly mobile web. Mobile data networks have different performance characteristics than wired or wifi so you need to do different things to optimize for them.
这是因为 Google 最近更改了页面速度工具，以更好地反映日益移动的网络。移动数据网络与有线或 wifi 具有不同的性能特征，因此您需要做不同的事情来优化它们。
Above-the-fold (ATF) is simply the first screen's worth--anything you don't need to scroll to see. Obviously, this varies depending on the device and its orientation, so you may need to generalize and maybe find some workable common options, maybe one targeting smartphones, one for tablets, and one for larger desktops.
首屏 (ATF) 只是第一个屏幕的价值 - 您不需要滚动即可看到的任何内容。显然，这取决于设备及其方向，因此您可能需要进行概括并找到一些可行的通用选项，可能一个针对智能手机，一个针对平板电脑，一个针对较大的台式机。
As for what CSS they are talking about, they are really intending all CSS needed to fully style whatever content is displayed ATF. To determine the load time of your ATF content, they are going to take a screen shot of the final version and compare that visually to the page as it loads and when it is alike enough, they'll consider that the point where the ATF content is loaded.
至于他们所谈论的 CSS，他们真正想要的是对 ATF 显示的任何内容进行完全样式化所需的所有 CSS。为了确定您的 ATF 内容的加载时间，他们将拍摄最终版本的屏幕截图，并将其与加载时的页面进行视觉比较，当它足够相似时，他们将考虑 ATF 内容所在的点已加载。
This is a video presentation from Google on this subject:
这是谷歌关于这个主题的视频演示：
http://www.youtube.com/watch?v=YV1nKLWoARQ
http://www.youtube.com/watch?v=YV1nKLWoARQ
The emphasis is on getting users something to do within the first second. The reasoning behind putting the CSS for the ATF content directly into the HTML reflects their research on mobile data performance showing that if the CSS isn't there, it won't get loaded soon enough to be within the first second.
重点是让用户在第一秒内做一些事情。将 ATF 内容的 CSS 直接放入 HTML 背后的原因反映了他们对移动数据性能的研究表明，如果 CSS 不存在，它不会很快加载到第一秒内。
They also provide links to tools that may be able to automate some of this. I have not tried them and YMMV.
他们还提供了一些工具的链接，这些工具可能能够自动化其中的一些。我没有尝试过它们和 YMMV。
回答by NoWomenNoCry
google page insights will tell you clearly how many % of css referring the content above the fold is being loaded too late and page could have been rendered earlier. Than you could move parts of css to achieve a green result. i can do it for you:goo.gl/GsRxNc
谷歌页面洞察会清楚地告诉你有多少 css 引用折叠上方的内容加载太晚，页面本可以更早呈现。比您可以移动部分 css 以实现绿色结果。我可以为你做：goo.gl/GsRxNc
a link from Google describing 'above the fold' https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
来自谷歌的描述“首屏”的链接 https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
回答by CowboyWillie
They refer to render-blocking js such as analytics or tracking code which is why they suggest placing those "load me prior to everything else" scripts in the footer as they will then be loaded once the user has the site on screen.
他们指的是阻止渲染的 js，例如分析或跟踪代码，这就是为什么他们建议将那些“在其他一切之前加载我”脚本放在页脚中，因为一旦用户在屏幕上显示网站，它们就会被加载。
