UD5工具箱
快速入门
打开 Web Vitals 基准测试器后，您将看到简洁的操作界面。界面分为三个主要区域：左侧是配置面板，用于设置页面参数和加载策略；中央是结果展示区，显示各项指标的评分和可视化图表；底部是优化建议区，提供针对性的改进建议。首次使用时，工具会加载一组默认的配置参数，模拟一个典型的内容型网站页面。您可以直接点击"开始评估"按钮，查看默认配置下的各项性能指标得分。默认配置模拟了一个包含 10 张图片、3 个 JavaScript 文件、2 个 CSS 文件的标准页面，在 4G 网络条件下的性能表现。
配置页面参数
在左侧配置面板的"资源"标签页中，设置页面包含的各类资源信息。"图片"区域：输入图片数量（如 15）、平均文件大小（如 200KB）、是否包含首屏大图。"JavaScript"区域：设置 JS 文件总数、总大小、是否有第三方脚本（如分析工具、广告脚本）、是否使用代码分割。"CSS"区域：设置 CSS 文件总数、总大小、是否使用关键 CSS 内联、是否使用非阻塞加载。"字体"区域：设置自定义字体数量和总大小、是否使用 font-display: swap。每个参数旁边都有信息图标，鼠标悬停可以查看该参数对性能指标的影响说明。参数修改后，中央的评估结果会实时更新。
配置加载策略和服务器环境
切换到"策略"标签页，配置页面的资源加载方式。"脚本加载"下拉框选择 JavaScript 的加载模式：同步加载（阻塞解析，性能最差但兼容性最好）、defer 属性（不阻塞解析，DOM 解析完成后执行）、async 属性（不阻塞解析，下载完立即执行）、type="module"（ES 模块方式加载，自动 defer）。"图片加载"下拉框选择图片策略：全部立即加载（loading="eager"）、全部懒加载（loading="lazy"）、首屏立即其余懒加载（推荐策略）。切换到"服务器"标签页，配置服务器环境参数：响应时间（TTFB，通常 50-500ms）、是否启用压缩（Gzip 或 Brotli）、HTTP 版本（HTTP/1.1、HTTP/2 或 HTTP/3）、是否使用 CDN。选择设备类型（移动设备或桌面设备）以调整网络和 CPU 模拟参数。
运行评估与解读结果
配置完成后，点击"开始评估"按钮。工具在几秒内完成计算，结果以多种可视化形式展示。顶部的"概览卡片"区域以大数字和颜色编码显示三个核心指标：LCP 的秒数（绿色/橙色/红色）、INP 的毫秒数（绿色/橙色/红色）、CLS 的数值（绿色/橙色/红色）。每个卡片下方显示评分等级和与目标值的差距。中间的"详细分析"区域以图表形式展示各项指标的构成因素，如 LCP 时间的分解（TTFB + 资源加载 + 渲染时间）。底部的"瓶颈列表"按影响程度排序显示影响性能的主要因素，每个瓶颈条目包含问题描述、影响量化和修复建议。解读结果时，建议首先关注核心指标的评分等级，然后查看瓶颈列表，优先解决影响最大的瓶颈。
创建和对比优化方案
在评估结果页面，点击"保存为基准"按钮将当前配置保存为基准方案。然后修改配置参数创建优化方案（如压缩图片大小、启用代码分割、设置关键 CSS 内联），点击"保存为方案"为优化方案命名。在"方案对比"页面可以看到所有保存方案的并排对比。对比表格显示每个方案的各项指标数值和评分等级，差异列高亮标记改进或退化的指标。点击"推荐最优组合"按钮，工具会分析各方案中优化措施的效果，推荐最佳的优化组合。对比结果可以导出为 Markdown 格式或直接截图保存。建议创建 3-5 个不同方向的优化方案进行对比，综合考虑优化效果和实施成本选择最适合的方案。
使用性能预算功能
工具的"性能预算"功能帮助开发者设定和追踪性能目标。在"预算"标签页中，为各项指标设定目标值：LCP 目标（如 2.0 秒）、INP 目标（如 150 毫秒）、CLS 目标（如 0.05）。设定预算后，每次评估结果会自动与预算对比。达标指标显示绿色勾号和剩余预算，未达标指标显示红色叉号和超出值。历史记录中也会标记每次评估是否达标。性能预算功能适合团队使用，可以在开发过程中持续监控性能是否满足预设标准。建议性能预算设定在"良好"阈值之上（如 LCP 目标 2.0s 而不是 2.5s），为性能波动预留缓冲空间。