构建一个性能出色、弹性良好且数据成本低的网站有几个核心目标。
对于每个目标，您都需要进行审核。
| 目标 | 为什么？ | 测试什么？ |
|---|---|---|
| 确保隐私、安全和数据完整性，并实现强大的 API 使用 | HTTPS 的重要性 | 为所有网站页面/路由和素材资源实现了 HTTPS。 |
| 提升加载性能 | 如果网站加载时间超过 3 秒，53% 的用户会放弃访问 | 可以异步加载或延迟加载的 JavaScript 和 CSS。为可交互时间和载荷大小设定目标：例如 3G 网络上的 TTI。设置性能预算。 |
| 减轻页面重量 | • 降低流量套餐有上限的用户的流量费用 • 降低 Web 应用存储空间要求，这对使用低配设备的用户尤为重要 • 降低托管和传送费用 • 提高传送性能、可靠性和弹性 | 设置页面重量预算：例如，首次加载大小不超过 400 kB。检查是否有繁重的 JavaScript。 检查文件大小，找出臃肿的图片、媒体、HTML、CSS 和 JavaScript。查找可以延迟加载的图片，并使用覆盖率工具检查未使用的代码。 |
| 减少资源请求 | • 减少延迟时间问题 • 降低服务费用 • 提高服务性能、可靠性和弹性 | 查找对任何类型资源的过多或不必要的请求。例如：重复加载的文件、加载了多个版本的 JavaScript、从未使用的 CSS、从未查看（或可以延迟加载）的图片。 |
| 优化内存用量 | 内存可能会成为新的瓶颈，尤其是在移动设备上 | 使用 Chrome 任务管理器，比较您的网站与其他网站在加载首页和使用其他网站功能时的内存用量。 |
| 降低 CPU 负载 | 移动设备的 CPU 性能有限，尤其是低规格设备 | 检查是否存在大量 JavaScript。使用覆盖率工具查找未使用的 JavaScript 和 CSS。 检查是否存在过大的 DOM 尺寸以及在首次加载时运行的不必要脚本。查找以多个版本加载的 JavaScript，或通过少量重构即可避免使用的库。 |
有多种工具和技术可用于审核网站：
- 系统工具
- 内置浏览器工具
- 浏览器扩展程序
- 在线测试应用
- 模拟工具
- 数据分析
- 服务器和业务系统提供的指标
- 屏幕和视频录制
- 手动测试
下文介绍了每种类型的审核分别适用哪种方法。
记录资源请求：数量、大小、类型和时间
在审核网站时，最好先使用浏览器的网络工具检查网页。 如果您不确定如何执行此操作，请参阅 Chrome 开发者工具网络面板入门指南。 Firefox、Safari、Internet Explorer 和 Edge 也提供了类似的工具。
请务必在做出更改之前记录结果。对于网络请求，这可以像屏幕截图一样简单，您也可以将配置文件数据保存为 JSON 文件。如需详细了解如何保存和分享测试结果，请参阅下文。
在开始审核网络使用情况之前，请务必停用浏览器缓存，以确保获得准确的首次加载性能统计信息。如果您已通过 Service Worker 进行缓存，请清除 Cache API 存储空间。您可能需要使用无痕式（私密）窗口，这样您就不必担心停用浏览器缓存或移除之前缓存的条目。
以下是您应使用浏览器工具检查的一些核心功能和指标：
- 加载性能：Lighthouse 会提供加载指标摘要。Addy Osmani 撰写了一篇关于网页加载的关键用户时刻的精彩总结。
- 用于加载和解析资源以及内存用量的时间轴事件。如果您想更深入地了解，请运行内存和 JavaScript 性能分析。
- 页面总重量和文件数量。
- JavaScript 文件的数量和大小。
- 任何特别大的单个 JavaScript 文件（例如，超过 100KB）。
- 未使用的 JavaScript。您可以使用 Chrome 覆盖率工具进行检查。
- 图片文件的总数和总大小。
- 任何特别大的单个图片文件。
- 图片格式：是否有可以采用 JPEG 或 SVG 格式的 PNG 图片？WebP 是否与后备格式搭配使用？
- 是否使用了自适应图片技术（例如 srcset）。
- HTML 文件大小。
- CSS 文件的总数和权重。
- 未使用的 CSS。（在 Chrome 中，使用覆盖率面板。）
- 检查其他资源（例如 Web 字体，包括图标字体）是否存在问题。
- 检查 DevTools 时间轴，看看是否有任何内容阻止了网页加载。
如果您使用的是快速 Wi-Fi 或快速移动网络连接，请使用低带宽和高延迟模拟进行测试。请务必在移动设备和桌面设备上进行测试，因为有些网站会使用 UA 嗅探功能，针对不同的设备提供不同的资源和布局。您可能需要使用远程调试在实际硬件上进行测试，而不仅仅是使用设备模拟。
检查内存和 CPU 负载
在进行更改之前，请记录内存和 CPU 使用情况。
在 Chrome 中，您可以通过“窗口”菜单访问任务管理器。这是一种检查网页要求的简单方法。
测试首次加载和后续加载性能
Lighthouse、WebPagetest 和 Pagespeed Insights 可用于分析速度、数据费用和资源使用情况。WebPagetest 还会检查静态内容缓存、第一字节时间，以及您的网站是否有效利用了 CDN。
保存结果
- WebPagetest：每个测试结果都有自己的网址。
- Pagespeed Insights：在线 Pagespeed Insights 工具现在包含 Chrome 用户体验报告数据，其中突出显示了实际性能统计信息。
- Lighthouse：点击下载按钮，保存 Chrome 开发者工具“审核”面板中的报告：
测试核心渐进式 Web 应用要求
Lighthouse 可帮助您测试安全性、功能、无障碍性、性能和搜索引擎性能。具体而言，Lighthouse 会检查您的网站是否成功实现了 PWA 功能，例如 Service Worker 和 Web 应用清单。
Lighthouse 还会测试您的网站能否提供可接受的离线体验。
您可以将 Lighthouse 报告下载为 JSON 格式，或者如果您使用的是 Lighthouse Chrome 扩展程序，则可以将报告作为 GitHub Gist 进行分享：点击分享按钮，选择“在查看器中打开”，然后在新的窗口中再次点击分享按钮，并选择“另存为 Gist”。
使用分析、事件跟踪和业务指标来跟踪实际效果
如果可以，请在实施更改之前记录分析数据：跳出率、页面停留时间、退出网页，以及与您的业务要求相关的任何其他数据。
如果可能，请记录可能受影响的业务和技术指标，以便在做出更改后比较结果。例如：电子商务网站可能会跟踪每分钟订单数，或记录压力和耐力测试的统计信息。如果您减少页面重量和资源请求，后端存储费用、CPU 要求、投放费用和弹性可能会有所改善。
如果您尚未实现分析功能，现在正是时候！业务指标和分析数据是衡量网站是否正常运行的最终标准。如果合适，请针对用户操作（例如按钮点击和视频播放）添加事件跟踪。您可能还需要实现目标流分析：用户导航到“转化”的路径。
您可以关注 Google Analytics 网站速度，了解效果指标与业务指标之间的关联。例如：“首页加载速度有多快？”与“通过首页进入网站是否促成了销售？”
Google Analytics 使用来自 Navigation Timing API 的数据。
您可能希望使用某个 JavaScript 性能 API 或您自己的指标来记录数据，例如：
const subscribeBtn = document.querySelector('#subscribe');
subscribeBtn.addEventListener('click', (event) => {
// Event listener logic goes here...
const lag = performance.now() - event.timeStamp;
if (lag > 100) {
ga('send', 'event', {
eventCategory: 'Performance Metric'
eventAction: 'input-latency',
eventLabel: '#subscribe:click',
eventValue: Math.round(lag),
nonInteraction: true,
});
}
});
您还可以使用 ReportingObserver 检查浏览器弃用和干预警告。 这是众多用于从实际用户那里获取真实、实时测量数据的 API 之一。
真实体验：录屏和录像
录制移动设备和桌面设备上的网页加载视频。如果帧速率较高，并且添加了计时器显示，效果会更好。
您可能还需要保存抓屏。Android、iOS 和桌面平台上有许多屏幕录制应用（以及执行相同操作的脚本）。
录制网页加载视频的工作原理与 WebPagetest 中的幻灯影片视图或 Chrome 开发者工具中的截取屏幕截图非常相似。您会获得网页组件加载速度的真实记录：哪些组件加载速度快，哪些组件加载速度慢。保存视频录制内容和屏幕录制内容，以便与后续改进进行比较。
通过前后对比，可以很好地展示改进效果！
还有什么？
如果相关，请获取网页臃肿度得分。这是一个有趣的测试，但也是一种令人信服的方式，可以展示代码膨胀，或展示您已做出的改进。
What Does My Site Cost?（如下所示）大致说明了在不同地区加载网站的财务成本。
还有许多其他独立工具和在线工具可供使用：请访问 perf.rocks/tools。