如何调试和修复由于 div 文本加载到初始 HTML 文档中导致的 Largest Contentful Paint LCP 问题?
How to debug and fix Largest Contentful Paint LCP probem due to div with text loaded in initial HTML document?
根据来自 Chrome Incognito 和 WebPageTest.org.[=16= 的 Lighthouse 报告,以下网页的最大内容绘制 (LCP) 得分在 2.5 秒到 2.7 秒之间变化]
存在此 LCP 问题的网页 = http://www.showmyhall.com/c/India/Karnataka/Bangalore/halls/marriage-halls
WebPageTest 结果页面 = https://webpagetest.org/result/211226_AiDcFQ_7d18f1f7dc7bcdcf6fd75be523a5fc4b/?view=webvitals
显示 LCP 问题的幻灯片如下所示。
我已经删除了额外的字体,但我无法弄清楚为什么下面突出显示的大段落 (div) 是 LCP 问题的原因。
此 div 中的相关文本与来自服务器端的文档一起出现,既不是通过 ajax 或任何类型的“if”或“for”加载的 condition/loop .
我尝试在 Whosebug 和 Google 中寻找答案,但没有成功。
我经历了 https://web.dev/lcp/
有人能告诉我如何进一步调试吗?或者 div 中的文本有什么问题导致了高 LCP 问题?
这段没有问题。它被突出显示是因为它是首屏的“最大内容”。您的 LCP 指标指的是此段出现的时间。
由于该段落与页面的其余部分同时出现,您需要想知道为什么整个 first paint 速度很慢。
(从您的 WPT 瀑布看来,您的服务器似乎对 HTML 的响应速度很慢。而且看起来 CSS 和 JS 文件从 3rd 开始同步加载到头部派对域。尝试异步加载它们或从您的主域加载它们。)
根据来自 Chrome Incognito 和 WebPageTest.org.[=16= 的 Lighthouse 报告,以下网页的最大内容绘制 (LCP) 得分在 2.5 秒到 2.7 秒之间变化]
存在此 LCP 问题的网页 = http://www.showmyhall.com/c/India/Karnataka/Bangalore/halls/marriage-halls
WebPageTest 结果页面 = https://webpagetest.org/result/211226_AiDcFQ_7d18f1f7dc7bcdcf6fd75be523a5fc4b/?view=webvitals
显示 LCP 问题的幻灯片如下所示。
我已经删除了额外的字体,但我无法弄清楚为什么下面突出显示的大段落 (div) 是 LCP 问题的原因。
此 div 中的相关文本与来自服务器端的文档一起出现,既不是通过 ajax 或任何类型的“if”或“for”加载的 condition/loop .
我尝试在 Whosebug 和 Google 中寻找答案,但没有成功。 我经历了 https://web.dev/lcp/
有人能告诉我如何进一步调试吗?或者 div 中的文本有什么问题导致了高 LCP 问题?
这段没有问题。它被突出显示是因为它是首屏的“最大内容”。您的 LCP 指标指的是此段出现的时间。
由于该段落与页面的其余部分同时出现,您需要想知道为什么整个 first paint 速度很慢。
(从您的 WPT 瀑布看来,您的服务器似乎对 HTML 的响应速度很慢。而且看起来 CSS 和 JS 文件从 3rd 开始同步加载到头部派对域。尝试异步加载它们或从您的主域加载它们。)