什么是感知性能以及为什么需要优化它

目录

性能很重要。这可能意味着捕获访问者的电子邮件或更好的是获得销售之间的区别。这就是为什么我们花费如此多的时间优化我们的网站以使其更快。

但我不仅仅是在谈论页面速度。性能优化还有一个完全不同的领域没有得到太多关注。

我说的是感知性能。它是衡量用户认为您的网站有多快的指标,而不一定是您的技术统计数据显示它有多快。

在这篇文章中,我们将探讨什么是感知性能,人们如何感知时间背后的一些心理学,并看看一些你可以用来让你的网站感觉更快的技术。

除了传统的页面速度优化技术外,使用本文中的技术应该有助于增强您网站的整体用户体验。


时间心理学:感知加载时间与实际加载时间

您使用秒表测量的时间是客观时间。这是绝对的——开发人员可以测量网站的页面速度并进行必要的调整以使其在技术上更快。

另一方面,心理时间是主观的,并且具有潜在的可塑性。它是相对的,但可以纵,以便人们认为它在主观上比实际更快。

以电梯为例。你有没有想过为什么电梯有镜子?它们是现代最伟大的发明之一,让人们可以穿越 40 层楼,而不会费力地爬楼梯。

但是当电梯第一次出现时,人们站在里面,以夸张的时间感盯着门,因为他们没有其他事情可做(这是在智能手机发明之前!)

他们所能想到的只是可以理解的恐惧,他们害怕从 40 层楼坠落而死,除了电缆将他们悬在半空中之外,什么都没有。最重要的是,人们抱怨电梯太慢。

因此,电梯公司试图解决使电梯更快、更安全的挑战。在当时,这是一件昂贵的事情。直到一位工程师提出从另一个角度看待问题:人们认为电梯很慢,所以与其专注于更大的电机和更光滑的滑轮设计,为什么不关注电梯内的人呢?

这导致了电梯中镜子的想法,这样人们就会考虑其他事情,而不是关注时间或对坠落的关注。由于被镜子分散了注意力,人们为自己的头发和妆容大惊小怪。在后续调查中,人们评论说“新”电梯的速度要快多少,即使速度完全相同。

在最近的一个例子中,进一步强调了大问题并不总是需要大解决方案,欧洲之星投资了数十亿英镑,以便将其火车从伦敦到巴黎的旅行时间缩短 25 分钟。我们的想法是它会让客户满意。

但在他的 TED 演讲 Sweat the small things 中,广告主管 Rory Sutherland 指出,让旅行者的旅程更愉快会更明智。Eurostar 本可以为其火车配备 wifi,而成本只是其中的一小部分,从而改善用户体验并缩短感知旅行时间。因为沉迷于 Facebook、新闻或观看电影的旅行者几乎不会注意到旅行时间的减少。

许多网站经常重复 Eurostar 的错误,将所有精力都集中在提高页面速度上,而忽视了 Web 开发的一个非常重要的方面——用户体验。

您的网站加载速度应该有多快?


客观地看待时间,在优化网站性能时,您应该牢记一些速度准则。

在他的书《可用性工程》中,可用性专家 Jakob Nielsen 确定了对网站反应时间感知的三个重要响应时间限制:

  • 最多 0.1 秒:用户无法识别任何可察觉的延迟。加载感觉有点瞬间。这是您在优化网站时应达到的最佳标准。
  • 最多 1 秒:延迟略微可察觉。用户感到暂停。如果所有操作都需要 1 秒才能完成,则网站可能会感觉迟缓。
  • 最多 10 秒:如果操作需要 10 秒或更长时间才能完成,您将失去用户的注意力。他们可能会切换到新标签页或应用程序,或者只是关闭您的网页。但是,在某些情况下,用户会等待,例如当他们刚刚在结账时提交了信用卡详细信息时。

考虑到 Nielsen 最初在 1993 年发布了这些时限,可以肯定地说 10 秒的上限现在是 5 秒甚至更短。自 1990 年代初以来,互联网速度呈指数级增长,用户已经习惯了快速加载的网站,因此任何加载时间超过 10 秒的网站都感觉像是在拨号加载。

有无数种方法可以优化网站的性能,使其客观地加载得更快(查看加快网站速度:让前几秒钟有意义)。在优化您的网站以使其在心理上加载更快时,您可以采用一些方法来帮助减少网站的感知加载时间,使其感觉比目标加载时间更快。


如何优化感知加载时间

以下是一些提示,可帮助您将自己的镜像版本添加到您的站点,以便用户更快地感觉自己。

1. 使用活动和进度指示器

如果您的网站上有某些页面元素加载缓慢或操作缓慢而影响用户体验,则应考虑使用旋转图标等活动指示器。活动指示器让访问者放心,页面实际上正在运行并正在加载。

更好的是,使用进度条来显示网站已加载的百分比。这不仅有助于安抚焦躁不安的用户,还可以让他们了解他们需要等待多长时间。

在可能的情况下,最好显示一个进度条,该进度条提供有关完成操作需要多长时间的实时反馈,因为访客可以继续使用您的网站。Unsplash 使用微调器告诉用户照片仍在加载中 – 向下滚动以在下面查看它的实际效果。

进度条动画的外观也会影响感知性能,正如卡内基梅隆大学人机交互研究所的研究人员所做的这项研究所发现的那样。

这条推文进一步证明了,展示了 Facebook 如何发现简单地改变加载动画的外观会影响用户对加载时间缓慢的指责。

2. 先加载首屏内容

始终先在您的网站上加载首屏内容。这样,用户不仅会看到您的网站开始加载,而且能够在内容仍在页面下方加载时开始与它交互。

Nielsen Norman Group 的一项眼动追踪研究发现,当网站上最重要的内容首先加载时,用户会花费大约 20% 的时间查看内容。但是,如果此区域需要 8 秒才能加载,则用户将只花费 1% 的时间查看此区域。

Google 推荐了两种主要策略来加载首屏内容并确定首屏内容的优先级:

3. 使用渐进式和延迟加载

另一种可以使人们认为加载速度较快的方法是逐步加载内容。此方法通常在加载图像(延迟加载)时使用。

延迟加载背后的基本思想是占位符图像显示在页面上,并在不同的阶段逐步加载,从模糊到像素化,再到清晰。类似的技术可以应用于页面上的实际内容。

Facebook 会在您滚动新闻源时逐步加载内容,将活动指示器与内容占位符相结合:

loading

Facebook 使用渐进式加载来指示结果正在加载。

图像密集型网站 Unsplash 还使用延迟加载和活动指示器:

unsplash2

Unsplash 使用延迟加载和活动指示器来让用户放心图像正在加载。

4. 预加载内容

预加载内容允许您优先加载页面上的某些内容。使用 <link> 元素的 rel 属性的 preload 值,您可以编写声明式 fetch 请求,以指定您的页面在加载后很快需要的资源,以及您希望在浏览器的主渲染机制开始之前尽早开始预加载的资源。

这可确保这些资源更早地可用,并且不太可能阻止页面的首次渲染,从而提高性能。

Preload 是一个相对较新的 Web 标准,旨在为 Web 开发人员提供更精细的加载控制。它允许开发人员定义自定义加载逻辑,而不会遭受基于脚本的资源加载程序所造成的性能损失。

5. 预测用户的下一步操作

现在我们进入了实际上在可能性范围内的水晶球的东西。虽然预测用户接下来在页面上可能做什么一开始可能看起来很棘手,但如果你有一个网站,用户倾向于一遍又一遍地执行相同的工作流程(即点击导航链接,点击某些按钮),那么预测他们下一步会做什么并不难。

因此,请充分利用这些知识并在后台预加载最受欢迎的内容,这样,如果用户实际上选择了您预测的操作,内容将已经显示出来,可以进行交互。


衡量感知性能

不幸的是,没有简单的速度测试工具可以用来衡量感知性能,尽管像第一次内容/有意义的绘制这样的指标可以暗示它。

但是,您可以有效衡量它的一种方法是调查您的访问者并询问他们加载您的页面需要多长时间。

如果您这样做,请确保您的调查样本足够大,以收集您网站感知加载时间的更精确平均值。

有了这些信息,您就可以进一步改进网站的用户体验和感知速度。


实际速度仍然很重要

很容易陷入页面加载速度和优化资源以使您的网站快如闪电。但归根结底,提高您网站的感知性能会对您网站的用户体验产生巨大影响。

用户不喜欢等待。通过更改网站的加载方式并优先加载某些内容,您可以影响用户对您网站性能的看法,从而让他们认为加载时间比实际时间短。

最后,我想明确指出,提高您网站的实际页面加载速度仍然是一个重要因素,您应该始终测试您的 WordPress 性能。提高网站的感知性能不应替代提高网站的目标速度。



评论

发表回复

必填项已用 * 标注