如何看待速度工具

Google 发布了许多关于性能数据和性能工具的指南。此信息图旨在为开发者和营销者整合这些指南,帮助他们了解如何思考性能问题,以及如何使用 Google 的所有性能工具。

下载 PDF 版本

关于性能的常见误解

误区 1

一张纸,上面有折线图。

用户体验可以通过单个指标来衡量。

良好的用户体验无法通过单一时间点来衡量。它由用户转化历程中的一系列关键里程碑组成。了解不同的指标,并跟踪对用户体验至关重要的指标。

误区 2

一系列网络图标,代表不同的设备和网络状况。

用户体验可以通过单个“代表性用户”来捕获。
由于用户设备、网络连接和其他因素的差异,实际性能差异很大。校准实验室和开发环境,以测试各种不同的条件。使用字段数据来选择设备类型(即移动设备与桌面设备)、网络连接(即3G 或 4G)以及其他关键变量。

误区 3

各种不同类型用户的描绘。

我的网站加载速度很快,所以用户访问时应该也很快。
开发者测试加载性能时所用的设备和网络通常比用户实际使用的设备和网络快得多。使用现场数据了解用户使用的设备和网络,并在测试性能时适当模拟这些条件。

了解实验室数据与现场数据

实验室数据

一个男子站在一堆抽象技术概念和图标前的描绘

实验室数据是在受控环境中通过预定义的设备和网络设置收集的性能数据。这提供了可重现的结果和调试功能,有助于识别、隔离和解决性能问题。

正确做法

优势

  • 有助于调试性能问题
  • 端到端深入洞察用户体验
  • 可重现的测试和调试环境
错误做法

限制

  • 可能无法捕获实际瓶颈
  • 无法与实际网页 KPI 相关联

现场数据

描绘了人们在公共场所使用移动设备。

(也称为真实用户监控或 RUM)

现场数据是根据用户在实际使用过程中遇到的真实网页加载情况收集的性能数据。

正确做法

优势

  • 捕获真实的真实用户体验
  • 可与业务关键绩效指标建立关联
错误做法

限制 {: .compare-worse }

  • 受限指标集
  • 调试功能有限

有哪些不同的性能工具?

灯塔

灯塔

为您提供个性化建议,帮助您在性能、无障碍、PWA、SEO 和其他最佳实践方面改进网站。

WebPageTest

WebPageTest

让您可以在受控实验室环境中比较一个或多个网页的性能,并深入探究性能统计信息和在真实设备上测试性能。您还可以在 WebPageTest 上运行 Lighthouse。

TestMySite

TestMySite

让您能够诊断网页在各种设备上的性能,并提供来自 Webpagetest 和 PageSpeed Insights 的修复措施列表,以改善用户体验。

PageSpeed Insights

PageSpeed Insights

显示您网站的速度字段数据,以及用于提高速度的常见优化建议。

速度评分卡

速度统计信息摘要图表

让您能够将自己的移动网站速度与 10 多个国家/地区的同类网站进行比较。移动网站速度基于 Chrome 用户体验报告中的实际数据。

影响计算器

影响计算器

让您能够根据 Google Analytics 中的基准数据,估算提高移动网站速度可能带来的潜在收入机会。

Chrome 开发者工具

Chrome 开发者工具

让您能够分析页面的运行时,以及识别和调试性能瓶颈。

所以你是…

一本显示图表的书的图标。

营销者或开发者,希望通过构建业务案例来改善网站的用户体验。您关注的是金钱,希望通过货币数字来量化机会成本和预期提升幅度。

  • 使用速度评分卡,了解您的移动网站速度与 10 多个国家/地区的类似网站相比如何。分数基于 Chrome 用户体验报告中的实际数据。
  • 使用影响计算器估算提高移动网站速度可能带来的潜在收入机会。影响由 Google Analytics 中的基准数据驱动。
  • 使用 TestMySite 测试网页在移动设备上的加载时间,并与行业基准进行比较,了解如何通过简单的修复来加快网站加载速度并减少访客流失;TestMySite 目前由 WebPageTest 和 PageSpeed Insights 提供支持。
笔记本电脑图标,其后方略微偏上的位置有一个 Chrome 徽标。

开发者:希望了解网站当前的性能(基于真实 Chrome 用户的体验),并寻求符合行业主流趋势和准则的审核建议。

PageSpeed Insights 可帮助您了解 Chrome 用户体验到的网站实际性能,并推荐优化机会。

Lighthouse 审核结果页面的图标。

想要了解并根据现代 Web 性能最佳实践审核网站的开发者。

Lighthouse 包含一整套性能优化建议;它会为您提供网页中缺少的性能优化建议列表,以及实施每项优化所节省的时间,这有助于您了解应该采取哪些措施。

放大镜和虫子图标。

寻求技术指导以了解如何调试/深入探究网站性能的开发者。

Chrome 开发者工具 (CDT) 包含一个性能面板,您可以通过使用自定义配置对网站进行性能分析,深入了解网站的性能问题,从而找出性能瓶颈。您可以在网站的生产版本或开发版本上使用 CDT。

WebPageTest 包含一套高级指标和跟踪记录查看器。它让您能够在真实移动硬件上,在各种网络条件下深入探究网站性能。