企业官网建设流程全解析

一、前端常用 8 大性能指标

1. FP（First Paint）首次绘制

• 是什么：浏览器第一次在屏幕上画出像素（哪怕是背景色）。
• 衡量：页面从白屏 → 不再白屏的时间。
• 优化目标：越快越好。
• 影响因素：HTML 加载速度、TTFB、关键 CSS。

2. FCP（First Contentful Paint）首次内容绘制

• 是什么：第一次渲染有内容（文本、图片、svg 等）。
• 比 FP 更有意义，因为 FP 可能只是个背景。
• 优化目标：＜1.8s 优秀，＜3s 可接受。
• 优化方向：
  • 缩短 TTFB
  • 内联关键 CSS
  • 不阻塞渲染

3. LCP（Largest Contentful Paint）最大内容绘制（WebVitals 核心）

• 是什么：视口中最大的那块内容渲染完成时间。
  通常是：首屏大图、大标题、封面图。
• 最重要的加载体验指标。
• 目标：≤2.5s 优秀，2.5~4s 需优化，＞4s 差。
• 优化：
  • 图片优化（WebP、压缩、宽高比）
  • 预加载 LCP 图片
  • 减少首屏 JS 阻塞

4. TTFB（Time To First Byte）首字节时间

• 是什么：请求发出去 → 收到第一个字节的时间。
• 代表服务端响应速度 + 网络速度。
• 目标：＜600ms 优秀。
• 优化：
  • CDN
  • 服务端缓存
  • 接口优化

5. TBT（Total Blocking Time）总阻塞时间

• 是什么：主线程任务 >50ms 的阻塞时间总和。
• 例：一个 210ms 长任务 → 阻塞 160ms。
• 目标：＜200ms 优秀。
• 优化：
  • 拆长任务
  • 懒执行非关键 JS
  • Web Worker

6. FID（First Input Delay）首次输入延迟（老核心）

• 是什么：用户第一次点击 / 输入 → 浏览器开始处理事件的延迟。
• 衡量交互是否卡。
• 目标：≤100ms。

7. INP（Interaction to Next Paint）新核心交互指标（必学）

• 是什么：全程所有交互的响应速度，取最差的那个。
• 点击 → 页面更新 的耗时。
• Google 2024 新核心 Web 指标，完全替代 FID。
• 目标：≤200ms 优秀。
• 影响：长任务、回流重绘、JS 执行太久。
• 优化：
  • 拆长任务
  • 防抖节流
  • 减少同步布局

8. CLS（Cumulative Layout Shift）累积布局偏移（核心）

• 是什么：页面加载过程中，元素突然乱跳的总和。
• 最影响用户体验的指标之一。
• 目标：≤0.1 优秀。
• 罪魁祸首：
  • 图片没设宽高
  • 字体闪烁
  • 动态插入广告、弹窗
  • 没给占位容器

二、八大指标

三、关键：它们之间的顺序关系

加载顺序永远是：

1. TTFB（服务器响应）
2. FP（第一次画）
3. FCP（第一次内容）
4. LCP（最大内容出来）
5. 然后用户交互：FID / INP
6. 全程伴随：CLS（布局稳不稳定）
7. 主线程：TBT（卡不卡）

分类

一、加载类指标

1. FP（First Paint）首次绘制
   浏览器第一次在屏幕绘制像素，标志页面不再白屏。
2. FCP（First Contentful Paint）首次内容绘制
   第一次渲染实际内容：文本、图片、SVG 等。
   目标：＜1.8s 优秀。
3. LCP（Largest Contentful Paint）最大内容绘制
   视口中最大内容渲染时间，最重要加载指标。
   目标：≤2.5s。
   优化：图片优化、预加载、减少阻塞。
4. TTFB（Time To First Byte）首字节时间
   请求发起到收到第一个字节，代表服务端 + 网络速度。
   目标：＜600ms。

二、主线程 & 交互类指标

5. TBT（Total Blocking Time）总阻塞时间
   所有长任务（>50ms）的阻塞时间总和。
   目标：＜200ms。
6. FID（First Input Delay）首次输入延迟
   用户第一次交互到浏览器响应的时间。
   目标：≤100ms。
7. INP（Interaction to Next Paint）全程交互体验
   2024 新核心指标，替代 FID。
   统计所有交互，取最慢值。
   目标：≤200ms。

三、视觉稳定性指标

8. CLS（Cumulative Layout Shift）累积布局偏移

• 页面元素意外跳动的总分值。
• 目标：≤0.1。
• 常见原因：图片无宽高、动态插入内容、字体闪烁、无占位。

四、指标出现顺序

TTFB → FP → FCP → LCP → 交互（FID/INP）
全程：CLS、TBT