我们用来制作网页的设备与大多数人用来浏览网页的设备之间存在着巨大且不断扩大的差距。众所周知,网站的平均大小非常大,并且只会越来越大。
你能做些什么呢? 找一台 低端笔记本,然后尝试使用你的网站或网页应用。
低端笔记本是价格低廉的设备,内部配置较低。它们通常预装了各种第三方应用程序,以此来抵消成本——例如资源密集且难以删除的病毒扫描器。 它们无处不在,而且短期内不会消失。
当你浏览你的网站或网页应用时,注意一下
- 哪些加载速度很慢,
- 哪些加载速度慢到无法使用,以及
- 哪些根本无法加载。
之后,制定一个计划,说明该如何处理这些问题。
行业平均水平
截至本文发布之时,访问 CSS-Tricks 的最常见设备是性能强大的现代台式电脑、笔记本电脑、平板电脑和手机,这些设备运行的是最新操作系统,并且拥有充足的计算能力。
当然,并非所有制作网站和网页应用的人都会阅读 CSS-Tricks,但它是一个非常受欢迎的行业网站,我敢打赌,它的访问者可以反映整个行业的情况。
就性能而言,我们从这些设备中可以观察到的特点是
- 强大的处理器,
- 充足的内存,
- 大量的存储空间,
- 高质量的显示屏,以及最有可能的
- 高速互联网连接
不幸的是,人们用来访问你内容的设备并不总是具备这些特点。
幸存者偏差
第一次世界大战期间,英国士兵配备了 布罗迪头盔,这是一种钢制头盔,旨在保护佩戴者在战壕战中免受头顶爆炸和弹片的伤害。部署后,野战医院发现头部严重受伤的士兵数量有所增加。

由于伤亡人数增加,英国指挥部考虑重新设计头盔。幸运的是,一位统计学家指出,医院病例的大幅增加是因为人们在以前会致命的伤势中幸存了下来——在引进钢制头盔之前,英国军队使用的是毛毡或皮革作为头部防护材料。
幸存者偏差是一种逻辑错误,它只关注那些通过选择过程的人。就头盔而言,就是你是否活着。在网站和网页应用的情况下,就是一个人是否能够加载和使用你的内容。
谎言、该死的谎言和统计数据
无法加载你的网站或网页应用的人不会出现在你的分析套件中,作为访问者。这很容易理解。
然而,在“加载和使用你的内容”中,“使用”部分才是重要的部分。有一部分设备能够加载你的产品,但体验如此糟糕以至于无法使用,最终会导致跳出。这些设备会占一定比例。
是的,我知道分析可以比这更复杂。但是从幸存者偏差的角度来看,你的数据是否考虑到了这种行为?
指责
很容易去买一台廉价的低端笔记本,然后对一个你无法控制的缓慢网站感到沮丧。这里有两个真正的问题:
- 第三方资产,例如你用来确定谁在使用你的产品以及他们如何使用你的产品的分析和 CRM 软件包。你无法真正控制它们添加到你网站中的代码的质量或数量,而且设置逻辑来阻止它们加载自己的第三方资源很难做到。
- 那些告诉你要添加这些第三方资产的人。这些人通常不知道这些请求会导致性能问题,或者不在乎,因为这不是他们被评价的指标。
我们如何解决这两个问题? 将抽象的、一次性的业务请求与更全面和个人的事情联系起来。
见证
我知道有些组织会举办“测试周二”之类的活动,每周二都会进行有监督的可用性测试。你可以对性能做同样的事情,甚至可以将这个想法融入到现有的可用性测试计划中——毕竟,缓慢的网站是无法使用的。
关键是要定期观察真实的人如何使用你的网站或网页应用,使用真实的设备。我说的真实设备是指不要只局限于你分析报告中显示的平均版本。
然后确保每个人都了解这些测试。向经理展示有人试图获得他们需要的东西,但由于你的组织做出的选择而无法获得,这很有说服力。
低端笔记本义务
一年大约有 260 个工作日。这意味着你有 260 次机会让你的开发、设计、营销或领导团队中的某个人使用低端笔记本工作一天,从而培养他们的同理心。
你可以在 Windows 子系统中运行 Linux,以运行大多数开发工具。我所知道的 web 制作领域的绝大多数其他应用程序都有 Windows 安装程序,或者可以在浏览器中运行。这应该足以满足你的需求。如果你无法做到,或者速度太慢,无法以你习惯的速度完成工作,那么这就是问题的关键所在。
低端笔记本义务,加上使用低功耗设备进行的可用性测试,应该足以让你就你的网站或网页应用真正需要加载什么以及为什么需要加载这些内容进行那些艰难的对话。
不要标签化
最后我想说的是,很容易认为低功耗设备的存在等于经济弱势人群的存在。事实并非如此。强大的设备可能会由于多种因素而变得速度变慢。富裕的人士也会使用低功耗技术。
也许最重要的收获是,无论人们试图做什么,穷人都不应该体验到劣等的体验。无论设备、能力或环境如何,网页上性能出色、直观且易于访问的体验都应该面向所有人。
在进行网站性能测试时,我们发现实验室数据约为 35。
但 CrUX 数据同时涵盖了源站和现场数据。
我们交叉验证了分析报告,发现:
90% 的移动端流量中,
60% 来自 Safari
30% 来自 Chrome
10% 由其他浏览器共享。
所有用户的加载时间都小于 2.5 秒。
优化建议包括图像分辨率、减少动画和集成 JavaScript 功能。
当真实用户感受到网站加载速度很快,LCP、FCP 和速度指数都很快时,是否需要进行优化工作?
谢谢,Eric 的建议很棒!
我其实对其他体验感到很沮丧。我有一台性能强大的笔记本电脑,但有时会被困在 10 MBS 的 ADSL 网络连接中。我总是对那些加载 30 个或更多文件来显示页面的网站感到惊讶。它们通常需要一分钟以上才能加载。除了使用旧款笔记本电脑,你还应该添加一个 10 MBS 的集线器。
确实,很有可能他们现在在千兆连接上进行测试。
我拥有各种笔记本电脑,从 Chromebook、7 年前的联想电脑、两年前的 XPS 13,到配备 64G 和双 1TB MVMEs 的联想至强工作站笔记本电脑。我没有注意到任何 Web 应用程序加载时间上的差异。即使是最老的机器也可能是双核赛扬 2 GHz 或 8 核 ARM。
那是 Eddie Van Halen/Don Landee 录制工作室的古老技巧。
当他们在工作室录制范·海伦的歌曲时,他们认为声音很好,Eddie 会用它制作一个卡带。在停车场,他们用一辆破旧的雪佛兰 Chevette,里面有一个旧的卡带播放器和坏掉的音箱。
Eddie 会拿着卡带在街区周围开车,用这种设置听它。他的理由是“我们的目标受众会用它来听我们的音乐,而不是 1000 美元的专业监听音箱”。如果他们能让它在破车里听起来不错,他们的客户都会很高兴,不仅仅是那些“好的立体声”的人群。
显然它奏效了。顺便说一句,这篇文章很棒。
我喜欢这个轶事,谢谢您分享它!我今天肯定会听听它们。
我使用的是 2013 年的 Mac Pro 和 2017 年的 iPad。通常 iPad 会下载一个网站,然后广告会在接下来的几分钟内出现(使用 Starlink 卫星天线,即通常为 122 Mbs 的下载速度)。
每次新的广告加载时,布局都会更新,屏幕会向上或向下跳跃,直到下一个广告加载,然后它会再次开始。简而言之,是缓慢加载的广告服务器破坏了用户界面。
那只是网络。我很惊讶数据丢失是如此容易。如果我在打字时不小心碰到了屏幕,一整页数据就会消失。我甚至不得不等待几秒钟才能让文字出现在屏幕上,所以这已经是上个世纪的东西了!
优先级显然是收集数据,而不是自动保存它。在 21 世纪,丢失客户数据是不可原谅的。
它一直在上传到云端,但即使有大量可用空间,也没有存储到本地内存中。几十年以前,我就能在 Palm Pilot 上完成这些工作。
我的印象是,苹果公司期望全世界拥有与库比蒂诺相同的网络速度。
iPad 在等待云端的时候经常会冻结,因此每天至少需要关机重启一次。这让我想起了 Windows 95。
如果您觉得我的权利意识很强,请原谅我,但这不是基本的东西吗?
至少在开发 NeWS 的时候,James Gosling 习惯使用 Sun 最低性能的工作站来进行开发工作。
这是一个非常新鲜的观点。在低性能设备上测试产品,以拓宽可访问性的定义。