1. LCP (更大内容绘制)：测量页面主要内容（如横幅图、标题）加载完成的时间。理想状态是 2.5秒内。

2. FID (初次输入延迟)：测量用户初次与页面交互（如点击链接、按钮）到浏览器实际响应该交互的时间。要求低于 100毫秒。

3. CLS (累积布局偏移)：测量页面视觉稳定性。意外的元素移动（如图片加载后突然撑开布局）会严重影响体验。分数应 低于0.1。

你的优化工作应紧紧围绕改善这三个指标展开。可以使用 Google PageSpeed Insights、Lighthouse（内置于Chrome开启者工具）或 WebPageTest 等工具进行初始评估，获取基准数据。

二、 优化实战：分步骤实施指南

步骤一：优化资源加载——让关键内容先出来

目标是让用户尽可能早地看到页面核心内容（改善LCP）。

1. 压缩与优化图片：

要点：图片通常是更大的资源。无条件对所有图片进行压缩。

操作：

使用 WebP 等现代格式，它能提供比JPEG/PNG更好的压缩率。

使用像 TinyPNG、Squoosh 这样的在线工具或构建工具（如 `imagemin`）进行无损压缩。

根据显示尺寸提供响应式图片（通过 `srcset` 属性），避免用3000px的大图在手机屏幕上显示。

对非关键图片使用懒加载（`loading="lazy"`）。

2. 移除阻塞渲染的资源：

要点：CSS和JavaScript会阻塞浏览器渲染页面。

操作：

内联关键CSS：将首屏内容所必需的小巧CSS样式直接内嵌在HTML的 `