LCP的定义

Question

LCP 定义为绘制首屏最大内容项所需的时间。

响应式内容包装器如何适应这种组合？就像说我有以下结构：

 <body>
    <div id="wrapper">
         <div class="some_above_the_fold_content">
              <p>Whatever</p>
         </div>
         <div class="some_visually_below_the_fold_content">
              <p>large content</p>
         </div>
    </div>
 </body>

从视觉上看，第二个 div 是“非首屏”，但它是主包装器 div 的子元素，后者是“首屏”，因为它是主要页面元素.

LCP 根据什么计算时间？什么在视觉上低于首屏 (div #2) 或父级 div?

Answer 1

在您的示例中，<p>Whatever</p> 是 LCP 元素。

LCP 元素是 text, images, or video。 #wrapper 元素包含文本元素 - 但它本身不是文本元素。

附带说明：如果用户碰巧在文档下方的位置进入页面（例如，他们 linked 到部分存在于文档下方的锚点 link页）<p>Large Content</p> 现在可能会出现在首屏，因此 LCP 元素。

LCP的定义

Definition of LCP

google-analytics

core-web-vitals