什么是“首先折叠内容”在Google Pagespeed中？ [英] What is "above-the-fold content" in Google Pagespeed?

问题描述

直到最近，我的网站（www.heatexchangers.ca）在Google Page Speed上获得了％98。有几件事我不能做任何事情，如来自web字体的查询字符串。我非常满意这一点，因为这代表了我能做的。

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.

最近Google添加了其他东西，影响网页速度分数，我现在只得到％89页速度并获得此建议：

Recently Google added something else that affects the page speed score and I now only get %89 on Page Speed and get this suggestion:

• 在首屏内容中消除外部渲染阻止JavaScript和CSS。

修复这个问题的建议似乎牵扯到我的所有.css和.js文件，并分离它们的一些部分，并将它们添加到我的html。这使我有些困惑，因为我的印象，我们必须尽可能多的JS和CSS尽可能多的HTML。

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.

折叠内容究竟是什么？如果是几种样式如字体，背景颜色等;然后我可以看到它可能不太大的交易包括内联。

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.

推荐答案

这是因为Google最近更改了页面速度工具以更好地反映越来越多的移动网络。移动数据网络具有不同于有线或WiFi的性能特征，因此您需要对其进行不同的优化。

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.

折叠式（ATF）屏幕的价值 - 任何你不需要滚动看到。显然，这取决于设备及其方向，因此您可能需要概括，也许会找到一些可行的常见选项，也许一个针对智能手机，一个用于平板电脑，一个用于较大的桌面。

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.

至于他们在说什么CSS，他们真的打算所有的CSS需要完全风格任何内容显示ATF。要确定您的ATF内容的加载时间，他们将拍摄最终版本的屏幕截图，并在视觉上与页面加载时进行比较，当它们相似时，他们会考虑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.

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

This is a video presentation from Google on this subject:

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

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

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.

他们还提供了一些工具的链接，这些工具可以自动化这些工具。我没有试过他们和YMMV。

They also provide links to tools that may be able to automate some of this. I have not tried them and YMMV.

这篇关于什么是“首先折叠内容”在Google Pagespeed中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！