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

直到最近，我的网站（www.heatexchangers.ca）的Google Page Speed得分还是98％。我有几件事我无能为力，例如来自Web字体的查询字符串。我对此感到非常高兴，因为这代表了我所能做的一切。

最近，Google添加了一些会影响页面速度得分的内容，而我现在对Page Speed的了解仅为89％，并得到以下建议：

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

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

“折叠之上”的内容到底是什么？如果是一些样式，例如字体，背景颜色等；那么我可以看到将内联包含在内并不是一件大事。我一直无法找到确切的清单。

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

首屏式（ATF）只是第一个屏幕的价值–您无需滚动即可查看。显然，这取决于设备及其方向，因此您可能需要概括并找到一些可行的常用选项，例如，一个针对智能手机，一个针对平板电脑，一个针对大型台式机。

至于他们在谈论什么CSS，他们实际上是在计划所有样式的ATF所需的所有CSS。为了确定您的ATF内容的加载时间，他们将对最终版本进行截屏，并在加载时直观地将其与页面进行比较，并在页面足够相似时将其视为ATF内容的关键点已加载。

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

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

重点是让用户在第一秒内就可以完成工作。将ATF内容的CSS直接放入HTML背后的原因反映了他们对移动数据性能的研究，该研究表明，如果CSS不存在，它将不会很快加载到第一秒之内。

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

谷歌页面见解会清楚地告诉您，有多少％的css引用了首屏上方的内容，加载的太晚了，而页面可能早就呈现了。比您可以移动css的一部分来获得绿色的结果。我可以为您做到：goo.gl/GsRxNc

Google的链接，描述“首屈一指” https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

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

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

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