在数字化转型的时代，企业越来越注重用户体验的关键性。Real User Monitoring（RUM）通过实时监测用户行为和网站性能为技术决策提供了强有力的保证。

上一节对电商网站的用户体验进行了监测，通过RUM监测，团队发现了首屏加载速度的性能瓶颈，RUM的实时数据分析揭示了HTML传输阶段的问题，并为团队了解当前压缩技术提供了明确的决策支持。这一技术决策不仅提升了性能，更改善了用户体验，为电商网站赢得了竞争优势。更多详情可以参见这篇文章：juejin.cn/post/730929...

本文将继续结合先前提供的电商网站首屏优化实例，深入探讨RUM在技术决策中的关键作用。现在，我们深入探讨了Brotli算法的角色。Brotli是一项现代的基于字典的压缩算法，以更高级的压缩技术著称。尽管压缩和解压速度相对较慢，但由于更高的压缩效率，它在一些情况下能够节省带宽和加速数据传输。下面我们正式介绍一下brloti

正文

Brotli简介:

算法： Brotli 使用现代的基于字典的压缩算法，具有更高级的压缩技术。
压缩比： Brotli 在很多情况下提供了更好的压缩比，特别是对于文本和 Web 内容。
速度： Brotli 的压缩和解压速度相对较慢，但在一些情况下，由于更高的压缩效率，可以节省带宽和加速数据传输。

BR的好处

更好的压缩比:
- Brotli 压缩算法相比于传统的压缩算法（如 Gzip）通常提供更好的压缩比。这意味着对于相同的数据量，使用 Brotli 压缩可以减少传输的带宽需求，提高加载速度。
节省带宽成本:
- 由于 Brotli 的优秀压缩性能，使用它可以帮助网站节省带宽成本。这对于大型网站、内容分发网络（CDN）和其他需要大量数据传输的场景尤其重要。
提高页面加载速度:
- 减少传输数据量可以加快页面加载速度，改善用户体验。Brotli 在这方面的性能表现可能比传统算法更出色，特别是在移动网络环境下。
现代浏览器支持:
- 大多数现代的主流浏览器都支持 Brotli 压缩算法，包括 Chrome、Firefox、Edge 等。这意味着用户在使用这些浏览器访问网站时，能够充分享受到 Brotli 压缩带来的好处。

BR的兼容性

然而，在实施Brotli之前，我们需要仔细考虑兼容性的问题，尤其是一些较旧或较少使用的浏览器可能不支持该算法。在这种情况下，如果网站仅仅依赖Brotli，可能导致一些用户无法正常访问。所以在实施BR前，开发者需要仔细考虑兼容性的弊端。

RUM告诉你当前浏览器有哪些

尽管我们知道定期收集和分析用户浏览器版本信息有好处，但这个电商客户之前确实对浏览器信息收集相对较少，使用了观测云一段时间后，浏览器如下：

我们看到浏览电商网站的用户的浏览器相对集中，我们具体看一下占比：

当看到如此详尽的浏览器信息时，开发工程师也有底了，毕竟现在整站使用的是gzip的压缩算法，不过对于占比很高的chrome、safari、samsungBrowser、edge等主流浏览器，加起来占比已经97%了。

safar可能是个麻烦

不过Safari可能是个大问题，Safari 在某些 Web 标准的解释上可能与其他主流浏览器存在差异，导致网页在 Safari 中的显示效果与在其他浏览器中有所不同。这可能需要开发者针对 Safari 进行额外的适配工作。所以特意查询了safari对于br算法的兼容性，safari自2017年的11大版本就开始支持br算法。那么当前电商客户的safai浏览器中都有哪些版本呢？

运维和开发工程师都很开心，因为这意味着可以使用br算法，而且11版本以下的用户只有不足5个，这意味着可以用br算法为网站带来更高的性能的同时也能带来成本的降低，而且这一点在电商网站中效果可能尤为明显，我们初步预料会有这样的提高：

提高页面加载速度：
- Brotli 提供了更好的压缩比，因此可以减少传输的数据量，加快页面加载速度。在电商网站中，快速加载页面对于提供良好的用户体验至关重要，可以降低跳失率，提高用户留存。
降低带宽成本：
- 通过减少传输数据量，Brotli 可以降低网站的带宽成本。对于电商网站而言，特别是在有大量用户访问的情况下，这可以节省大量的带宽费用，同时提高网站的整体性能。
提升搜索引擎排名：
- 速度是搜索引擎排名的一个重要因素。使用 Brotli 提高页面加载速度可以对搜索引擎优化（SEO）产生积极影响，提高网站在搜索结果中的排名。
增强移动端用户体验：
- 移动设备上的网络速度通常相对较慢，因此通过使用 Brotli 等高效的压缩算法，可以显著改善移动端用户的加载体验。这对于电商网站来说尤为重要，因为越来越多的用户通过移动设备进行在线购物。
提高转化率：
- 更快的加载速度和更流畅的用户体验有助于降低用户的等待时间，从而提高转化率。在电商环境中，用户可能会因为加载速度慢而放弃购物车，因此通过采用 Brotli 等技术优化页面加载速度，可以提高用户的购物意愿。
客户满意度和忠诚度：
- 提供快速、高效的网站体验有助于提升客户满意度和忠诚度。满意的用户更有可能返回并完成购物，同时也更有可能在社交媒体或口碑中分享积极的体验，为电商网站带来更多的潜在客户。

当然这都只是理论，经过一番调查研究，我们采取稳步走的战略，第一步先把js、css的内容改为br压缩，js、css是纯文本，br算法能够显著减少js、css文件的体积，仅仅对css和js使用br算法后，以下是时序图

几乎肉眼就能看到加载时间的降低，不过不够明显，我们更精细化的看一下优化的效果。

优化效果

css

css体积下降了4.5%，

我们看一下css的传输时间：

使用了br算法后，css的传输时间降低了13.42%

js

我们看一下js：

js体积下降了6.28%。

我们看一下js传输时间：

使用br压缩js后，js的总传输时间降低了6.35%。

优化小总结

体积减小的好处

CSS 体积下降了4.5%，JS 体积下降了6.28%，这意味着用户在访问电商网站时能够更快地下载和加载页面所需的样式和脚本资源。这会导致更短的等待时间，提高用户体验，降低了用户流失率，增加了用户的满意度。

传输时间降低的好处

CSS 传输时间降低了13.42%，JS 总传输时间降低了6.35%，这直接影响到用户从服务器获取资源所需的时间。更快的传输时间意味着用户能够更迅速地获取网页内容，提高了整体页面加载速度。这对于电商网站来说尤为关键，因为用户在购物时通常期望页面加载迅速，以便更方便地浏览和购买商品。

数字化巅峰：RUM引领电商网站飞跃，Brotli算法优化再造用户体验

正文