企业官网建设流程全解析

作用

Performance面板用于录制页面加载或交互的完整过程，记录网络、JavaScript、样式布局、绘制和主线程任务的时间分布，通过LCP、CLS、INP分别评估加载性能、视觉稳定性和交互响应性，并结合Network、Main、Frames轨道定位具体瓶颈。

页面解读

基础概念

LCP

LCP(Largest Contentful Paint)，最大内容绘制。
它衡量的是：
从用户打开页面开始，到视口里最大的一块内容真正画出来，用了多久。
这块内容通常是一张大图、视频封面，或者一大段文字。

CLS

CLS(Cumulative Layout Shift)，累积布局偏移。
它衡量的是：
页面生命周期中，内容是否发生非预期跳动，导致用户误读或误点；用户主动操作引起的偏移通常不计入
它不是时间单位，0.13 不是 0.13 秒，而是一个无单位的分数。

INP

INP(Interaction to Next Paint)，交互到下一次绘制所需时间。
它衡量的是：
用户点击、点按或按键之后，界面多久给出视觉反馈。
INP 是 Core Web Vitals 之一，2024 年 3 月正式替代了 FID。

常用配置

1. 按 Ctrl+Shift+N 打开无痕窗口

   去除扩展、Cookie 和旧缓存，避免扩展与缓存污染结果。

2. 打开想要检测的网站
3. 按 F12 打开 DevTools
4. 切到 网络（Network） 面板，勾选 停用缓存（Disable cache）

   绕过浏览器缓存，模拟第一次下载

5. 切到 性能（Performance）面板
6. 右边环境设置：
   CPU：4× 或 6× 降速；
   网络：Fast 4G；

   设置CPU是为了模拟中低端手机，设置网络是为了模拟4G移动网络，暴露请求瀑布

7. 勾选“屏幕截图”

   没有截图，你只能看数字，容易误判。

8. 想观察内存趋势可以勾选“记忆”

如何开始录制

如果只想检测页面加载速度(LCP)，点击Record and reload会重新加载页面并开始录制整页加载过程

如果还想检测交互速度，点击开始录制即可。录制状态下刷新页面也可以检测LCP，会显示在第二条数据

检测结果分析

查看左侧栏的Insights自动诊断建议，了解有什么优化项。

还可以导出json文件然后交给AI让AI帮你分析提建议

阈值表