原文作者：廖健雄 - F5 资深解决方案顾问
编者按——本文为 NGINX 线上讲座“借助 F5 NGINX 交付极致用户体验”的课程实录的上篇。关注本号，接收本次课程实录的下篇.
在本节课程中，廖健雄老师详细介绍了用户访问体验的内容和量化，以及如何通过 Brotli 压缩、动态 webp 转换、HTTP/2 部署优化等具有可实操性的方式来提升用户访问体验。
本次分享主要分为三部分。首先，介绍什么是用户体验。其次，从技术角度分享提升用户体验的手段和方法。最后，廖健雄老师将与大家分享在某股份制商业银行的案例，详细介绍如何帮助客户提升和交付极致用户体验。
用户体验概览
![]()
首先，我们来探讨一下苹果、京东和招商银行这三家企业。不论苹果、京东或是招商银行，他们共同点是追求极致的用户体验。
先看苹果，从 iPod、iPhone、iPad 到 Mac 等一系列电子产品，苹果的出现改变了我们的生活方式。
再来看京东，他们用户体验做的非常好。京东的 CEO 说，他们内部有一个倒三角表，主要围绕三方面进行：用户体验、成本和效率。在做任何商业判断的时候，只要能降低成本或者提升效率，或者能够带来更好的用户体验，京东就会去做，否则就不做。
再来谈谈招商银行，它一直以来都以用户体验好著称的，相信很多同学也是招行的用户。招行是怎么看待用户体验这件事的呢？他们认为这是一个最“坏”的时代，在互联网巨头的引导下，用户对体验的评价标准越来越严苛；同时这也是一个最好的时代，用户体验被前所未有地提升到了企业的战略高度，所以招行因您而变。
我们来思考一个问题：这些企业，是因为它们注重用户访问体验所以成功了，还是因为它成功后才注重用户访问体验的呢？
我认为，是企业持续不断地追求用户访问体验的提升，所以才获得了成功。用户体验影响着品牌的形象与信誉、客户忠诚度、转化率、销售增长、用户留存、竞争优势、用户口碑和社交传播。
从终端用户的角度来看，一个 APP 或产品的用户体验好，在于用户用得很爽，用得身心愉悦。所以大家都可以感受到，用户访问体验对于企业业务至关重要。
用户体验的定义
接下来，我们来看用户体验到底是什么？用户体验，从严格意义上来说，是人在与企业进行交互时产生的感受。这种交互通常发生在网站或者其他数字化技术场景中，例如手机，各种 APP 等。
良好的用户体验所需要素
良好的用户体验包含七要素。这七要素是 90 年代的一位产品大师提出的理论，之后的产品经理也都是围绕此做拓展。七个要素分别是：有用性、可用性、可发现性、可信任性、有价值性、可访问性、理想性。
- 有用性是指系统或平台提供了对用户来说有用的功能或服务。
- 可用性是指系统 7*24 小时都可以访问，可用率达到 99.999%。
- 可发现性是指平台推出新功能后，用户是否可以轻易地发现和搜索到。
- 可信任性是指平台具备安全访问和安全交易的功能，让用户没有顾虑的使用平台或网站。比如，用户今天通过平台下单，明天个人信息被全网公开，这种是不可以发生的。
- 可访问性是指系统或平台的访问是快速的，流畅的，不卡顿的。
- 理想性是指平台提供的服务比人工服务更便利，业务形成闭环。比如某些产品用户可以在 APP 上预定，但如果想取消，需要通过打电话取消，这种用户体验就比较糟糕。
- 有价值性，是一个主观的体验，是指提供有价值的体验和值得投资的业务。
这七大要素，有一部分是跟业务相关，有很大一部分是跟 IT 技术相关，比如可用性、可访问性、可信任性都是跟 IT 直接相关。站在 IT 的视角，或者说站在基础架构的视角，我们怎样去量化衡量一个应用/ APP /网站的用户访问体验好不好呢？
如何量化用户访问体验
谷歌提供了一个工具，是 Google Page Insight。用户只需在 Google Page Insight 上输入一个网址，它就会计算浏览器的一些行为，通过请求的响应时间等方法，衡量该网址的用户体验分数。
比如，我们可以看到某国有大行和某股份制大行在 Google Page Insight 的得分，分别是 14 分和 54 分，这两家银行用户体验的得分是比较客观的。
由上图可以看出，Google Page Insight 是通过多个可量化的指标，包括资源加载时间、渲染时间、交互时间、阻塞时间等这些数据经过综合分析后，最终转化为一个具体的分值。理论上，如果一个网站在各项指标上都表现出色，就可以达到 100 分。
用户体验提升技术全景图
随着分布式、微服务等技术的发展，企业的IT架构越来越复杂。从客户端到服务端，传统环境下，过去我们要进入 CDN、DNS，在数据中心入口有 DDoS、WAF。过去我们只需要通过负载均衡即可到 Web 服务器或者 APP 服务器，近些年逐渐地出现了七层负载均衡、API 网关、反向代理等。
在微服务环境下，又部署了 K8S，这里面有 K8S 的入口，如果采用 service mesh 技术，还可能涉及更多的功能。整个数据链条越来越长，IT 架构越来越复杂，这意味着每个环节都可能会造成用户体验不好。
举一个简单的例子，数据链条越来越长的情况下，如果每个节点都有 5-10 毫秒的转发延迟，那么整个请求的延迟可能会高达几十毫秒。
站在 F5 的角度，我们更主张统一技术栈。我们的理念非常简单：在数据中心入口或云环境中，采用 F5 传统的 Big IP 解决方案，相应的四层负载、DNS、SSL 加解密、WAF 等能力通过这一层的形态来部署。
再到应用内部，无论是 API 网关、新的反向代理、Web Server 还是 APP Server、Ingress controller 等，都通过 NGINX 实现。这种模式不仅能显著降低由不同管理面带来的管理成本，还能极大压降数据链条上的转发跳数，来提升用户体验。
![]()
有人可能会问，为什么要用 NGINX？从用户体验的角度来说，每个请求处理的时延越低，意味着用户体验越好。从这个角度来说，NGINX 一直是业界的性能标杆。
如上图左上角表格，是一张 NGINX 的性能压测 datasheet。可以看到，一个 8 core 的裸机，可以达到 30 万的 RPS，SSL 可以达到 5000，这是在纯 CPU 运算情况下跑出来的，如果是在部署 QAT 卡的情况下，SSL 可能提升至几万。
经常做压测的同学可能会有直观的感受，当 RPS 性能低的时候，延迟就会增加；RPS 性能提升，对应延迟会下降。出色的性能意味着每个请求的时延是比较低的。
为什么说 NGINX 一直是业界的性能标杆？从近些年涌现的云原生反代工具友商的宣传语可以看出，比如他们宣传高性能，是这样写的，“超过 NGINX 的 HTTP 处理能力”、“像 NGINX 处理 HTTP 一样，处理各种应用层协议”等。这说明友商对 NGINX 的评价很高。
Traefik 在官网进行的压测，声称其性能略低于 NGINX，但低得不多。在特定场景下，Traefik 能够达到 28000，NGINX 是 33000，这意味着 Traefik 的性能大概是 NGINX 的 85 折。对于 Traefik 来说，看起来是一个比较满意的结果。总体而言，优秀的性能是提升用户体验的基础与保障。
这是 F5 + NGINX 提升访问体验的技术全景图，我们可以通过以下一系列手段和方法来实现用户体验的提升。
-
高可用：高可用是用户访问体验的一环，传统的 Big IP 是 Load Balance 当之无愧的老大。
-
最优访问路径：F5 可以通过 GSLB 和智能 DNS 技术，比如在两地三中心等这样的场景下，为用户提供最优的接入地址。例如，电信用户可以解析到电信地址，联通用户可以解析到联通地址，通过最优的地址来获得更好的体验。例如出向会选择链路负载，选择最优的出向地址，包括源进源出。
-
网络优化：Big IP 可以进行 TCP/IP 协议栈的优化，包括多路径 TCP。
-
安全性提升：Big IP 也能够提供 DoH、WAF、防撞库等一些安全能力的增强。
-
在应用层面，优化方法也很多。例如，在反向代理层面，我们可以利用第三方谷歌的 pagespeed 模块优化网站。Pagespeed 能够在源站不改变的情况下，进行图像优化、CSS 优化、延迟加载等操作，从而提升网站的访问体验。
-
减少时延：通过部署 CDN、部署 keepalive 的 feature、在反向代理层面启用缓存等措施，以降低延迟。
-
减少客户端请求的数量：我们可以通过设置 cache control 字段和相关参数，人为地减少浏览器请求的数量。
-
数据压缩：在文本压缩方面，除了传统的 gzip 压缩，还有近期兴起的 Br 压缩，能够更高效地压缩算法，来提升压缩效率。在图片压缩方面，我们可以采用 webp 或 AVIF 等高性能的图片压缩算法来提升压缩效率。
-
优化 SSL/TLS：我们可以采取构建 SSL 资源池、session 复用、引入硬件加速卡等手段来提升 SSL 性能。
此外，还有更高效、更直观的方式，是引入更新的协议和算法，例如 HTTP/2 和 HTTP/3。
这就是 F5 + NGINX 提升访问体验的技术全景图，如果展开每个 feature 具体讲解的话，都需要花很长时间。这是一个体系化的内容，从网络层到应用层再到安全的每一个特性，F5 和 NGINX 都可以帮助您提升网站和应用的用户访问体验。
