要想以低数据成本构建高性能、高弹性的网站,有几个核心目标。
对于每个目标,您都需要进行审核。
目标 | 为什么? | 测试内容 |
---|---|---|
确保隐私性、安全性和数据完整性,并实现强大的 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 开发者工具网络面板入门指南。 Firefox、Safari、Internet Explorer 和 Edge 也提供了类似的工具。
在进行更改前,请务必记录效果。对于网络请求,您可以像截图一样简单,还可以将配置数据保存为 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 中,您可从“窗口”菜单访问任务管理器。这是一种检查网页要求的简单方法。
测试首次加载和后续加载性能
Lighthouse、WebPagetest 和 Pagespeed Insights 可用于分析速度、流量费用和资源使用情况。WebPagetest 还将检查静态内容缓存、首字节时间,以及您的网站是否有效利用 CDN。
保存结果
- WebPagetest:每个测试结果都有自己的网址。
- PageSpeed Insights:在线 PageSpeed Insights 工具现在包含 Chrome 用户体验报告数据,其中会突出显示实际的性能统计信息。
- Lighthouse:点击下载按钮,在 Chrome 开发者工具审核面板中保存报告:
测试是否符合核心渐进式 Web 应用要求
Lighthouse 可帮助您测试安全性、功能、无障碍功能、性能和搜索引擎性能。具体而言,Lighthouse 会检查您的网站是否成功实现了 PWA 功能(例如 Service Worker 和 Web 应用清单)。
Lighthouse 还会测试您的网站是否可以提供可接受的离线体验。
您可以以 JSON 格式下载 Lighthouse 报告;如果您使用的是 Lighthouse Chrome 扩展程序,也可以将报告分享为 GitHub Gist:点击“分享”按钮,选择“在查看器中打开”,然后在新窗口中再次点击分享按钮,并点击“另存为 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 开发者工具中的截取屏幕截图非常相似。您可以真实地记录页面组件的加载速度,即快,慢。保存视频录制内容和抓屏,以便与以后的改进进行比较。
将前后对比数据进行并排比较,是展示改进效果的绝佳方式!
还有什么?
请根据情况获取网站膨胀分数。这是一个有趣的测试,但它也是一种证明代码膨胀的有力方式,或者用来表明您所做的改进。
我的网站费用是多少?(如下所示)提供了有关在不同区域加载网站所需的财务成本的粗略指南。
您也可以使用许多其他独立工具和在线工具:请参阅 perf.rocks/tools。