使用工具衡量效果

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

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

目标 为什么? 测试什么?
确保隐私性、安全性和数据完整性,并支持强大的 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 开发者工具网络面板入门指南FirefoxSafariInternet ExplorerEdge 也有类似的工具。

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

在开始审核网络使用情况之前,请务必停用浏览器缓存,以确保您获得有关首次加载性能的准确统计信息。如果您已通过服务工作线程进行缓存,请清除 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 中,您可以通过“窗口”菜单访问任务管理器。这是一种简单的检查网页要求的方法。

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 使用 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? 提供了有关在不同地区加载网站的财务成本的粗略指南。

来自 whatdoesmysitecost.com 的屏幕截图

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