一家初创公司打造一流 Web 体验的故事。
简介
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 设置了严格的里程碑式预算，目标是将其保持在 5 秒以内。为了实现这一目标，他们手动确保任何 build 的 JavaScript 软件包大小都不会超过 250 KB，不断检查图片大小，并持续跟踪应用的 Lighthouse 性能得分。
优化 JavaScript 软件包
该团队从基础知识入手，使用 PRPL 模式预缓存和优化 JavaScript 载荷，并改用 HTTP/2 来提供关键 JavaScript 软件包。
为了延迟加载非关键资源，他们使用了框架级延迟加载组件来加载折叠下 fragment。
为了消除任何 JavaScript 软件包瓶颈，该团队通过代码拆分来减少载荷。他们使用基于组件和路线的分块功能缩减了主要 bundle 的大小，并将加载时间缩短了 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 应用
在打造出速度快、功能齐全且具有出色用户体验的 Web 应用后，Truebil 希望确保用户不断回访。他们意识到，让用户能够安装应用，可以让他们更顺畅地进行多次访问。
该团队实现了添加到主屏幕功能，使其产品成为一款完整的渐进式 Web 应用 (PWA)。通过这种方法，用户可以将 Truebil Lite 添加到主屏幕，并在全屏模式下启动它。由于他们已经实现了离线模式，因此该团队能够轻松添加新功能。
为确保用户不会收到垃圾内容，并提高用户安装应用的可能性，该团队最近更新了推广 PWA 安装策略，以便在安装提示对不同类型的用户真正有用时显示这些提示。Truebil 最终确定了三管齐下的策略：
- 在用户完成操作或处于空闲状态时显示提示。
- 向成人用户显示情境提示。
- 在用户在网站上停留指定时长后展示横幅。
在流程完成时和高流量页面上显示默认横幅
该团队决定在用户完成任务或在高流量页面上处于空闲状态（即未执行任何操作，例如滚动或填写表单）时显示安装横幅。这种方法让他们能够避免中断用户的活动。
面向成人用户的情境提示
对于与应用互动了一段时间的用户，该团队使用高度贴合情境的自定义消息来展示将应用安装到主屏幕上的价值：
基于时间的提示的自定义横幅
最后，该团队内置了一个采用通知式设计且不会造成干扰的横幅，该横幅会在特定事件（例如打开商家信息页面或用户在应用中花费一定时间后）触发：
由于这些改进，Truebil 的转化率和互动率显著提高，用户会话时长延长了 26% ，转化次数增加了 61% 。鉴于每次转化的交易价值较高，这对他们的业务而言意义重大。
对于资源有限的初创公司来说，选择合适的平台对业务的成功至关重要。由于转化次数增加以及网站的顺畅覆盖面，我们改用侧重于速度、弹性和互动的 PWA 后，营销支出与收入之比提高了 80%。
Truebil 联合创始人兼产品和数据科学总监 Rakesh Raman
44%
缩短了加载时间
26%
延长用户会话时长
61%
转化次数增幅
80%
收入与营销支出之比增加