【译】 eBay.com 的速度优化

原文链接: https://web.dev/shopping-for-speed-on-ebay/

文章看似说的简单,但是里面具体的链接知识值得学习,web.dev真的很多干货

eBay在2019 非常重视 用户速度,很多团队致力于呈现给用户最快的app和网站的速度。结果表明,在eBay搜索页面加载时间每提高100毫秒,“加入购物车”的次数就增加0.5%。

通过采纳了 (经过研究 Chrome User Experience Report 得出的) Performance Budgets,并且聚焦于一些关键性能指标User-centric performance metrics,eBay 在速度方面有了巨大的提升。

另外使用chrome的用户数据也展示出了这些提升(来自chrome用户体验报告,FCP,FID两个指标 )

虽然还任重道远,但是eBay暂时是这些了。

web性能之“剪枝”

eBay通过对面向用户的实体内容的削减或者裁剪,达到了优化的目的。这篇文章主要讨论与web开发人员社区相关的主题,而不是特定于ebay的主题。

削减所有文本资源

加载更少的代码是提高速度的一个方法。eBay通过剪裁没用的或者不必要的js,css,html,以及返回的json数据来减少传递给用户的数据负载。在此之前,eBay每次上新功能都是在原有的负载数据上叠加,没有清除掉无用数据,这渐渐的成为了性能的瓶颈,团队都对此动作有拖延。你将看到eBay削减了很多负载。

折叠线以上内容的 above-the-fold content关键路径优化

屏幕上不是每个像素都同等重要的。折叠线以上的内容更加关键,eBay的服务架构里面有一层叫做体验服务,是直接对接前端的。
这一层服务根据视图和设备(而不是数据实体本身),当一个请求进来的时候,折叠线以上的内容优先被加载,其他内容会被懒加载或者在后面的chunk里面。结果就是:关键的内容会优先加载,更快地呈现出来。

图片优化

图片是网页体积膨胀的大头。尽管要花很多功夫在图片的各种优化,eBay主要做了这两块优化。

首先,eBay在iOS,安卓以及其他所有支持webp格式图片的浏览器上所有搜索结果使用了webp格式图片,搜索结果页是eBay用的图片最多的图片的页面。

其次,尽管eBay的列表图片已经经过优化了,但是很多图片是手工制作上传的,所以效果参差不齐,eBay现在强制了上传工具,在上传的时候就进行图片优化。

静态资产的预取

在eBay,一个用户的session不止是一个页面,它是一个流。例如,这个流可以是首页到搜索页的一个item详情页。所以为啥在一个流中的页面不相互帮忙呢?也就是预测预取,页面去预先加载用户可能去的页面资源。

使用预测预取,当用户导航到预测的页面时,资产已经在浏览器缓存中。提前检索url然后缓存css和js。这里需要注意的一点是,它只对第一次导航有帮助。在随后的导航中,静态资产将已经在缓存中。

预加载搜索结果

当用户搜索eBay,eBay的会根据分析数据返回用户最可能感兴趣的10条数据,eBay现在会预加载这10条数据,分为两层。

第一层是在服务端,服务会缓存用户搜索结果里面10个出现最多的item。当用户进入某个item,可以节省服务器请求的时间,本地应用程序利用服务器端缓存,并在全球范围内推广。

另外一层是浏览器缓存,目前在澳大利亚灰度实现了。item是动态的而且每种item不太一样:页面曝光,容量,拍卖/抢购的item等等。具体可以查看 LinkedIn’s Performance Engineering Meetup presentation,或者去eBay查看关于此话题的文章。

优先下载搜索的图片

在搜索结果页,当一个query进来,会做两件事。一个是排序,返回10条最相关匹配的内容。另外一个是根据用户的上下文信息返回产品相关的信息例如运费等。eBay现在会立即将前10个项目的图像连同http header一起以块的形式发送到浏览器,这样就可以在其他内容到达之前开始下载。结果是:图片会加载更快,这已经在web平台的全球范围内实行了。

提示数据的缓存

当用户输入内容搜索的时候,提示框会弹出。这些提示根据这个输入内容搜出来的结果一天内都不会变化.它们很适合用CDN缓存起来(最大24小时)而不是每次都请求服务器.国际市场尤其受益于CDN缓存。

有个问题,其实。eBay有些根据用户个性化信息级别的元素给出提示弹窗,不适合缓存。不过用户级别的搜索提示和一般的搜索提示可以分开接口来处理就好了。在国际市场来说,延迟问题比个性化重要,eBay目前在非美国地区都会将搜索提示缓存到CDN。

未识别用户的缓存

对于web平台,未被识别的用户的主页内容对于特定区域是相同的。这些用户要不就是第一次打开eBay,要不就是清除了session,所以没有个性化了。尽管主页的创意不断变化,但仍有缓存的空间。

eBay会利用边缘网络PoPs缓存用户的数据一段时间。首次进入用户会在离他最近的服务器得到首页数据,而不是其他服务器。eBay还在对国际市场进行实验,这会有更多的优化。

其他平台的优化

原生App(安卓,IOS)的解析优化

原生App(安卓,IOS)与后端一般用JSON进行数据传输,JSON有时候会很大,eBay优化了解析算法优化了需要马上渲染的内容

用户可以更快的看到内容。另外,对Android端,在eBay,只要用户在搜索框输入,就开始初始化视图控制器。之前是先要按搜索按钮的。

原生App

采用了冷启动的优化,特别是在安卓端。当使用冷启动,很多初始化都发生在操作系统和应用级别,减少应用级别的启动时间可以让用户更快看到首页。eBay做了一些分析,注意到并不是所有的初始化都需要显示内容,有些可以延迟完成。

eBay还发现一些第三方数据分析阻碍了启动的时间,让它们异步加载有助于冷启动加快。

总结

eBay每段时间都会做一些优化,这些版本在一年中分阶段发布,每一次发布都缩短了几十毫秒,最终达到了eBay现在的情况:

性能是一种特性,也是一种竞争优势。优化体验会带来更高的用户参与度、转化率和ROI。在eBay的例子中,这些优化从简单的工作到一些高级的工作都有。

查看 Speed by a thousand cuts,可以了解更多,并在不久的将来寻找更多的细节文章,由eBay工程师记录对他们的性能工作。

https://juejin.im/post/5e34db045188254d95243199

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论