Ele.me 利用多页渐进式 Web 应用缩短性能加载时间

Ele.me 是中国大陆最大的订餐和送餐公司。该应用为来自中国各地 200 多个城市的 2.6 亿注册用户提供服务,拥有超过 130 万条餐厅商家信息。鉴于 99% 的用户在移动设备上订餐,Ele.me 开始着手改善其移动网络体验,提高在易断线连接环境下的速度和可靠性,同时依靠多页面应用的核心技术模型来满足他们的运营需求。

  • 所有预缓存网页的加载时间缩短了 11.6%
  • 所有网页的加载时间平均缩短了 6.35%。
  • 在 3G 网络上,首次加载时可实现一致互动的时间缩短至 4.93 秒

在我们发布 ele.me PWA 后,我们的加载时间大幅缩短,将我们的移动网站体验变成了中国速度最快的订餐网站之一。

Ele.me PWA 产品经理 Spencecer Yang

选择多页应用还是单页应用

在多页应用 (MPA) 中,用户导航到的每个路由都会触发对页面的完整请求,以及所需的关联脚本和样式。这与单页应用 (SPA) 模型不同,在单页应用 (SPA) 模型中,每次路线导航都会触发系统仅获取与该路线相关的内容和数据,然后由客户端应用上运行的 JavaScript 代码构建界面。

近年来,Ele.me 的爆炸式发展促使公司内不同的业务部门也在增长,每个部门都负责在主 https://ele.me 网域下运行其微服务。Ele.me 团队认为,最好通过多页应用 (MPA) 模型来实现这些单项服务的分离,每个团队运行和维护自己的服务。

将 PRPL 应用于 MPA

PRPL 模式预加载关键资源、渲染初始路由、预缓存剩余路由、延迟加载剩余路由)为 Web 开发者提供了一组轨道来指导 PWA 的结构,其重点在于快速互动和最大限度缓存,以减少网络往返次数。虽然 PRPL 已在 SPA 上经过充分测试,但如何将其应用于 MPA 的机制并不明确。在考虑将其 MPA 重新构建为 PWA 时,Ele.me 决定采用 PRPL 思维模式。为此,他们可确保在用户导航到某个网页时,预加载该网页的关键资源,具体方法是根据需要包含 <link rel="preload">,或在足够浅的级别显示这些脚本,以便浏览器的预加载器可以在不需要其他提示的情况下完成工作。此外,他们还会在浏览器支持时安装 Service Worker,从而逐步增强 PWA 的功能。然后,他们会使用 Service Worker 提取并预缓存其他顶级导航路线,以便在用户在 PWA 中点击时获得更快的加载和渲染体验。MPA 中的每个页面都是其自己的路由,因此加快初始路由的呈现速度等同于实现最佳实践来优化每个路由的关键呈现路径。实施这些更改后,所有网页的总加载时间平均缩短了 6.35%。

尽快提供过渡框架屏幕

Ele.me 希望将骨架屏幕的理念融入用户体验,确保每当用户点按任何按钮或链接时,页面都能尽快做出反应,具体方法是将用户转到新页面,然后在内容可用时将内容加载到该页面;这也是提升 PWA 感知性能的关键。不过,由于 MPA 中的每个页面都是其自己的初始路线,因此每次导航都需要重新执行所有必要的加载、解析和评估工作。

为了解决这个问题,Ele.me 将框架屏幕构建为实际的界面组件,然后使用 Vue.js 的服务器端渲染堆栈构建 Vue 组件并将其预渲染为字符串,然后再将其注入 HTML 模板。这样,它们就可以直接呈现框架屏幕,并在页面之间导航时实现更流畅的过渡。


页面转换期间呈现骨架屏
页面转换期间的骨架屏幕
页面转换后网页完全呈现
页面转换后网页完全呈现

使用 Service Worker 缓存共享资源

当用户浏览 PWA 时,系统会加载不同的路由,反复从网络中加载这些路由是一种浪费。为了解决这个问题,Ele.me 分析了用户最关心的关键路由,创建了一个 Webpack 插件来收集这些关键路由的依赖项,然后在用户的客户端浏览器上安装 Service Worker 时预缓存了这些路由。这些关键路由包括 JavaScript、CSS 和图像,它们构成了 PWA 的典型界面 shell。

被视为重要但并不关键的路由将在运行时由 Service Worker 随着用户继续浏览 PWA 而逐渐缓存。这样一来,Ele.me 就可以在任何网络条件下直接从缓存中将 PWA 提供给用户。结果:所有预缓存网页的加载时间缩短了 11.6%。

深入阅读