什么是＃34;首屏内容＆＃34;在Google Pagespeed中？

Question

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

最近谷歌添加了一些影响页面速度得分的内容，我现在只获得89％的Page Speed，并得到了这个建议：

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

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

究竟什么是“折叠以上”的内容？如果它是一些样式，如字体，背景颜色等;然后我可以看到包括内联可能不是太大的交易。我无法找到确切的列表。

Answer 1

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

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

至于他们在谈论什么CSS，他们真的打算完全设置ATF所显示的任何内容所需的所有CSS。要确定ATF内容的加载时间，他们将拍摄最终版本的屏幕截图，并在加载时将其与页面进行直观比较，当它足够相似时，他们会考虑到ATF内容的重点装了。

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

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

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

它们还提供了可以自动执行其中某些功能的工具的链接。我没有尝试过它们和YMMV。

Answer 2

谷歌页面洞察将清楚地告诉你，有多少％的css引用折叠上方的内容太晚加载，页面可能已经提前呈现。比你可以移动部分css来实现绿色结果。 我可以为你做：goo.gl/GsRxNc

来自Google的链接描述'首屏' https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

Answer 3

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

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

Answer 4

它们指的是渲染阻塞js，例如分析或跟踪代码，这就是为什么他们建议在页脚中放置那些“先加载其他所有内容”脚本的原因，因为一旦用户在屏幕上显示该网站，它们就会被加载。