LCP

最大内容绘制 (LCP) 是核心 Web 指标中的一项指标，用于测量可视区域中最大内容元素变为可见的时间点。该项指标可用于确定页面主要内容在屏幕上完成渲染的时间点。

导致 LCP 不佳的最常见原因是：

• 缓慢的服务器响应速度。您首先需要做的是改进服务器处理内容的方式和位置。可以使用TTFB来含量
• 阻塞渲染的 JavaScript 和 CSS
• 缓慢的资源加载速度
• 客户端渲染

如何测量

可以在 JavaScript 中使用 PerformanceObserver API 或者直接使用 web-vitals 库获取当前页面的 LCP 分值，进而采集到生产环境用户端真实的性能数据。

// 使用PerformanceObserver API  
new PerformanceObserver((entryList) => {  
  for (const entry of entryList.getEntries()) {  
    console.log('LCP candidate:', entry.startTime, entry);  
  }  
}).observe({ type: 'largest-contentful-paint', buffered: true });

import { onLCP } from "web-vitals";
 
// 当 LCP 可用时立即进行测量和记录。
onLCP(console.log);

如何优化

• Externals
• tree-shaking
• 预加载关键资源
• 让元素合理地成为页面的 LCP 资源。
  • 实际上如果 LCP 资源不依赖网络层的业务请求，而是在页面开始渲染阶段就开始加载，LCP 的效果会更好。

关键信息判断	结论
决定最大内容块的元素类型？	img, video ,svg 内的 image 元素, 通过url()加载背景图片的元素,包括文本节点或者其他内敛文本元素子级的块级元素
决定元素大小？	用户在视口中可见的大小，如元素超出在视口之外，超出部分不会计入元素大小
何时报告最大内容块？	首次内容绘制开始到用户与页面互动（点击，滚动，按键等）为止