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

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

2月前
213011

如何看待性能工具

关于性能的常见误解

误解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 包含一套高级指标和跟踪查看器。 它可以深入了解您的网站在具有网络条件的真实移动硬件上的性能。

分类:
标签:
请先登录,再评论

👍

2月前

为你推荐

一次 Node.js http 连接无法复用的问题排查
一次压测中阿里云 SLB 的并发连接数被打满了,导致服务之间的 HTTP 调用延迟很大。当时 SLB 的并发连接数情况如下图所示。登录容器终端查看,发现某个前端 Node.js 服务中的单个容器的 E
如何 60 秒内进行 Linux 性能分析
当你登陆一台 Linux 服务器之后,因为一个问题要做性能分析时:你会在第 1 分钟内做哪些检测呢?在 Netflix,我们有很多 EC2 的 Linux 机器,并且也需要很多性能分析工具来监控和检查
使用 FastThread 以及 GCEasy 分别针对线程dump文件以及GC日志文件进行离线分析
概述FastThread 以及 GCEasy分别针对线程dump文件以及GC日志文件的离线分析工作,可快速直观的定位到相关的性能问题。 前置准备 针对目标进程分别生成线程dump文件以及GC日志文件使
webpack5优化实战
本文围绕webpack优化进行讲述,其中也会作某些原理性地解释,尽量做到让大家知道为什么这么做,以及这么做的结果是什么。
前端性能基础:健康网站的关键指标有哪些?
概览 #Web 指标是 Google 开创的一项新计划,旨在为网络质量信号提供统一指导,这些信号对于提供出色的网络用户体验至关重要。多年来,Google 提供了许多性能测量和性能报告工具。一些开发者对这些工具的使用十分在行,而另一些开发者则发现大量的工具和指标令人应接不暇。网站所有者要想了解他
如何看待常见前端性能工具
如何看待性能工具关于性能的常见误解误解1用户体验可以通过单一指标来捕捉。