本文对1000个最流行的Chrome插件进行了调查,探究它们对浏览器性能以及用户体验的影响
重要发现:
- 诸如Honey、Evernote Web Clipper、Avira Browser Safety 会对网站的速度有显著的负面影响
- 对于含有大量广告的网站,广告屏蔽型或隐私工具型插件对性能有显著影响
由于不同的网站其本身性能也不尽相同,所以在测试中我们选取了5个不同的页面:一个简单的测试页、apple.com、toyota.com、independent.co.uk、post-gazette.com
如果想查看下一个插件是否拖慢了你的访问速度,可以查看此列表
目录
CPU使用率
流行榜top100插件的情况
很多Chrome插件都会在页面打开的时候运行额外的代码,另外一些设计良好的插件则会在需要的时候运行代码。在流行榜top100的插件中,Evernote Web Clipper对性能的负面影响最大,当打开页面时会额外花费368ms运行代码,导致页面对交互反应迟钝。
上面这些插件每个都有超过百万的下载量,尽管几百毫秒的消耗听上去不算什么,但多个插件如果同时存在,那么影响也是十分显著的。插件对页面打开速度的影响也和具体打开的页面有关,上面的结果是在一个非常简单的网站上收集的,通常代表了一个Chrome扩展对每个页面性能的最低影响。
当我们在Apple官网上测试插件时,会发现一款暗黑模式的插件 Dark Reader会花费25s用来分析和调整页面中的图片,这也导致页面的加载速度变得更慢,如下所示:
Honey插件在电商网站上会有显著负面影响,增加了825ms的CPU处理耗时。当在Toyota官网进行测试时,我们会发现Norton Password会明显导致CPU使用率增加,额外增加了1s的CPU耗时:
这个图只列出了打开Toyota官网时5款性能影响最大的插件,如果不安装任何插件,该网站也有超过3s的CPU耗时
流行榜top1000插件的情况
让我们把目光放在不那么流行的插件上,当然,这些插件也有超过100,000的安装量。
Substitutions是一款自动替换某些单词的插件,在一个小的网站上有微小的性能影响,但在一个大的页面,如Toyota官网则会有9.7s的额外耗时
对页面渲染时间的影响
流行榜top100插件的情况
占用CPU会导致页面失去响应以及电量的消耗,不过假如是页面初始化之后的CPU占用,影响就会小很多。诸如Loom、Ghostery就在页面渲染之后运行了大量的代码,而诸如Clever、Lastpass、DuckDuckGo则是在页面加载的时候就运行代码了,将用户手首次见到页面内容的时间推迟了,下图是利用FCP指标来衡量各个插件:
虽然苹果主页通常在一秒内呈现,但安装了Dark Reader几乎需要4秒,在一个电子商务网站,Honey还将页面内容的显示时间推迟了近半秒 Dark Reader
Avira Browser Safety和其它一些广告屏蔽插件也会延迟页面内容的出现:
流行榜top1000插件的情况
在top1000的范围内,社交工具壹伴 · 小插件消耗了342ms,售卖工具Outreach Everywhere消耗了251ms:
当在Toyota官网进行测试时,一个匿名的浏览器代理anonymoX会增加2s的耗时,但考虑到请求是经过一番转发倒是也不足为奇了。Avira Browser Safety会增加369ms的耗时。
后台CPU使用率
Chrome插件不仅仅可以在页面里运行代码,还可以在插件的后台页面里运行代码,这些代码可能包含一些逻辑导致某些域名下的请求被阻塞
流行榜top100插件的情况
即便是访问一个简单的测试页面,Avira Safe Shopping也会让CPU忙碌超过2s:
在一个更复杂的页面Toyota官网上进行测试,Dashlane和AdGuard也都CPU后台耗时超过2s
流行榜top1000插件的情况
访问independent.co.uk上的一篇文章时,共有3款插件消耗CPU超过20s: # uberAgent、Dashlane、Wappalyzer
浏览器内存消耗
浏览器插件会使当前访问的页面内存消耗增加,同时插件本身也会消耗一定的内存,这些消耗对性能是不利的,特别是在一些低端设备上。广告屏蔽插件和隐私工具通常会存储大量网点的信息,会耗费大量的内存用于数据的存储
流行榜top100插件的情况
流行榜top1000插件的情况
当焦点放在top1000范围时,AdBlocker by Trustnav依然明显耗费大量的内存,几乎是300MB内存
广告屏蔽插件和隐私工具是如何影响性能的
虽然广告拦截软件会对没有广告的网站造成额外的处理,但它们可以显著加快大量广告页面的速度。本节将介绍15个安装量超过50万的广告拦截软件。
加载追踪器和渲染广告是CPU密集型的操作,尽管具体的影响因网站而异。新闻类网站通常含有大量的广告,所以我们接下来的测试就看independent.co.uk和post-gazette.com网站上的文章页面的CPU消耗。当没有广告屏蔽插件时单个页面的CPU耗时是17.5s,即便是性能最差的插件都可以将其降低57%至7.4s,而性能优异的Ghostery插件则可以将CPU耗时平均降低90%至1.7s
uBlock Origin的作者Raymond Hill曾经指出,一些插件会让页面的CPU耗时降低,但其后台CPU耗时将会低效这部分降低。虽然在后台运行的代码不会对页面性能有显著的降低,但是会对电脑整体的表现有所影响
广告屏蔽插件和隐私工具通常会奖数据体积降低43%至66%:
如果没有广告屏蔽软件,则每个文章页面平均发送793个网络请求,通过Ghostery的处理降低了90%,只有83个:
如果没有广告屏蔽软件,每个文章页的平均整体内存消耗是574MB,有了之后增降低了54%达到了260MB。然而,由于浏览器扩展总是需要一些内存来运行,其他广告拦截程序如AdBlocker by Trustnav则增加了内存消耗。在这种情况下,拦截广告所节省的消耗被广告拦截软件的额外消耗所抵消。不过如果你打开10个标签,所有都文章页,那么你会看到10倍的内存节省,但广告拦截器通常没有增加同等的内存消耗
当同时安装了多个插件的时候会发生什么
在大多数情况下,多个Chrome扩展的效果是累积的,下面这个截图是安装了4个插件(axe Web Accessibility Testing, Evernote Web Clipper, LastPass, and Skype)后采用Chrome DevTools page performance profile工具对打开apple.com进行的分析,可见CPU任务是一个接一个的执行,如果插件被设置成页面启动加载时就执行,则会明显延迟页面的渲染:
和上一年相比
我们关注了96个最流行的插件,它们都包含在今年和去年的测试中,平均来看,CPU耗时降低了28ms:
不过需要指出的是,2020年的测试用的是Chrome 88,而2021年的测试用的是Chrome 91,随着Chrome的速度越来越快,这些改进不一定意味着Chrome扩展本身已经得到了优化,当用旧版本的Chrome运行今年的测试时,平均只提高了13毫秒:
注意上述比较只针对一个网站上的一个指标
一些个别的插件
Grammarly
去年,Grammarly在每个页面上加载了一个1.3MB的Grammarly.js
文件,现在是页面加载时只下载了一个112KB的Grammarly-check.js
,然后在用户聚焦在文本区域时才会加载Grammarly.js
文件
Save to Pocket
在去年的测试中,Save to Pocket向每个页面注入一个小样式表,但这对性能没有明显的影响。然而现在总是加载一个2mb的JavaScript文件,增加了110毫秒的CPU时间
方法论
测试在一个n2-standard-2谷歌云实例上运行,,该报告中的数字显示了7次测试运行的中位数。数据采集使用的是Lighthouse,测试结果显示了未加网络限制的观测指标,而不是模拟结果。
测试中总共包含1004个插件。很大比例的扩展只是修改新标签页屏幕,这些通常不会影响性能,所以大多数不会包含在结果中。一些测试结果有错误的插件也没有包括在内。
附录
Chrome插件开发相关文章: