使用工具衡量效果

Sam Dutton

若要构建性能出色且具有高弹性的网站，并降低数据费用，需要实现以下几个核心目标。

您需要针对每个目标进行审核。

有各种工具和方法可用于审核网站：

• 系统工具
• 内置浏览器工具
• 浏览器扩展程序
• 在线测试应用
• 模拟工具
• 分析
• 服务器和业务系统提供的指标
• 屏幕录制和视频录制
• 手动测试

下文介绍了适用于每种类型审核的方法。

记录资源请求：数量、大小、类型和时间

在审核网站时，不妨先使用浏览器的网络工具检查网页。如果您不确定如何操作，请参阅 Chrome DevTools 网络面板的入门指南。Firefox、Safari、Internet Explorer 和 Edge 也有类似的工具。

请务必先记录结果，然后再进行更改。对于网络请求，只需截取屏幕截图即可；您也可以将配置数据保存为 JSON 文件。下面详细介绍了如何保存和分享测试结果。

在开始审核网络使用情况之前，请务必停用浏览器缓存，以确保您获得有关首次加载性能的准确统计信息。如果您已通过服务工作线程进行缓存，请清除 Cache API 存储空间。您可能需要使用无痕式（私密）窗口，这样就不必担心停用浏览器缓存或移除之前缓存的条目。

以下是您应使用浏览器工具检查的一些核心功能和指标：

• 加载性能：Lighthouse 会提供加载指标摘要。Addy Osmani 撰写了一篇关于网页加载关键用户体验时刻的绝佳摘要。
• 用于加载和解析资源以及内存用量的时间轴事件。如果您想深入了解，请运行内存和 JavaScript 性能分析。
• 网页总大小和文件数量。
• JavaScript 文件的数量和大小。
• 任何特别大的单个 JavaScript 文件（例如超过 100KB）。
• 未使用的 JavaScript。您可以使用 Chrome 覆盖率工具进行检查。
• 图片文件的总数和大小。
• 任何特别大的单个图片文件。
• 图片格式：是否有 PNG 可以转换为 JPEG 或 SVG？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 DevTools 中的截取屏幕截图非常相似。您可以获得网页组件加载速度的真实记录：哪些组件加载速度快，哪些组件加载速度慢。保存视频录制内容和屏幕录制内容，以便与日后进行的改进进行比较。

并排比较改进前后效果是展示改进效果的绝佳方式！

还有什么？

获取网站膨胀得分（如果适用）。这是一个有趣的测试，但也可以用来直观地展示代码膨胀情况，或者展示您所做的改进。

下方的 What Does My Site Cost? 网站提供了有关在不同地区加载网站的财务成本的粗略估算。

还有许多其他独立工具和在线工具可供使用：请访问 perf.rocks/tools。