说实话，优化Web性Neng这事儿吧，咱就是说是个老生常谈的话题，但又特别重要。

因为它直接影响用户体验，进而影响用户留存和业务收入，这不是假设，而是有大量真实数据支撑的结论。

根据某年的行业数据：页面加载时间每增加1秒，用户的跳出率就会增加32%，你懂的，这是一个hen恐怖的数字。

Core Web Vitals 是 Google 定义的三个核心用户体验指标，是性Neng优化的重中之重。

这三个指标分别是：LCP、INP 和 CLS，哈哈，是不是有点懵？

别急，咱慢慢聊。

定义从页面开始加载到视口中Zui大的图片或文本块完成渲染的时间。

阈值良好 <2.5 秒

需要特别注意的是浏览器会排除"无意义"的内容，例如透明度为0的元素、尺寸为0的元素等，不会将其计为 LCP 候选元素。

得找到 LCP 图片的加载时间：在 Network 面板的请求列表中，右键任意列标题，勾选 Priority 列，Ke以kan到每个资源的加载优先级。

LCP 图片的优先级应该是 Highest，Ru果显示为 Low 或 Medium，就需要使用 fetchpriority="high" 属性来提升它。

定义浏览器第一次渲染任何文本、图像、非白色 canvas 或 SVG 的时间。

FCP 是用户感知到"页面开始加载"的时间点，是 LCP 的前置指标。Ru果 FCP 就hen慢，LCP 一定不会快。

定义从浏览器发出 HTTP 请求到接收到第一个字节响应的时间。

TTFB 是所有加载指标的基础，它反映的是服务器响应速度和网络延迟。Ru果 TTFB hen高，无论前端如何优化，LCP douhen难达标。

Lighthouse 是Zui适合初学者入手的性Neng分析工具，它Neng一键给出综合评分和改进建议。

使用步骤面板上方Ke以选择：ModeDeviceCate-gories。建议勾选 Clear storage 模拟新用户首次访问。

Performance 面板是Zui强大也Zui复杂的性Neng分析工具，它Neng录制页面运行时的每一帧，让你kan到 JavaScript 执行、样式计算、布局绘制的完整时间线。

① 概览区域 ：拖动下方的灰色选区Ke以放大特定时间段，方便精细分析。 时间线上会有几条垂直的彩色线，对应关键时间点： FCP 绿线、 LCP 绿线、 DCL 蓝线、 Load 红线， 你得kan懂这些标记线哈。

② 主线程区域 ：在 Main 区域，找到顶部有 红色三角形 的任务块，这些就是超过 50ms 的长任务。展开这个任务块，Ke以kan到火焰图。 火焰图是从上到下的函数调用栈： Zui顶层是入口函数， 往下每一层是被调用的子函数。 咱得找到Zui耗时的叶子函数，优先优化它。 说实话，这个过程有点像侦探破案，一个个线索排查下去。 害，你得耐心点。

定义 ：衡量用户与页面的每次离散交互从交互发生到下一帧绘制的延迟时间。INP 取的是页面整个生命周期内所有交互延迟的Zui大值。 INP 于某年某月正式替代 FID成为 Core Web Vitals 的一部分。INP 比 FID geng严格，因为它衡量的是整个页面生命周期内的交互响应，而不仅仅是首次交互。 你kan，这玩意儿要求可真高！ 咱得好好优化才是。 要不然用户体验就没法保证了。 那咋优化呢？ 得识别长任务： 在 Performance 面板中，有一条 Interactions 轨道，记录了所有被计入 INP 的用户交互。 点击某条交互记录，Ke以展开kan三个阶段的耗时： Input Delay、 Processing、 Presentation， 咱得kankan哪个阶段耗时Zui长，然后对症下药。 说白了就是找到瓶颈，然后优化呗！ 嗯，就这样！ 不过话说回来 优化这事儿吧，说起来容易Zuo起来难， 得不断测试，不断调整， 才Neng达到Zui佳效果， 这需要耐心和毅力哈！ 所以说嘛， 性Neng优化是一场持久战， 不是一朝一夕就Neng完成的， 但只要咱坚持下去， 总Neng见到成效的！ 加油吧！ 兄弟们！ 🤩 全网Zui全面的web性Neng优化详解, 文中用到的工具方法性Neng工具方法库, 免费的面试合集 - 不想给star就算了😂, 整理不易，给个免费的star就行了你kan着办吧！👍 是不是有点啰嗦了？ 啊，不管了反正咱是想帮你搞定web性Neng优化这事儿！💪 好了不废话了 希望这篇文章对你有帮助！👏 完结撒花！🎉 .push; 咱们下次再见！👋 拜拜~ 👋