网站性能指标与测评工具

网站性能评估不能只看网络加载耗时。用户的真实感受还包括页面是否响应、交互是否流畅、动画是否顺滑。传统 load、DOMContentLoaded 只代表浏览器内部事件，不能直接当作用户体验分数。

W3C Web 性能标准指标

TTFB、FP、FCP、DOMContentLoaded、load 均归属 W3C Web Performance 系列规范（Navigation Timing、Paint Timing），浏览器通过原生 Performance API 对外暴露，适合线上 RUM（真实用户监控）采集。

基础诊断计时指标（Navigation Timing 规范）

这类指标偏向网络、文档生命周期诊断，不作为用户体验的核心评判标准。

• TTFB（Time to First Byte）：请求发起，到收到服务器返回第一个字节；包含 DNS、TCP、SSL握手，反映服务器与网络响应速度。
• DCL（DOMContentLoaded）：HTML文档解析完成触发，不等待图片、样式、字体等资源加载完成。
• Load（load事件）：页面全部资源（图片、样式、脚本）全部加载完毕。
• FP（First Paint 首次绘制）：浏览器第一次向屏幕绘制像素，可以只是背景色，不一定存在业务内容（Paint-Timing）。
• FCP（First Contentful Paint 首次内容绘制）：浏览器第一次渲染DOM输出真实内容（文本、图片、SVG、Canvas），代表用户第一次看到页面内容，但不等于核心业务内容渲染完成（Paint-Timing）。

Core Web Vitals 核心 Web 指标（现代用户体验标准，RUM 首选）

W3C、Google 用户体验标准，2024 年 INP 正式替代 FID，是线上监控、SEO 评估的核心指标。

• LCP（Largest-Contentful-Paint 最大内容绘制）：加载体验，视口内最大业务内容渲染完成时间，代表用户看到主要内容，理想阈值 ≤2.5s。
• INP（Interaction-to-Next-Paint 交互至下一绘制）：交互体验，用户点击/输入，到浏览器完成下一帧绘制的延迟，理想阈值 ≤200ms。
• CLS（Cumulative-Layout-Shift 累积布局偏移）：视觉稳定性，页面元素意外发生位移的总分，理想阈值 ≤0.1。

辅助诊断指标

• Long Task 长任务：主线程阻塞超过50ms JS任务，直接造成点击卡顿、动画掉帧，出自 Long-Tasks API，用于定位卡顿根因。
• TTI（Time to Interactive，可交互时间）：不属于 W3C 正式标准。Lighthouse 10 起已从 Performance 得分中移除（权重归到 CLS），实验室更常用 TBT（Total Blocking Time）。不要用于线上 RUM 采集。

体验－指标对照表

采集说明：全部指标通过浏览器原生 PerformanceObserver API 获取；Google 提供轻量库 web-vitals，封装好RUM采集逻辑，可直接上报后端。

性能测评工具

性能工具分为在线SaaS平台、本地Chrome工具、命令行自动化工具。

工具本质是模拟浏览器访问页面，采集Performance API指标、做规则审计；工具输出属于实验室环境数据，不等同于真实线上用户RUM数据。

Lighthouse

核心：Chrome 内置开源性能审计工具，也是 PageSpeed Insights、GTmetrix 等平台的底层内核。

实现原理：

• 基于Chrome DevTools Protocol（CDP）驱动Chrome；
• 打开页面，应用指定视口、CPU/网络节流；
• 通过CDP采集Performance API、Trace追踪、资源请求日志；
• 运行上千条审计规则，输出五大维度报告：Performance、PWA、无障碍、最佳实践、SEO。

注意：Lighthouse 输出是实验室模拟数据，不能替代线上真实 RUM；TTI 已从 Lighthouse 10 的得分中移除，报告里以 FCP、LCP、TBT、CLS、Speed Index 为主。

使用方式

Chrome DevTools

• Chrome 打开页面 → F12 开发者工具 → Lighthouse 面板（Chrome 已内置，无需再装扩展）；
• 勾选需要审计类别，勾选模拟移动设备、模拟节流；点击「生成报告」；
• 拿到可视化报告，点开每一项查看具体原因和优化建议。

命令行 lighthouse

npm install -g lighthouse

运行，输出json报告，可保存文件，供内部平台解析。

lighthouse https://xxx.com --view --output json --output-path=report.json --preset=mobile

CI中可以解析报告，对LCP、Lighthouse得分设置门禁，版本构建性能退化阻断合并。

Node.js编程调用

在Node脚本中直接引入lighthouse模块，搭配puppeteer控制浏览器，可自定义cookie、请求头、内网页面。适合搭建内部私有性能测试平台。

性能核心指标

PageSpeed Insights

地址：https://developers.google.com/speed/pagespeed/insights/

实现原理：

• 后端调用 Lighthouse 内核，使用受控的Chrome Headless无头浏览器实例访问目标网页；
• 模拟移动/桌面设备视口、网络节流；
• 采集Web Vitals等性能指标，同时执行一批预定义审计规则：资源体积、图片格式、JS未懒加载、未开启缓存等；
• 将原始指标、审计结果，换算成 0－100 的综合得分，输出优化建议链接。

如何落地使用：

• 1. 网页直接使用：输入页面URL，选择移动端/桌面，直接在线查看报告，复制优化建议给到开发。
• 1. API集成：提供官方API，可以在CI流水线调用，拿到JSON报告，做线上性能门禁。

GET https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://xxx.com&strategy=mobile

注意：API有调用配额，高频CI需要做缓存、配额管控。

适用场景：公网页面快速评测；SEO配套Core Web Vitals检查；CI做简单性能门禁。

局限：无法测内网、登录态页面；受Google服务器网络访问限制；不能自定义复杂网络节流规则。

GTmetrix

地址：https://gtmetrix.com/

实现原理：

• 底层以 Lighthouse 为默认引擎（2020 年起替代 PageSpeed、YSlow）；YSlow 仅作为账号里可开关的 Legacy Report，新项目按 Lighthouse 指标看即可；
• 在全球多地域节点启动 Chrome 无头浏览器，可选择不同测试地区、浏览器、网络节流；
• 采集页面全部资源 HAR 请求日志、性能指标；持久化历史数据，提供时序图表、告警。

如何落地使用：

• 网页端手动测试：输入URL，选择测试服务器地区、设备、网络；支持配置Cookie，可测试登录后页面；查看HAR瀑布图，定位慢请求。
• 定时监控（注册账号）：设置每日/每周定期跑测试；配置告警阈值（LCP、总资源大小），指标异常通知；查看历史性能趋势，观察版本发布后性能退化。
• REST API自动化集成：通过API提交测试任务，轮询获取报告JSON；接入CI，或者内部性能平台。

注意：免费版API有额度，高频使用需要付费套餐。

适用场景：需要多地域测试；要分析完整网络HAR瀑布；需要历史性能趋势；需要测登录态页面。

局限：免费版并发、测试次数有限；国内访问海外节点网络波动会干扰测试结果。

自动化性能数据采集

线上业务需要采集真实用户性能数据（RUM），可以两种方案：

• 浏览器端：使用web-vitals库，直接在用户浏览器采集指标上报服务端；
• 测试环境：借助 Puppeteer 无头浏览器，模拟访问页面，读取浏览器性能指标入库做回归测试。

Puppeteer 采集示例

const browser = await puppeteer.launch({
  devtools: true,
  headless: false,
  defaultViewport: {
    width: 375,
    height: 667
  }
})
const page = await browser.newPage();
// 设置 Cookie，用于需要登录态的页面
await page.setCookie({
    name: 'token',
    value: '',
    domain: '.abc.com',
    path: '/',
    expires: 1893456000000,
    httpOnly: false,
    secure: false,
    sameSite: "Strict"
});
await page.goto('https://xxx.com');
// Navigation Timing Level 2，不要再用已废弃的 performance.timing
const nav = await page.evaluate(() => {
  const entry = performance.getEntriesByType('navigation')[0];
  return entry ? entry.toJSON() : null;
});
// 将 nav 存入数据库做统计
await browser.close();

Chrome 网络节流预设参考

测试弱网环境页面表现，可以使用下面的带宽、RTT配置。 | Preset | download(kb/s) | upload(kb/s) | RTT(ms) | | ---------- | -------------: | -----------: | ------: | | GPRS | 50 | 20 | 500 | | Regular 2G | 250 | 50 | 300 | | Good 2G | 450 | 150 | 150 | | Regular 3G | 750 | 250 | 100 | | Good 3G | 1000 | 750 | 40 | | Regular 4G | 4000 | 3000 | 20 | | DSL 2000 | 1000 | 5 | - | | WiFi 30000 | 150000 | 2 | - |

其他统计工具

• Google Analytics：用户行为、访问数据统计；
• Adobe Analytics（原 Omniture）：商业级用户数据分析平台；
• web-vitals 库：Google 官方库，浏览器端采集 Core Web Vitals 真实用户指标。

前端性能优化方案

懒加载（减少初始JS体积）

把代码切割为 chunk，只有用到的时候才加载，降低首屏 JS 下载解析开销。

export default {
  components: {
    Abc: () => import('./abc.vue')
  }
}

组件库按需引入

针对 UI 组件库，只打包用到的组件，剔除未使用模块，减少产物大小。Vue 2 时代常用 babel-plugin-component（如下）；现行项目多用 unplugin-vue-components 或各库官方的按需插件。

{
  "plugins": [
    "transform-runtime",
    [
      "component",
      [
        {
          "libraryName": "mint-ui",
          "style": true
        },
        {
          "libraryName": "bxs-ui-vue",
          "libDir": "lib",
          "style": "index.css"
        }
      ]
    ]
  ]
}

webpack externals 外部扩展

第三方库不打入业务bundle，页面通过CDN脚本引入，构建时排除这些包，缩减打包体积。

<!-- html引入CDN -->
<script src="//assets.winbaoxian.com/vue/2.5.17/vue.min.js"></script>

// webpack配置
module.exports = {
  externals: {
    vue: 'Vue'
  }
}

静态资源部署到 CDN

图片、js、css 等静态资源上传 CDN，利用 CDN 节点加速分发，降低源站压力。

实验室分数用来找瓶颈，线上 RUM（LCP、INP、CLS）才代表用户真实体验。优化优先砍首屏 JS、按需加载，再把静态资源放到 CDN。

参考链接

Web Vitals 官方文档

Paint Timing W3C规范

Navigation Timing 2 W3C规范

Long Tasks API

web-vitals npm