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