性能文章>如何看待常见前端性能工具>

如何看待常见前端性能工具转载

6月前
233411

如何看待性能工具

关于性能的常见误解

误解1

用户体验可以通过单一指标来捕捉。

良好的用户体验并不能通过一次单点就能捕捉到。它是由用户旅程中的一系列关键里程碑组成。 了解不同的指标并跟踪对用户体验很重要的指标。

 

误解2

用户体验可以通过单个“典型用户”来捕捉。

由于用户设备、网络连接和其他因素的差异,现实世界的性能变化很大。 校准您的实验室和开发环境以测试各种不同的条件。 使用现场数据为设备类型(即移动设备与台式机)、网络连接(即 3G 或 4G)和其他关键变量的测试参数选择提供信息。

 

误解3

我自己访问自己的网站加载速度很快,所以我的用户访问也应该很快。

开发人员测试负载性能的设备和网络通常比用户实际体验的要快得多。 使用现场数据了解用户使用的设备和网络,并在测试性能时适当地反映这些条件。

 

理解实验室数据与真实数据

实验室数据

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

  • 优势

    • 有助于调试性能问题

    • 对 UX 的端到端和深度可见性

    • 可重现的测试和调试环境

  • 不足

    • 可能无法捕捉到现实世界的瓶颈

    • 无法与实际页面 KPI 关联

真实数据

(也称为真实用户监控或 RUM)真实数据是从用户在实际体验的真实页面加载中收集的性能数据。

  • 优势

    • 捕捉真实的真实用户体验

    • 体现业务与关键性能指标的关联

  • 不足

    • 受限的指标集

    • 调试能力有限

不同的性能工具之间的差异

  • Lighthouse

    • 就如何在性能、可访问性、PWA、SEO 和其他最佳实践方面改进您的网站提供个性化建议。

  • WebPageTest

    • 允许您在受控的实验室环境中比较一个或多个页面的性能,并深入了解性能统计数据并在真实设备上测试性能。 您还可以在 WebPageTest 上运行 Lighthouse。

  • TestMySite

    • 允许您跨设备诊断网页性能,并提供修复列表以改善 Webpagetest 和 PageSpeed Insights 的体验。

  • PageSpeed Insights

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

  • Speed Scorecard

    • 允许您将您的移动网站速度与 10 多个国家/地区的同行进行比较。 移动网站速度基于 Chrome 用户体验报告中的真实数据。

  • Impact Calculator

    • 允许您根据 Google Analytics(分析)的基准数据估算提高移动网站速度的潜在收入机会。

  • Chrome Developer Tools

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

 

所以,该如何选择呢?

 

如果你是营销人员或开发人员,试图构建商业案例以改善您网站的用户体验,并且正在寻找通过美元/美分等货币数字的方式,帮助您量化机会成本和预期收益。

  • 使用 Speed Scorecard 查看您的移动网站速度与 10 多个国家/地区的同行相比如何。 分数基于 Chrome 用户体验报告中的真实数据。

  • 使用 Impact Calculator 来估计提高移动网站速度的潜在收入机会。 影响是由谷歌分析的基准数据驱动的。

  • 使用 TestMySite 来测试您页面的移动加载时间以及行业基准,并了解简单的修复如何加快您的网站速度并减少访问者流失; TestMySite 目前由 WebPageTest 和 PageSpeed Insights 提供支持。

 

如果你是开发人员试图了解您网站的当前性能,就像真实的 Chrome 用户所体验的那样,并根据行业趋势和指南寻找审计建议。

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

 

如果你是开发人员试图根据现代 Web 性能最佳实践来了解和审核网站。

  • Lighthouse 包含一整套性能机会;它为您提供了页面中缺少的性能机会列表以及通过实施每个优化节省的时间,这可以帮助您了解应该做什么。

如果你是开发人员正在寻找有关如何调试/深入了解您的网站性能的技术指导。

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

  • WebPageTest 包含一套高级指标和跟踪查看器。 它可以深入了解您的网站在具有网络条件的真实移动硬件上的性能。

点赞收藏
分类:标签:
风之石
请先登录,查看1条精彩评论吧
快去登录吧,你将获得
  • 浏览更多精彩评论
  • 和开发者讨论交流,共同进步

为你推荐

【全网首发】手机性能优化工具的使用思路比较

【全网首发】手机性能优化工具的使用思路比较

1
1