theme: cyanosis
原文链接：https://web.dev/farfetch/
作者：web.dev
写在前面的话
本文摘自谷歌上有关性能提升的案例，文章的数据源自谷歌，妥妥的可以发朋友圈，@老板或者技术负责人给前端同学加鸡腿了。虽然只有3.3千字，全文却从业务视角来讲用户体验和性能，最重要的是给出了量化的优化结果。
结合最接近用户体验的前端同学，长久以来前端同学面临的窘境，认为：
- 前端人员少，前端经常要面对同时写很多页面的情况
- 前端工时少，一个搜索框为什么要写一周？
- 前端工资低。。。
这种怪象应该变一变了，一句话总结是：
需要给前端同学加人，
加福利，
加培训交流，
加工资，
否则用户体验很难提高。
往期上榜文章
- 无论公司的it架构多么先进，
- 都不会直接提供现成的业务解决方案。
- 提高业务转化率，比性能提高本身更重要。
正文
在很多公司，网站速度和核心网站指标依旧视为是工程师团队的职责。如果不理解业务和用户体验的价值，是很容易忽视网站速度的，而且更可怕的是，在做关键决策或者产品路线图时，也很容易忽略性能的作用。
为了增强团队的“性能文化”意识，大幅提升网站体验，奢侈电商零售品品牌-Farfetch，启动了专门制定和使用客户性能指标的项目，旨在与业务指标关联，希望以这种方式启发大家性能对公司api的影响。
奢侈品电商公司计划可不止步于此，最终目标是在公司内部掀起“文化变革”，打破组织壁垒新引入以业务为重点的语言，从底层自上拉齐所有人，有共同口径一致的技术话题，把网站速度指标作为公共的职责，推动一致的决策，并将其作为良好网站体验的主要支柱。
对比展示速度只是开发者的职责和速度是共同职责图片。前者每个阶段性能都有“打折”，后者每个阶段没有损耗。
首先，Farfetch认为单个部门无法实现这个目标，因此需要组建一支核心专家团队，他们来自工程部、基础设施、架构师和产品等，制定了step by step的策略，共同探讨如何实现这个目标。
Step 1：定义指标、测量指标、监控指标
首先，Farfetch需要有良好的监控工具了解网站当前状态，尤其在用户旅程和应用程序中究竟有多少的偏差。
利用实验数据和真实用户体验（线上数据），Farfetch记录了网站核心指标和用户性能指标，进而分析网站性能状态。他们使用js和web-vitals依赖库捕获数据，让产品分析团队能够可视化看到每个会话上的业务指标上的性能指标，同时检查不同指标的相互影响情况。
这个组建起来的小组首先要弄明白哪些指标对于业务最有价值。为此，小组列出网站用户的关键路径，在每个关键路径关联性能指标做了标记。除了Google列出的核心网页指标，每一个都能代表特定的用户体验的一方面，同时，该网站还埋点追踪Time to First Byte(TTFB),First Contentful Paint(FCP)，First Paint 和 Time to Interactive (TTI)。
主要使用Performance API、[long tasks]api收集。
有关更多细节详情，可以查看2020年中期由担任网站高级Principal Engineer的Manuel Garcia发表在Farfetch Tech Blog post的文章。
数据分析时，Farfetch有自己独特的多渠道追踪方案-Omnitracking。它能追踪页面浏览、用户行为和系统的动作。Omnitracking的数据模型根据事件产生的追踪数据用于分析，数据探索和报告案例。数据模型保持客观，这样能帮助任何需要的人，其中包含：
用户行为用户体验应用使用情况宏观转化、微观转化多渠道分析和漏斗分析
思路是把网站上每个页面上js收集的数据，特别是网站性能数据添加到数据集。根据这个模型，能够保证性能数据和每个会话的主要转化指标相匹配，同时可以展开数据挖掘。
Farfetch最后围绕着主要的轨迹页面中的每个指标都构建了时序性能预算，与此同时，也纳管了CI流水线上的性能指标，旨在开发流程中能更早地理解预算偏差。
step2：使用业务口径沟通
Farfetch公司内部业务智能数据集中收集了性能数据后，分析团队开始探索根据数据构建数学模型和规律，看能否揭示性能指标和业务KPI之间的相关性，比如单个页面的百分比和转化率之间的关系，这个就产生了一种新的视角，即从网站访问速度和体验来看待对财务的影响。这就让商业决策人能够以共同的口径商讨，数据分析中囊括了所有的核心网站指标和其他重要指标，确实产生很多的洞见。
需要注意的是，谷歌黄金指标只有不超过LCP2.5s，才有可能给用户提供好的体验。Farfetch仔细研究了这个临界值，得出了非常有意义的结果。
Farfetch公司相关性统计数据发现，当LCP超过2.5s后，转化率就会下降，当然用户网站退出率也攀升。这一数据说明用户真实感受页面加载缓慢，而且LCP每增加100ms，就会导致转化率降低1.3%。
Conversion Rate:转化率
Page Visits:页面访问量
Single Page Visits:单次页面访问
经Farfetch验证，一旦 Cumulative Layout Shift (CLS)下降0.01，页面跳出率下降3.1%，再次证明了页面稳定性对于留住用户的重要性。
有关页面交互和流畅度，不仅追踪页面First Input Delay (FID) ，并不断分析，还同时记录了TTI，也证实对于影响业务转化影响非常大。
为了这个目标，他们使用谷歌TTI来评分。使用长耗时api来报告页面长耗时任务（主线程耗时超过50ms的任务）
注意
不过目前不再推荐监测TTI，因为用户交互能影响页面TTI，导致报告结果出现“分歧”。
分析团队最后竟然发现，TTI每降低1s，转化率竟然提高了2.8%，这就非常明显的证明，高转化率源自高效率的代码和非阻塞的主线程。（如何不阻塞主线程可以查看这篇文章）
最后，这份分析报告也证明，许多指标对业务指标的影响并不明显，或者说，只在用户旅程中的不同阶段很多指标才更有关联。这也让大家更能明白当前转换漏斗上的每一个点都有机会。
Step 3:拥抱文化更新
随着对网站速度的用户感知的定量研究，得出的洞察对于公司建立一致的目标、保持执行水平，以及有关产品路线图中各个环节的决策都非常重要，也能证明性能对公司的价值。
为了将优先级流程化，Farfetch借鉴谷歌的性能计算器，新建了自服务工具–网站速度业务计算器。任何产品经理都能非常快速的利用它创建以性能提升对业务的影响程度的业务案例。使用用户体验和转化率的相关性创建的数据模型，就能很灵活的改善产品的范围、设备甚至是用户的旅程。
上图是Farfetch的网站速度业务案例计算器
与此同时，一整套的自助分析场景能创建实各种实时的性能计算器以及性能计算器对业务影响情况的业务可视图。性能已经完全融入到了产品开发过程中，产品团队非常开心的访问指标、审查工具和进行性能预算的监控。而且进一步，因为数据层的整合，性能指标对于公司A/B测试工具开放，让产品经理有了更强大的另一个方向的洞察。
最近几个月，核心团队也在记录这种文化不只是前端开发团队，而且也用同样的方法在监控和证明对于主要微服务的监控和影响。
当然在公司以外也有很多对于Farfetch驱动力的讨论。比如a 2021 Google I/O talk on the business impact of Core Web Vitals，也让性能这个主题和团队文化更紧密。
Step 4:提升指标
最后，所有的工作都能帮助Farfetch客观地提高网站的速度指标，保证所有的团队能够遵守最佳实践，追求提升点。
在2021年发现的一个主要的机会点，就是需要提升在产品页和列表页这两个主页面的LCP。
Farfetch的团队介绍了了如何加载这两个页面。通过使用业务模型，就能看到在这个机会点上的提升：
-
将产品图片的加载组件进行改造，使用其他方案
-
将图片资源划分等级：紧急和非紧急。
-
提前加载关键图片，对于已经在html中的资源提前使用来提前下载图片。
-
对于非关键图片，使用懒加载
<img loading="lazy">,对于safari等不支持该属性的浏览器使用兼容策略；
据此，Fartch能够通过needle，通过A/B测试证明假设和对业务的影响。拿产品页面举例来说，就能节省超过600ms，AB测试显示在公司置信水平能看到转化率提高1%-5%。
下图便是按照百分比列出了good页面、needs improvement(需要提升)页面和poor(差)的页面的提升（按照谷歌LCP评分）。
网站速度更快和遵守最佳实践
围绕性能建立一种文化，打造业务案例指标计算的工具，让每个人都口径一致，产品经理、工程师等之间能互相理解，进一步加速了新提议和性能提升的讨论和如何规划优先级。
“我们想从技术角度对性能的各个环节进行分解，但这方面应该只有工程师团队才能处理和修复“，Farfetch的网站渠道高级产品经理谈到，
对于奢侈品电商网站来说，不论网站速度快慢，都能影响消费者对品牌和服务质量的整体看法。对于用户来讲，高质量就意味着奢侈，这点同样适用于体验的方方面面，其中就包括网站的体验。鉴于网站速度指标对于转化率的有效提高，在Farfetch未来的计划中，性能无疑占据了非常坚实的一席之地。
本文正在参加「金石计划 . 瓜分6万现金大奖」
暂无评论内容