一家初创公司打造一流网络体验的故事。
Google 大全
Truebil 成立于 2015 年，是印度的一个在线购物平台，销售 100% 经过认证的二手车。月活跃用户数超过 140 万，它提供包括所有权转让、保险、贷款和服务保证的一站式解决方案。潜在客户可以查看包含图片和详细检测报告的各个产品页面，并通过网站的“比较”和“Truescore”功能获得车辆评估结果。Truebil 凭借丰富的功能，让自己的产品脱颖而出，包括基于机器学习的个性化推荐、“添加到收藏夹”功能、共享汽车功能等。
挑战
Truebil 是一家精益初创公司，致力于低频率、高价值的交易，因此选择合适的平台作为优先事项和投资领域至关重要。
Truebil 确定将移动设备视为目标平台，因此他们选择了网络作为自己的第一个应用 Truebil Lite，这是因为网络便于用户发现，并且具有流畅性。与构建 Android/iOS 应用相比，Web 技术可以降低开发成本、减少数据和内存用量，并显著降低客户获取成本。此外，通过构建渐进式 Web 应用 (PWA)，Truebil 可以获享网络的所有优势和 iOS/Android 的优势。
解决方案
内部团队花费了四个月的时间，利用 React、Django 和 Preact（用于生产迁移）开发了 Truebil Lite。他们根据用户目标，为 Web 应用设定明确的指导原则。体验必须：
- 在首次加载和后续导航时快速加载，
- 可靠，不受用户的网络或设备限制；
- 吸引用户，尤其是对于小屏幕移动设备，吸引用户回访。
进行优化以实现快速首次加载和导航
利用 Lighthouse 和性能优化的指导，该团队在实现新功能的同时采用了性能优先的文化。Truebil 通过优先考虑首次内容绘制和可交互时间 (TTI) 指标，并针对快速首次加载、重复访问和顺畅导航进行优化，从而显著提升了用户体验。该团队通过设定性能预算并利用各种技术来实现这些成果，
设置性能预算
秉持性能优先的理念，Truebil 团队选择将其体验构建为单页应用，为首次加载使用服务器端渲染，为后续加载使用客户端渲染。让使用客户端渲染的 Web 应用保持高性能并非易事，因此 Truebil 设置了非常严格的性能预算，以确保其速度不影响应用，尤其是在应用添加更多功能时。
该团队为 TTI 设置了严格的基于里程碑的预算，目标是将其控制在 5 秒以内。为了实现这一目标，他们手动确保所有 build 的 JavaScript 软件包都不会超过 250 KB，持续检查图片大小，并持续跟踪应用的 Lighthouse 性能得分。
优化 JavaScript 软件包
该团队首先使用 PRPL 模式来预缓存和优化 JavaScript 载荷，并改用 HTTP/2 来提供关键的 JavaScript 软件包。
为了延迟加载非关键资源，他们使用框架级延迟加载组件加载非首屏 fragment。
为了消除任何 JavaScript 软件包的瓶颈，该团队通过代码拆分减少了载荷。他们使用基于组件和路由的分块来缩减主软件包的大小，并将加载时间缩短 44%，其中 TTI 从 6 秒缩短到约 5 秒，首次有效渲染时间 (FMP) 从 4.1 秒缩短到 3.6 秒。
内嵌关键 CSS
为了进一步改进 FMP，该团队使用 Lighthouse 寻找机会并验证性能优化的影响。Lighthouse 表明，减少阻塞渲染的 CSS 会产生最大的效果，因此 Truebil 内嵌了所有关键 CSS 和推迟的非关键 CSS。此方法将 FMP 减少了约 2 秒。
避免往返任何出发地的多次往返行程
为了减少 DNS 和 TLS 的开销，Truebil 使用了 <link rel="preconnect"> 和 <link rel="dns-prefetch">。这种方法会使浏览器在网页加载并预解析跨源域名时尽快完成 TLS 握手，从而提供安全快捷的用户体验。
<link rel=preconnect> 的影响。动态预提取下一页
通过分析这些数据，该团队确定了最常见的用户体验历程，并可供优化。在这些情况下，应用会使用 <link rel=prefetch> 动态下载下一页资源，以确保用户能够顺畅导航。虽然该团队手动标识了要预提取的链接，但他们使用 webpack 为这些链接捆绑 JS。
优化图片和字体
图片对 Truebil 的商品体验和信誉起着至关重要的作用，每个商品详情最多可包含 40 张照片。为确保图片不会阻止网页加载，该团队选择从 CDN 传送所有资源，并使用 imagemagick 进行图片优化。他们还使用 Gzip 压缩了所有可压缩资源（包括图片、JavaScript 和 CSS），以进一步缩短加载时间。
为了避免闪烁显示不可见文本，同时尽可能缩短加载时间，Truebil 将其 CSS 设置为使用系统字体作为后备，直到外部字体加载完成。
进一步优化
当应用准备就绪后，该团队希望进一步缩减供应商软件包大小和 JavaScript 执行时间，因此他们将其 React 应用切换到了生产环境中的 Preact。（如需了解详情，请参阅 React 集合）。这种方法帮助他们将供应商软件包大小从 82.3 KB 缩减到了 51.2 KB。
提高可靠性
Truebil 专注于印度市场，其绝大多数用户都是通过不稳定的网络访问其产品，而网络带宽有时低至 2G。因此，构建弹性体验不仅有助于在受限网络条件下提升性能，也对于提供用户可信赖的产品（始终有效）至关重要。
用于实现可靠加载的混合缓存策略
Truebil 内容的交互性和变化率有很大差异。为确保其所有内容都是最新且可靠的，Truebil 团队结合使用网络优先、缓存优先和最快优先策略实现了 API 缓存。
对于静态页面（例如订阅页面），Truebil 会使用缓存优先策略先访问其订阅 API 缓存，然后回退到网络。
对于包含极少发生变化的动态内容的网页（例如商品详情或详情页面），Truebil 会采用网络优先策略，这样一来，如果网络不可用，浏览器会先检查网络中的内容，然后再回退到 API 缓存。
对于会经常变化的动态网页（例如主页、过滤器、搜索和城市网页），Truebil 会采用最快优先的策略，根据先到者来选择网络或缓存。为了确保内容是最新的，每当网络响应与缓存中的内容不同时，缓存都会更新。
提供完整离线体验的 Service Worker
尽管 Truebil 的很大一部分内容都是高度动态的（随时都可以增购或购买汽车），但该团队希望确保即使用户使用的是不连贯或完全离线的网络，也能确保他们拥有一些内容可以进行互动。
借助 Service Worker，该团队能够同时缓存静态数据和用户已经互动过的动态数据，以便用户离线查看。为了确保用户重新上线后内容可能会发生变化，该团队将界面更改为灰度模式，以指明离线模式。浏览商品页面是 Truebil 用户体验历程中的关键一环。至少访问过 PWA 一次的用户可以浏览他们之前访问过的商品详情和商品页面，但无法看到商品详情或商品的任何更新。
提高互动度，吸引用户回访
富有吸引力的首次体验
由于他们的大多数用户都来自付费渠道，因此 Truebil 需要为其快速加载的 Web 应用提供一种可显示高度相关建议的产品，以增加转化率。虽然该团队使用基于复杂过滤的推荐系统，但该系统不适用于首次登录的用户。
为避免对初次使用的用户进行冷启动，该团队利用其数字营销工作集成了一个推荐系统。他们通过 UTM 参数将车型、价格和车身类型等产品详情添加到广告的目标网址中，推荐系统读取该参数，并反映在所展示的产品中。如果系统没有在网址中读取此类详细信息，则会回退到热门车型，热门车型由热门车型、热门预算和过去几周或几天内的热门车型共同组成。
可安装的 Web 应用
Truebil 开发了一款速度快、功能齐全的 Web 应用，能够提供引人入胜的用户体验，因此希望确保其用户会不断回访。他们意识到，使应用可安装能让重复访问变得更加顺畅。
该团队实现了添加到主屏幕功能，使其产品成为完整的渐进式 Web 应用 (PWA)。这种方法允许用户将 Truebil Lite 添加到主屏幕，并以全屏模式启动应用。由于他们已经实现了离线模式，因此该团队可以轻松添加这一新功能。
为确保用户不会受到垃圾内容的侵扰，并提高用户安装应用的可能性，该团队最近更新了推广 PWA 安装策略，以便在应用实际对不同类型的用户有用的内容时显示安装提示。Truebil 确定了一项包含三部分策略的策略：
- 在用户完成某项操作或处于空闲状态时显示提示。
- 向成人用户显示符合情境的提示。
- 在用户已在网站上停留一定时间后显示横幅。
在进程完成和高流量页面上显示默认横幅
该团队决定，当用户完成某项任务或位于高流量网页但处于空闲状态（即未执行滚动或填写表单等操作）时，展示安装横幅。这种方法使他们能够避免中断用户的活动。
针对成人用户的上下文提示
对于与应用互动了一段时间的用户，该团队使用与应用高度契合的自定义消息来展示将应用安装到主屏幕的价值：
基于时间的提示的自定义横幅
最后，该团队制作了一个类似于通知的非干扰性横幅广告，这种横幅广告可在特定事件（例如打开商品详情页面或用户在应用中停留一定时间后）时触发：
得益于这些改进，Truebil 的转化率和互动率显著提高，用户会话数增加 26% ，转化次数增加 61% 。鉴于每次转化的交易价值较高，这对于其业务而言意义非凡。
对于资源有限的初创公司，选择合适的平台对于业务成功至关重要。改用注重速度、弹性和互动度的 PWA，借助转化次数增加和网络覆盖的流畅性，我们将营销收入支出提高了 80%。
Truebil 联合创始人兼产品与数据科学主管 Rakesh Raman
44%
加载时间缩短
26%
更长的用户会话
61%
转化次数增幅
80%
营销支出增加