“最终首屏内容”中的百分比如何计算 - 优先考虑可见内容

Question

我的网站采用 3 栏设计。

我坚持优先考虑谷歌 PageSpeed 测试的可见内容

它说“即使有完整的 HTML 响应，也无法呈现最终的首屏内容。”

有时当我编辑代码时，味精会变成“xx% of the final....”。

% 如何计算？而我必须做些什么来解决这个问题？

---

这是我的测试站点：https://yudans.net/index2.php

和 PageSpeed 报告：https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fyudans.net%2Findex2.php&tab=desktop

---

我做了什么：

• 取消所有渲染阻塞元素，
• 将首屏内容的 css 放入标签中，
• 调整了所有使用的图像的大小，
• 没有使用外部 javascript/css 并且
• 通过了 AMP HTML (validator.ampproject.org/#url=https%3A%2F%2Fyudans.net%2Findex2.php)

我还能做什么？ 谢谢！

Answer 1

由于浏览器按顺序呈现事物。如果您有 3 列，则必须将整个第一列一直渲染到底部才能到达第二列。以及整个第二列到达第三列。

因此，您基本上渲染整个页面只是为了显示首屏的内容（在页面加载时可见）。

为了让页面速度洞察满意，您需要将其设为 6 列。前 3 列在首屏上方，其他 3 列在首屏下方。

然后，您可以将它们设置为看起来像常规的 3 列布局。但是，现在首先呈现折叠上方的 html，您也可以只将 css 放在头部的前 3 列中。