如何看待速度工具

如何看待速度工具

Google 提供了许多关于性能数据和性能工具的指导。此信息图的目标是为开发者和营销者整合本指南,帮助他们了解如何看待效果并熟悉 Google 的所有性能工具产品。

下载 PDF 版本

一张纸,上面有一个折线图。

只需使用一个指标即可捕获用户体验。

良好的用户体验是无法在一个时间点实现的。用户体验历程由一系列关键里程碑组成。您可以了解不同的指标,并跟踪对用户体验至关重要的指标。

误区 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 包含一组全面的性能优化机会;它列出了您的网页缺少的性能机会列表,以及通过实现每项优化所节省的时间,这有助于您了解应该采取的措施。

某个 bug 上方一个放大镜的图标。

开发者,希望获得有关如何调试/深入了解网站性能的技术指导。

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

WebPageTest 包含一套高级指标和跟踪记录查看器。借助此工具,您可以深入了解您的网站在实际移动硬件和网络条件下的性能。