没有人喜欢较长的加载时间——尤其是您的最终用户。当遇到糟糕的加载体验时,他们会变得沮丧并离开您的网站,从而导致跳出率增加并降低整个网站的收入。更糟糕的是,如果竞争对手的网站速度更快,收入损失可能是永久性的。
揭开当今网络性能挑战的面纱
2021 年,谷歌在调整了一项绩效指标最大内容油漆(LCP)后发布了对雷诺集团转化率的分析。他们的发现令人震惊:等待时间增加约 3 秒会使转化率降低 50%。
那么,为什么会出现大幅下跌?答案比您想象的要简单。2013 年,Radware 的前研究员、作家和解决方案传播者 Tammy Everts发表了一项研究,该研究使用脑电图和眼动追踪技术证明缓慢加载的页面会增加用户的挫败感并降低参与度。浏览体验不佳的用户不太愿意购买,失去了品牌亲和力,最终决定以后不再访问这些网站。
然后,在 2020 年,Nielsen Norman Group发表了一篇文章,其中汇集了来自几个主要网站的调查和研究论文,衡量了网站性能不佳导致收入下降的方式。
尼尔森报告中提供的数据表明,绩效工程可以提高组织的底线。例如,BBC 发现网站加载时间每多一秒,他们就会失去10% 的用户——这对收入造成了重大打击。
连接速度提高,但等待时间保持不变
正如尼尔森的报告所说明的那样,问题在于网站每年都变得越来越臃肿。尽管移动连接速度在过去 10 年中增长了七倍,但页面加载时间(用户在单击链接和看到任何结果之间等待的平均时间)大致保持不变。
换句话说,虽然网络容量增加了,但下载率却保持不变,因为网站变得越来越笨重。这个问题的解决方案?利用性能工程技术来简化您的网站并实现更快的加载速度。
什么是网络性能工程?
Web 性能工程是软件开发的一个分支,研究网站运行缓慢的原因和解决方案。一般来说,导致性能不佳的主要原因有两个:
未优化的前端代码归因于对网络浏览器的单线程性质缺乏了解
慢速连接,无论是临时的还是永久的
事实上,大约 85%–90% 的性能问题是由未优化和错误的前端代码引起的,这就是为什么我们将这篇文章的重点放在 HTML、CSS 和 JavaScript 浏览器代码上。我们还将关注慢速连接以及如何衡量它们,但这些问题更难解决,因为网站开发人员无法控制用户连接速度和质量。
当前端代码影响性能时,Web 开发人员必须确定手头的具体问题。观察综合和实时性能指标可以帮助完成这项任务。
什么是性能指标?
性能指标的目的是告诉网络开发人员加载网站操作和功能需要多少时间,例如屏幕上出现的视觉效果和用户输入反应。这些指标通过提供他们可以在未来改进的时间和延迟测量来帮助 Web 开发人员。
但是渲染站点——下载代码、图像和视频,然后正确排列和显示生成的页面——是一个包含许多活动部分的复杂过程。
当然,知道站点运行缓慢并不能帮助开发人员确定问题的原因。毕竟,它可能是任何事情:网络问题、资产加载顺序错误或没有战略性延迟、脚本效率低下迫使浏览器重新渲染多次——或者只是单个大型资产使用了宝贵的资源。仅靠一个数字并不能揭示答案。
输入性能指标,这些指标是为量化各种问题和情况而创建的。
管理指标的强大洞察力
开发人员可以从这些指标中获得强大的洞察力——因此他们不应将自己局限于一个指标。事实上,改进一个指标通常很容易,但可能会遗漏大部分网站体验。当图像加载速度很快但用户交互(如点击或点击)缓慢时,网站的整体性能仍然很差。最好同时改进图像加载和用户交互。
指标的问题在于它们太多了,以至于刚开始接触性能工程的人经常被所有的缩写词和技术术语弄得不知所措和困惑。通常,Web 开发人员会选择三个要遵循的指标。在发生重大变化后,他们将这三个指标与之前记录的值进行比较,以量化变化的影响。
说明 Google 的 Core Web Vitals 的重要性
为了帮助网络开发人员选择相关指标,谷歌创建了 Core Web Vitals:三个指标,根据用户指示网站的性能。
这些都是:
最大内容绘画 (LCP)
累积布局偏移 (CLS)
第一输入显示 (FID)
本系列关于 Web 性能的第 2 部分将深入探讨这些 Core Web Vitals。
为了确保网络开发人员关注他们的核心网络生命力,谷歌决定这三个指标将影响网站搜索排名。性能得分低会使网站排名下降,而速度更快、优化的网站会在搜索结果中显示更高。这是否已相应地发挥作用是值得商榷的。请继续关注第 2 部分,我们将在其中进一步调查此事。
无论哪种方式, 不熟悉性能工程的网络开发人员都应该遵循 Google 的三个核心网络生命指标 来提高网站性能和(可能)搜索排名。
针对用户的“不耐烦计时器”进行优化
除了提高站点性能之外,Web 开发人员还可以让用户认为他们的站点加载速度比实际加载速度更快。要理解这个想法,您需要像用户一样思考。
用户找到指向网站的链接并单击它们。然后他们希望该网站能够快速加载,以便他们可以扫描它以查看它是否满足他们的需求。他们会等一会儿,但不会太久。
当然,到底多少等待是太多是有争议的。 1993 年,Jakob Nielsen 估计 用户会保持注意力大约一秒钟,而 Google Data 发现大多数用户不会等待超过三秒钟。因此,所有网站都应在一秒内加载并显示某些内容,并应在三秒内完全加载。这个预期的时间长度可以被认为是用户的“不耐烦计时器”。
用户单击链接的时刻称为导航开始。这是许多性能指标的起点。这些指标中的每一个都计算导航开始和事件 X 之间经过的时间,其中 X 是被测量的特定事物,例如到达的第一个字节或用户在屏幕上看到的第一个元素。
重置急躁计时器
对于用户来说,Navigation Start 的含义略有不同,因为它将他们的不耐烦计时器重置为零。如果网站没有在合理的时间范围内加载,用户的不耐烦计时器就会启动。一旦计时器超时,用户就会放弃该页面,并可能转而访问竞争对手的网站。
所以,回到那个想法,你可以让用户认为他们的网站加载速度比实际加载速度更快。如果解决站点的性能问题太困难或太耗时,您可以通过在屏幕上显示一些内容来将用户的不耐烦计时器重置为零。如果执行得好,用户可能会长时间坐着而不会变得不耐烦离开。
Akamai 网络性能架构师 Tim Vereecke 将此原则称为挫折指数 ,并认为与其关注单一指标,不如观察指标之间的差距:差距越大,用户感到沮丧的可能性就越大。
网站作为餐馆:注意力类比
作为一个思想实验,让我们假设客人在厨房非常忙碌的时候进入您的餐厅。然后,您的服务员必须弄清楚如何为厨房工作人员争取时间,而又不会让顾客觉得他们等了太久。
解决办法是慢慢地但稳定地做每一件事。服务员首先将顾客带到他们的餐桌旁,让他们安顿下来,然后接受饮料订单。几分钟后,服务员送来饮料,然后又等了几分钟,才拿着菜单返回。这种方法给了客户充足的时间来决定。
当服务员在顾客的不耐烦计时器即将耗尽时提供每次互动时,他们可以成功地为厨房工作人员争取到 15 到 20 分钟的时间,同时让顾客仍然觉得他们在被照顾。在这种情况下,食客们非常乐意重置他们的计时器。
Web 开发人员应该努力在他们的网站性能上达到同样的效果。即使网站需要五秒钟才能完全加载,他们也可以通过确保出现一些可见的进展来重置用户的不耐烦计时器。在下一篇文章中,我们将通过研究 Google 的 First Contentful Paint (FCP) 和 LCP 指标进一步解开这个过程。
概括
到目前为止,我们已经看到性能不佳的网站如何使公司损失大量收入,以及性能工程如何缩短加载时间以提高利润。为了解决常见的性能挑战,我们确定了 Web 开发人员应该知道的关键指标。
当然,任何一个开发人员都无法管理太多指标。通常,他们会选择三个来关注——性能工程的新开发人员应该选择 Google 的三个核心网络生命力。
最后,性能工程还有一个心理方面,因为重置用户不耐烦计时器的网站受益于用户接受更长的等待时间。
接下来:了解更多性能工程技巧
本系列的下一篇文章将详细介绍 Google 的 Core Web Vitals,而我们的第三篇文章将介绍 Web 开发人员应该知道的其他有用的性能指标。在最后两篇文章中,我们将总结 15 种最常见的性能指标,以及它们的用途和用例,并为性能工程师提供有关网络浏览器工作原理的重要细节。
具有洞察力的更好的网站
想更多地了解 Google 的 Core Web Vitals?向 Akamai 首席技术解决方案架构师 Oliver Hunt 学习我们如何通过使用这些重要指标来帮助客户。
学到更多
一旦您了解了有关 Google 核心网络生命力的所有信息,请前往Akamai TechDocs文档站点,发现更多网络指标,您可以利用这些指标来开发更快的网站,更好地吸引用户。