人们似乎完全误解了最大内容绘制指标的目的。它旨在向您显示上面的大部分折叠内容何时准备就绪。
What项目是最大的内容丰富的油漆并不那么重要when它发生了。Whatitem 仅在确定导致页面速度变慢的原因时有用。
它是确定“首屏”内容何时被充分绘制以使最终用户将页面视为“完整”的主要指标(这是感知的完整性,仍然可以在页面下方/后台加载内容) 。
分割段落、将其包装在 div 中、使其更高等的建议。没有任何目的,他们只是将 LCP 转移到其他东西上(可能)让你的分数看起来更好,但实际上并没有解决问题。
您要做的是优化页面上的初始内容。
为此,您只想提供“首屏”HTML 以及首屏内容所需的 CSS 和 JS。
然后你服务其他一切。
这篇文章很好地介绍了关键的 JS 和 CSShttps://www.smashingmagazine.com/2015/08/understanding-ritic-css/ https://www.smashingmagazine.com/2015/08/understanding-critical-css/
然而,简而言之,内联关键 CSS 和 JS 意味着在页面上呈现初始内容所需的 CSS 和 JS 应内联在 HTML 中。现在我猜测像 Gatsby 这样的东西你会内联关键的 JS 来渲染折叠上方的内容,折叠上方的 CSS 等,但原理是相同的。
关键是上面的折叠内容应该全部在 HTML 中提供(非矢量图像除外),这样就没有等待 CSS 文件、JS 文件等的往返时间。
因此,为了清楚起见,而不是:-
- HTML 请求,(到服务器的往返时间为 200 毫秒)
- 加载并解析 HTML,找到渲染初始页面内容所需的 CSS 和 JS 链接
- 要求 CSS 和 JS。 (到服务器的往返时间为 200 毫秒)
- CSS 和 JS 已加载
- 足以渲染页面。
相反你有
- HTML 请求,(到服务器的往返时间为 200 毫秒)
- HTML 已加载,所有必需的 CSS 和 JS 都内联在 HTML 中
- 足以渲染页面
这可能看起来不是很多,但 200 毫秒可以对感知速度产生巨大的影响。
这也是一个简化的示例,通常一个页面需要 20 个或更多请求才能呈现首屏内容。由于一次 8 个请求(通常)的限制,这意味着最多可能有 3 个 200 毫秒的往返等待服务器响应。
查看您的网站时,您会得到“关键请求链”的错误读数,因为初始页面中没有提供 HTML,因为它全部通过 JS 呈现。这可能就是您认为不存在问题的原因。
如果您执行上述操作,假设您的图像已优化,您将获得较低的 FCP 和 LCP 时间。