关于首屏内容的百分比是什么意思？答案

【问题标题】：What do percents regarding above-the-fold content mean?关于首屏内容的百分比是什么意思？
【发布时间】：2017-08-20 08:09:10
【问题描述】：

UPD 我已经仔细阅读了相关页面，他们没有回答我的特定问题。百分比是什么意思？嗯，有一个attempt 解释：

谷歌页面洞察力会清楚地告诉你有多少百分比的 CSS 引用了首屏内容加载得太晚，页面本来可以更早呈现。

但这并不比 PageSpeed 所说的更清楚。如果完全正确。

我有一个页面，我的所有 css 都内联在头部（可能还不是很多，12K），并且在正文标记的末尾只有一个虚拟外部样式表：

<!doctype html>
<html><head>
    ...<style>...</style>...
</head><body>
    ...
    <link rel="stylesheet" href="1.css">
    <script src="..."></script>
    <script src="..."></script>
    <script src="..."></script>
</body></html>

1.css：

.not-used-selector {color: red;}

PageSpeed 告诉我：

您页面上大约 55% 的首屏内容可以在不等待以下资源加载的情况下呈现。尝试延迟或异步加载阻塞资源，或直接在 HTML 中内联这些资源的关键部分。

优化以下 CSS 交付：

https://.../1.css

55% 是什么意思？当我从页面中删除外部样式表时，投诉显然消失了，但这个数字究竟意味着什么？

【问题讨论】：

链接的问题和答案解释了“首屏内容”的含义。现在将其应用于 PageSpeed 告诉您的内容：“您页面上大约 55% 的首屏内容可以呈现......”这意味着在被视为首屏的内容中，大部分可能是在没有外部 CSS 的情况下渲染，但仍然需要等待外部 CSS 加载。这应该为您指明延迟加载 CSS 和/或使首屏内容独立于外部 CSS 的机会。
他们肯定会回答什么是“首屏内容”。那不是问题。 PageSpeed 表示，可以呈现 55% 的首屏内容，而无需等待页面上唯一的外部样式表被加载。这意味着 45% 的首屏内容需要该样式表来呈现。这根本不是树。样式表包含一个从未使用过的选择器。所以我的猜测是这个数字意味着别的东西。或者我不明白这个信息。
@mplungjan 我已经解释了我的问题有何不同。请重新打开它。
也许您必须在您的 abf 内容中加载图像。尝试使用质量较低的数据 url 制作内联 svg 或预加载。

标签： html css optimization pagespeed

【解决方案1】：

首屏内容是您无需向下滚动（最顶部）即可看到的页面部分。多少取决于设备、浏览器大小以及您的名字。

“页面上大约 55% 的首屏内容可以在不等待以下资源加载的情况下呈现”就是这个意思。换句话说，“以下资源”的 css 规则适用于页面的 45%（首屏内容）。其余的 (55%) 不需要外部样式表。将这些规则移动到页面本身并延迟加载外部样式表可能是有意义的。这样就可以在不等待样式表加载的情况下呈现首屏内容。只是这个数字 (45%) 可能非常不准确。

【讨论】：