使用工具衡量效果

要想以低数据成本构建高性能、高弹性的网站,有几个核心目标。

对于每个目标,您都需要进行审核。

目标 为什么? 测试内容
确保隐私性、安全性和数据完整性,并实现强大的 API 使用能力 为什么 HTTPS 很重要 所有网站网页/路由和资源均采用 HTTPS。
提高加载性能 53% 的用户会放弃访问加载时间超过 3 秒的网站 可异步加载或延迟加载的 JavaScript 和 CSS。设置可交互时间和载荷大小的目标:例如 3G 的 TTI。设置性能预算
缩减页面重量 • 为设有流量套餐上限的用户降低流量费用 • 降低 Web 应用存储空间要求 - 这对于使用低规格设备的用户尤为重要 • 降低托管和传送费用 • 提升传送性能、可靠性和弹性 设置页面重量预算:例如,首次加载大小低于 400 kB。检查是否存在大量 JavaScript。 检查文件大小,找出膨胀的图片、媒体、HTML、CSS 和 JavaScript。查找可以延迟加载的图片,并使用数据覆盖率工具检查未使用的代码。
减少资源请求 • 减少延迟问题 • 降低传送费用 • 提升传送性能、可靠性和弹性 查找对任何类型的资源的过多或不必要的请求。例如:重复加载的文件、以多个版本加载的 JavaScript、从不使用的 CSS、从未被查看过(或可能延迟加载)的图片。
优化内存用量 内存可能会成为新的瓶颈,尤其是在移动设备上 在加载首页和使用其他网站功能时,使用 Chrome 任务管理器将您的网站与其他网站进行比较,以了解其内存用量。
减少 CPU 负载 移动设备的 CPU 有限,尤其是低规格设备 检查是否存在大量 JavaScript。使用数据覆盖率工具找出未使用的 JavaScript 和 CSS。 检查 DOM 大小是否过高,以及首次加载时没有必要运行的脚本。查找在多个版本中加载的 JavaScript,或可通过微小重构来避免的库。

审核网站有一系列工具和技术:

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

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

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

审核网站时,最好从使用浏览器的网络工具检查网页开始。 如果您不确定如何执行此操作,请参阅 Chrome 开发者工具网络面板入门指南FirefoxSafariInternet ExplorerEdge 也提供了类似的工具。

在进行更改前,请务必记录效果。对于网络请求,您可以像截图一样简单,还可以将配置数据保存为 JSON 文件。如需详细了解如何保存和分享测试结果,请参阅下文。

在开始审核网络使用情况之前,请务必停用浏览器缓存,以确保您可以获得准确的首次加载性能统计信息。如果您已通过 Service Worker 执行缓存,请清除 Cache API 存储空间。您可能希望使用无痕(不公开)窗口,这样您就不必担心停用浏览器缓存或移除之前缓存的条目。

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

  • 加载性能:Lighthouse 提供有关加载指标的摘要。Addy Osmani 撰写了一篇关于网页加载关键用户时刻的精彩摘要。
  • 用于加载和解析资源以及内存用量的时间轴事件。如果您想更深入了解,请运行内存和 JavaScript 性能剖析
  • 总页面重量和文件数。
  • JavaScript 文件的数量和粗细。
  • 任何特别大的单个 JavaScript 文件(例如超过 100KB)。
  • 未使用的 JavaScript。您可以使用 Chrome 覆盖率工具进行检查。
  • 图片文件的总数和粗细。
  • 任何特别大的单个图片文件。
  • 图片格式:是否有 PNG 图片(JPEG 或 SVG)格式?WebP 是否会与后备广告配合使用?
  • 是否使用自适应图片技术(例如 srcset)。
  • HTML 文件大小。
  • CSS 文件的总数和重量。
  • 未使用的 CSS。(在 Chrome 中,请使用覆盖率面板。)
  • 检查是否存在网络字体(包括图标字体)等其他资源方面的问题。
  • 检查开发者工具时间轴,找出阻碍页面加载的问题。

如果您使用的是快速 Wi-Fi 或快速移动网络连接,请使用低带宽和高延迟模拟进行测试。请务必在移动设备和桌面设备上进行测试,有些网站会使用 UA 嗅探功能针对不同的设备提供不同的素材资源和布局。您可能需要使用远程调试在实际硬件上进行测试,而不仅仅是使用设备模拟。

检查内存和 CPU 负载

在进行更改之前,请记录内存和 CPU 使用率。

在 Chrome 中,您可从“窗口”菜单访问任务管理器。这是一种检查网页要求的简单方法。

Chrome 任务管理器,显示打开的四个浏览器标签页的内存和 CPU 使用情况
Chrome 的任务管理器 - 注意内存和 CPU 占用率!

测试首次加载和后续加载性能

LighthouseWebPagetestPagespeed Insights 可用于分析速度、流量费用和资源使用情况。WebPagetest 还将检查静态内容缓存、首字节时间,以及您的网站是否有效利用 CDN。

保存结果

测试是否符合核心渐进式 Web 应用要求

Lighthouse 可帮助您测试安全性、功能、无障碍功能、性能和搜索引擎性能。具体而言,Lighthouse 会检查您的网站是否成功实现了 PWA 功能(例如 Service Worker 和 Web 应用清单)。

Lighthouse 还会测试您的网站是否可以提供可接受的离线体验。

您可以以 JSON 格式下载 Lighthouse 报告;如果您使用的是 Lighthouse Chrome 扩展程序,也可以将报告分享为 GitHub Gist:点击“分享”按钮,选择“在查看器中打开”,然后在新窗口中再次点击分享按钮,并点击“另存为 Gist”。

显示如何将 Chrome Lighthouse 报告导出为 gist 的屏幕截图
从 Lighthouse Chrome 扩展程序将报告导出到 gist - 点击分享按钮

使用分析、事件跟踪和业务指标来跟踪实际效果

如果可以,请在实施更改之前记录分析数据:跳出率、页面停留时间、退出网页等与业务需求相关的任何指标。

如果可能,请记录可能受影响的业务和技术指标,以便您可以在做出更改后比较结果。例如,电子商务网站可能会跟踪每分钟订单量或记录统计数据,以进行压力和耐力测试。如果减少页面重量和资源请求,后端存储费用、CPU 要求、服务费用和弹性可能会有所改善。

如果未实现 Google Analytics(分析),现在是时候!业务指标和分析是决定您的网站能否正常运行的最终决定因素。如果可以,请对用户操作(例如按钮点击和视频播放次数)加入事件跟踪。您可能还需要实现目标流分析,即用户完成转化所经历的路径。

您可以查看 Google Analytics(分析)的网站速度,了解效果指标与业务指标之间的关联。例如:“首页的加载速度有多快?”与“通过首页输入是否促成了销售?”

显示 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 开发者工具中的截取屏幕截图非常相似。您可以真实地记录页面组件的加载速度,即快,慢。保存视频录制内容和抓屏,以便与以后的改进进行比较。

将前后对比数据进行并排比较,是展示改进效果的绝佳方式!

还有什么?

请根据情况获取网站膨胀分数。这是一个有趣的测试,但它也是一种证明代码膨胀的有力方式,或者用来表明您所做的改进。

我的网站费用是多少?(如下所示)提供了有关在不同区域加载网站所需的财务成本的粗略指南。

来自 whatdiesmysitecost.com 的屏幕截图

您也可以使用许多其他独立工具和在线工具:请参阅 perf.rocks/tools