134

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

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

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

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

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

4

4 回答 4

115

这是因为谷歌最近改变了页面速度工具,以更好地反映日益移动的网络。移动数据网络具有与有线或 wifi 不同的性能特征,因此您需要做不同的事情来优化它们。

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

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

这是谷歌关于这个主题的视频演示:

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

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

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

于 2013-10-17T03:19:04.503 回答
2

谷歌页面洞察力将清楚地告诉您有多少百分比的 CSS 引用上述首屏内容被加载得太晚,并且页面可能更早呈现。比你可以移动部分 CSS 来获得绿色结果。我可以为你做:goo.gl/GsRxNc

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

于 2016-11-10T12:44:54.440 回答
1

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

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

于 2020-07-22T06:54:49.230 回答
0

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

于 2017-07-01T21:10:21.083 回答