LCP 元素判定逻辑

原创 已于 2025-08-08 10:00:05 修改 · 1.2k 阅读 · 15 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#前端 #LCP
于 2025-07-21 15:14:01 首次发布

LCP是指从页面开始加载到用户第一次与页面发生交互期间出现过的最大可见image或者文本块元素绘制在屏幕上的时间点。

案例1，不在首屏可视范围内的元素不被计算为LCP

在这里插入图片描述
当元素<h1>Largest Contentful Paint Test</h1>，不在当前屏幕展示时则无法计算LCP
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>LCP Owned Text Nodes Test</title>
</head>
<body style="padding-top: 100vh;"> <!-- 当pading-top: 100vh时元素不会展示在当前页面 -->
  <h1>Largest Contentful Paint Test</h1>
  <script>
    // 用 PerformanceObserver 监听 LCP 候选项
    const observer = new PerformanceObserver((list) => {
      const entries = list.getEntries();
      for (const entry of entries) {
        console.log('LCP entry:', entry);
        const element = entry.element;
        element.style.outline = '4px solid red';
        element.setAttribute('data-lcp', 'true');
      }
    });

    observer.observe({ type: 'largest-contentful-paint', buffered: true });
  </script>
</body>
</html>

案例2，用户输入后出现的元素不会被计算为LCP

如果在5s内发生过用户与页面的交互行为，那么5s后被添加的元素就不会被算作LCP。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>LCP Owned Text Nodes Test</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 50px;
    }
  </style>
</head>
<body>
  <script>
    setTimeout(() => {
      const h1 = document.createElement('h1')
      h1.innerText = 'Largest Contentful Paint Test'
      document.body.appendChild(h1)
    }, 5000)
    // 用 PerformanceObserver 监听 LCP 候选项
    const observer = new PerformanceObserver((list) => {
      const entries = list.getEntries();
      for (const entry of entries) {
        console.log('LCP entry:', entry);
        const element = entry.element;
        element.style.outline = '4px solid red';
        element.setAttribute('data-lcp', 'true');
      }
    });

    observer.observe({ type: 'largest-contentful-paint', buffered: true });
  </script>
</body>
</html>

案例3，元素出现过被移除也算LCP只要当前元素符合要求

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>LCP Owned Text Nodes Test</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 50px;
    }
  </style>
</head>
<body>
  <h1>Largest Contentful Paint Test</h1>
  <script>
    setTimeout(() => {
      document.querySelector('h1').remove()
      console.log('h1元素已被移除')
    }, 5000)
    // 用 PerformanceObserver 监听 LCP 候选项
    const observer = new PerformanceObserver((list) => {
      const entries = list.getEntries();
      for (const entry of entries) {
        console.log('LCP entry:', entry);
        const element = entry.element;
        element.style.outline = '4px solid red';
        element.setAttribute('data-lcp', 'true');
      }
    });

    observer.observe({ type: 'largest-contentful-paint', buffered: true });
  </script>
</body>
</html>

LCP(Largest Contentful Paint)用于衡量用户体验，相对于FP，LCP对于用户而言更有意义。但因为LCP是启发式算法也有自身的局限：

  1. LCP算法会在发生用户输入时停止检测，这意味着如果用户操作发生在主要内容绘制之前LCP则没法捕获页面的主要内容，如果用户输入发生的太早甚至LCP算法无法捕获到任何元素。
  2. 出现过的最大图片即使被移除也会被认定为LCP，所以当应用有大的启动图首先展示时LCP算法会将其识别为LCP，但该图片对用户而言并无意义无法标识为对用户有意义的内容加载完成。

元素需要满足如下两个条件才能作为LCP候选元素：

  1. 元素的opacity > 0
  2. 是text node 或图片响应字节数 >= 元素有效视觉尺寸 * 0.004
    如果有效视觉尺寸远大于图片实际大小说明是用一些小的占位图，将其极度放大会很模糊，或者是重复填充，基本是一些无意义内容需要被排除在LCP外

能够成为LCP的元素有两类：

  1. 图片相关元素，<img>、<image> inside an SVG、<video>的海报图、有图片背景的元素
  2. 一组文本节点，例如<span>、<div>等

    因为只有图片相关元素和文本节点才会被算入LCP候选，所以只是有背景颜色的元素虽然视觉上可见但是并不会算作LCP

在这里插入图片描述

<div style="background-color: red; height: 100px;"></div>

文本节点：
文本节点需要可见，字体颜色不是透明并且opacity > 0，如果文本节点本身不可见（透明或opacity <= 0）判断text-shadow，stroke-color，stroke-image有一个属性能让文本节点能看到即可纳入LCP候选。
浏览器在渲染文本元素时会按行渲染，每一行都会生成一个对应的border-box，多行文本元素计算渲染面积时浏览器会生成一个最小能够覆盖当前元素下所有文本节点的区域，该区域大小就是LCP的size。如果多行文本之间有其他元素那么该元素占位也会被计算在内。

案例1，正常文本节点size计算

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>LCP Owned Text Nodes Test</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 50px;
    }
    #lcp-candidate {
      font-size: 24px;
      width: 600px;
      line-height: 1.5;
      border: 1px solid #ccc;
      padding: 20px;
    }
    .spacer {
      height: 40px;
      background-color: rgba(255, 0, 0, 0.1); /* 可视化占位区域 */
    }
  </style>
</head>
<body>
  <h1>Largest Contentful Paint Test</h1>

  <div id="lcp-candidate">
    <div class="spacer"></div>
    This is the first line of a block of text.<br>
    And this is the second line.<br>


    And here is the third line.
  </div>

  <script>
    // 用 PerformanceObserver 监听 LCP 候选项
    const observer = new PerformanceObserver((list) => {
      const entries = list.getEntries();
      for (const entry of entries) {
        console.log('LCP entry:', entry);
        const element = entry.element;
        element.style.outline = '4px solid red';
        element.setAttribute('data-lcp', 'true');
      }
    });

    observer.observe({ type: 'largest-contentful-paint', buffered: true });
  </script>
</body>
</html>

案例2，文本节点之间有其他元素间隔，会撑开包裹所有文本节点的最小矩形

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>LCP Owned Text Nodes Test</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 50px;
    }
    #lcp-candidate {
      font-size: 24px;
      width: 600px;
      line-height: 1.5;
      border: 1px solid #ccc;
      padding: 20px;
    }
    .spacer {
      height: 40px;
      background-color: rgba(255, 0, 0, 0.1); /* 可视化占位区域 */
    }
  </style>
</head>
<body>
  <h1>Largest Contentful Paint Test</h1>

  <div id="lcp-candidate">
    This is the first line of a block of text.<br>
    And this is the second line.<br>

    <div class="spacer"></div>

    And here is the third line.
  </div>

  <script>
    // 用 PerformanceObserver 监听 LCP 候选项
    const observer = new PerformanceObserver((list) => {
      const entries = list.getEntries();
      for (const entry of entries) {
        console.log('LCP entry:', entry);
        const element = entry.element;
        element.style.outline = '4px solid red';
        element.setAttribute('data-lcp', 'true');
      }
    });

    observer.observe({ type: 'largest-contentful-paint', buffered: true });
  </script>
</body>
</html>

案例3，子元素的文本如果在内联元素中会算作当前元素占据的size

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>LCP Owned Text Nodes Test</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 50px;
    }
    #lcp-candidate {
      font-size: 24px;
      width: 600px;
      line-height: 1.5;
      border: 1px solid #ccc;
      padding: 20px;
    }
    .spacer {
      height: 40px;
      background-color: rgba(255, 0, 0, 0.1); /* 可视化占位区域 */
    }
  </style>
</head>
<body>
  <h1>Largest Contentful Paint Test</h1>

  <div id="lcp-candidate">
    This is the first line of a block of text.<br>
    <span>
        And this is the second line.
    </span>
    <br>
    <span>spacer spacer spacer spacer spacer spacer spacer</span>
    <span>
      And here is the third line.
    </span>
  </div>

  <script>
    // 用 PerformanceObserver 监听 LCP 候选项
    const observer = new PerformanceObserver((list) => {
      const entries = list.getEntries();
      for (const entry of entries) {
        console.log('LCP entry:', entry);
        const element = entry.element;
        element.style.outline = '4px solid red';
        element.setAttribute('data-lcp', 'true');
      }
    });

    observer.observe({ type: 'largest-contentful-paint', buffered: true });
  </script>
</body>
</html>

案例4，子元素的文本如果在块级元素中则不会算作当前元素占据的size，同案例2，块元素的高度会计算在size内，但宽度不会

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>LCP Owned Text Nodes Test</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 50px;
    }
    #lcp-candidate {
      font-size: 24px;
      width: 600px;
      line-height: 1.5;
      border: 1px solid #ccc;
      padding: 20px;
    }
    .spacer {
      height: 40px;
      background-color: rgba(255, 0, 0, 0.1); /* 可视化占位区域 */
    }
  </style>
</head>
<body>
  <h1>Largest Contentful Paint Test</h1>

  <div id="lcp-candidate">
    This is the first line of a block of text.<br>
    <span>
And this is the second line.
    </span>
    <br>
    <div>spacer spacer spacer spacer spacer spacer spacer</div>
    <span>
      And here is the third line.
    </span>
  </div>

  <script>
    // 用 PerformanceObserver 监听 LCP 候选项
    const observer = new PerformanceObserver((list) => {
      const entries = list.getEntries();
      for (const entry of entries) {
        console.log('LCP entry:', entry);
        const element = entry.element;
        element.style.outline = '4px solid red';
        element.setAttribute('data-lcp', 'true');
      }
    });

    observer.observe({ type: 'largest-contentful-paint', buffered: true });
  </script>
</body>
</html>

图片节点lcp entry’s size的计算步骤

  1. 元素的imageRequest不是null
  2. 让concreteDimensions等于图片在元素里的实际尺寸
    元素本身尺寸，比如<img width="200" height="100">
    图像缩放（object-fit，background-size等）
  3. 让visibleDimensions等于图像可见部分
    会有object-position或background-position来调整图像位置导致图像只能部分可见
  4. 让clientContentRect等于能够包裹住可见图像的最小尺寸
    会有CSS的transform，scale，translate，rotate之类方式改变图像形状
  5. 让intersectingClientContentRect等于clientContentRect和视口相交的尺寸
    也就是真正在屏幕上能露出来的部分
  6. 让size = intersectingClientContentRect‘s width * height
    计算图像在屏幕上实际可见的面积，是LCP评估的重要指标
  7. 让naturalArea等于图片原始大小
    比如图片原始width = 100px height = 100px，那么naturalArea = 10000
  8. 如果naturalArea是0直接返回空，不计入LCP候选元素
    因为图像实际内容可能未加载，损坏，空图等，直接跳过
  9. 让boundingClientArea等于clientContentRect’width * height，是包裹图像最小矩形面积
  10. 让 scaleFactor = boundingClientArea / naturalArea. 判断图像是否被放大展示
    比如：
    • 原图大小是 100×100（naturalArea = 10,000）
      被放大显示为 200×200（boundingClientArea = 40,000）
    • 则 scaleFactor = 4
      如果 scaleFactor > 1, 将上面计算得到的size除以放大的倍数，计算真正的size。目的是为了防止误认为内容很多，其实图片很小，抹平误差。
      比如：
      <img src="small.jpg" width="100" height="100" style="width: 400px; height: 400px;">
    • naturalArea = 10,000
    • boundingClientArea = 160,000
    • scaleFactor = 16 → 被放大了 16 倍
      → LCP size 会被缩小 16 倍，以避免放大虚报

参考：

  1. Largest Contentful Paint
  2. LargestContentPaint
葡萄糖o_o
关注
把 ABAP CDS View 性能守住，少一点万能模型，多一点 SQL 常识
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
11-14 413
CDS View性能优化的核心在于回归SQL本质：避免过度复用导致的复杂JOIN，确保过滤条件能下推到底层表，精简字段暴露。HANA虽快，但无约束的大表JOIN仍昂贵。开发时应关注执行计划的中间结果规模，警惕导致materialization的操作模式。性能测试需使用接近生产规模的数据，才能发现潜在问题。CDS的现代写法不应违背传统SQL性能规律，合理设计视图层级和字段暴露才是关键。
前端性能优化 - 提升 LCP（Largest Contentful Paint）
weixin_47588164的博客
08-24 8018
是一个关键的 Web 性能指标，用于衡量网页的加载性能。具体来说，LCP 是指从用户请求页面开始到页面主体内容（如大图像、视频或大块文本）完全加载并显示在视口中所需的时间。LCP 越短，用户感受到的页面加载速度就越快，这对提升用户体验和页面留存率至关重要。为了获得良好的用户体验，Google 建议 LCP 时间在 2.5 秒以内。如果 LCP 超过 4 秒，则需要进行优化。三个关键指标中其它两个指标是FID（First Input Delay，首次输入延迟）和。
前端 Web 性能清单
热门推荐
努力是为了站在万人之中，成为别人的光
05-12 1万+
提高 Web 应用程序的性能是很重要的。我们希望页面加载得更快、更流畅，并且没有太多的布局变化。在这篇文章中，我想将关于这些的所有知识一一列出来。
聊一聊前端的性能指标
crg18438610577的博客
03-29 2574
前端性能优化这条路，道阻且长，行则将至，专研就会有进步。
性能指标LCP
weixin_45511682的博客
08-22 1525
LCP（Largest Contentful Paint）是衡量网页加载性能的核心指标之一，代表页面中最大内容元素渲染完成的时间。本文简要介绍了LCP的定义、谷歌的评分标准（≤2.5秒为良好），并分析了影响LCP的主要因素，如TTFB、资源加载和客户端渲染等。同时，提供了优化LCP的实用建议，如预加载关键资源、优化图片和使用CDN，并介绍了通过Lighthouse和JavaScript API测量LCP的方法，帮助开发者初步提升页面性能。
Excalidraw LCP优化：最大内容绘制加速
weixin_42504649的博客
12-21 645
通过CDN加速、资源预加载与SVG占位符技术，提前触发Excalidraw的LCP指标，结合AI内容缓存和分层渲染策略，实现首屏感知速度提升40%以上，显著改善用户留存与体验。
Vue骨架屏原理与SVG占位符实战：提升CLS和LCP性能
最新发布
weixin_30787531的博客
06-20 343
骨架屏（Skeleton Screen）是一种通过结构化占位符降低用户认知负荷的前端加载体验优化技术。其核心原理在于用符合真实DOM布局的灰色占位元素，替代传统旋转动画，从而避免布局抖动（Layout Shift）。在Web性能指标中，它直接改善CLS（累积布局偏移）与LCP（最大内容绘制），是Google Core Web Vitals达标的关键手段。技术实现上，SVG骨架屏因跳过浏览器Layout阶段、支持GPU加速和像素级控制，显著优于CSS或Canvas方案。本文聚焦vue-content-load
【Lovable电商网站搭建黄金标准】：基于137个真实项目数据验证的6项LCP/CLS/INP硬性阈值
AlgoInk的博客
05-25 135
Lovable电商网站搭建助你突破性能瓶颈，基于137个真实项目提炼6项LCP/CLS/INP硬性阈值。适用于高转化率电商场景，融合前端优化与核心Web Vitals达标策略，显著提升用户体验与SEO排名。值得收藏
什么是LCP和FCP指标
AmyGeng123的博客
06-13 5443
LCP（Largest Contentful Paint）和FCP（First Contentful Paint）是Web性能分析中的两个关键指标
揭秘LCP：如何让你的网站加载速度快到让用户惊叹
wenyang12的博客
10-10 3017
你是否曾经遇到过这样的情况：打开一个网页，等了好几秒，页面上的图片和文字才慢慢显示出来？这种等待体验不仅让用户感到沮丧，还可能导致他们直接关闭网页，转投竞争对手的怀抱。
前端优化-SEO
mmaqueshibei的博客
04-16 1373
不幸的是，除了 optional 之外的属性都会引发 re-layout，通过以上的其中一种方式。针对关键字体使用 <link rel=preload> ，提高优先级，让字体下载有更高概率赶在fcp之前，这样就能避免布局偏移。移除无用的css，并将它们移到需要的页面;尽可能的在网络请求时，给一个loading，或者占位符提示，避免用户在这段时间内进行操作。如果图片位于容器内，可以设置宽度为容器宽度，高度为auto，避免高度被固定为360px。比如，x:y的宽高比，指的是宽度x单位，高度y单位。
页面加载性能之LCP
找到Web
08-08 3320
LCP (Largest Contentful Paint) 是一个以用户为中心的性能指标，可以测试用户感知到的页面加载速度，因为当页面主要内容可能加载完成的时候，它记录下了这个时间点。一个快速的LCP，可以让用户感受到这个页面的可用性。 以往，对开发者而言，要测试一个页面主要内容加载并呈现给用户的速度是一个很大的挑战。 旧指标，像 load 和 DOMContentLoaded 并不是很好，因为它不一定跟用户屏幕上看到的内容相对应。然而新的以用户为中心的指标，比如 FCP (First Contentfu
基于java Web 训练管理系统设计与实现 源码 论文
qq_251836457的博客
06-17 1586
用户信息实体，主要包括 用户编号,用户名,密码,姓名,性别,出生日期,证件号,民族,政治面貌,单位,入伍时间,照片,班级,排 等信息实体。1 用户( 用户编号,用户名,密码,姓名,性别,出生日期,证件号,民族,政治面貌,单位,入伍时间,照片,班级,排 )讨论信息实体，主要包括 讨论编号,疑问,说明,发布人,发布时间,状态,回答 等信息实体。系统主要用户实体,班级实体,排实体,科目实体,成绩实体,教学视频实体,教学理论实体,讨论实体，如图所示。班级信息实体，主要包括 班级编号,班级 等信息实体。
Vue2 + flv.js 对接海康威视摄像头实现数据大屏实时视频监控（完整方案）
pony君的博客
06-18 330
本文介绍了在Vue2数据大屏中对接海康威视摄像头的完整方案，解决浏览器无法直接播放RTSP流的问题。通过对比HTTP-FLV、HLS、WebRTC等技术方案，最终采用HTTP-FLV为主+HLS为备选的策略，利用flv.js和hls.js实现低延迟视频监控。文章详细说明了整体架构设计、前端实现代码（包括分屏布局、播放器初始化等关键代码），并分享了实际项目中的技术选型经验和解决方案。该方案适用于工业MES系统、仓储管理等需要实时监控的场景，支持2x2/4x4分屏切换，已在淀粉厂MES系统中成功应用。
Node.js + Express 入门实战笔记-03-CORS
weixin_47138303的博客
06-18 254
浏览器会发请求，但若响应里没有合适的 CORS 头，浏览器会拦截 JS 读取响应，控制台才报 CORS 错。允许跨域请求携带 Cookie、 TLS 客户端证书（很少见）、HTTP 基本认证（浏览器弹窗那种，很少见）等凭证。预检通过后，浏览器才发真正的 POST（带 Authorization）是服务器通过响应头告诉浏览器「这个跨域请求我允许」的机制。所以 React（10086）请求 API（8080）属于。预检时声明客户端（浏览器）可以带哪些非简单请求头。浏览器缓存预检结果，减少重复 OPTIONS。
WebRTC AudioProcessing模块全景：AEC、NS、AGC、VAD一文讲清
琅嬛福地
06-15 157
`AudioProcessing` (APM) 是 WebRTC 的"音频 3A 引擎"，集成了回声消除（AEC）、噪声抑制（NS）、自动增益控制（AGC）、语音活动检测（VAD）等模块。理解 APM 的模块组合、参数配置和调试方法，是优化通话质量、降低背景噪声、提升语音清晰度的关键。
AI+时代的前端开发：框架演进、职业重构与未来十年展望
心有猛虎细嗅蔷薇
06-18 375
前端开发并未"死亡"，而是在 AI 的催化下经历一场深刻的范式转移。从"页面组装工"到"体验架构师"，从"技术执行者"到"AI 协作者"——这场变革淘汰的是固守旧范式的从业者，奖励的是拥抱变化、持续进化的学习者。未来十年，大前端的边界将被彻底打破，而站在技术与产品交汇点的全栈工程师，将成为最稀缺的资源。对于 Vue 生态的开发者而言，2026 年是一个关键节点：Vapor Mode 的成熟标志着 Vue 进入"易用且极致"的新时代，Nuxt 4 的全栈能力让 Vue 开发者可以触达更广阔的技术领域。
构建去中心化社交图谱：Lens + IPFS + EVM
ak123sbksn的博客
06-17 510
LensGraph SDK 的价值不在“又一个社交 DApp”，而在于提供最小可行图谱原语——它不存储、不索引、不运营，只做链上事实的翻译器。当你把嵌入钱包插件、D投票ao 页面、甚至硬件钱包固件时，Web3 社交才真正开始生长出自己的根系。✅ 当前 SDK 已开源：[github.com/lensgraph/sdk]9https://github.com/lensgraph/sdk)（MIT License）✅ 支持 TypeScript / ESM / Deno / Bun。
当 Agent 接管操作系统：鸿蒙 PC“第二操作系统”架构解析
qq_36863796的博客
06-17 3569
文章摘要： 随着AI时代的到来，传统操作系统（如Windows、HarmonyOS等）聚焦的“资源管理”模式正面临挑战。未来软件系统的核心需求转向“目标管理”，催生了运行于操作系统之上的“第二操作系统”——Agent Runtime。它承担任务规划、上下文管理、工具调度等新职责，形成“目标驱动”的新架构。HarmonyOS PC可能率先实现双层Runtime架构：底层HarmonyOS Kernel管理硬件资源，上层Agent Runtime与Workspace Runtime协同处理任务、上下文及工具调度
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值