Nikkei 借助多页 PWA 将质量和性能提升到新的水平

日经 (Nikkei) 是日本最权威的媒体企业之一,拥有 140 多年的出版历史。除了纸质报纸之外,他们每月的数字媒体资源访问次数超过 4.5 亿。为了提供更好的用户体验并加速其 Web 业务,Nikkei 于 2017 年 11 月成功推出了渐进式 Web 应用 (PWA) - https://r.nikkei.com。现在,他们看到了新平台 带来的令人惊叹的成果

性能提升 - 速度指数提升至原来的 2 倍 - 互动时间加快 14 秒 - 采用预提取功能后,加载速度加快了 75%

业务影响 - 自然流量提高 2.3 倍 - 转化次数(订阅量)增加 58% - 日活跃用户数增加 49% - 每次会话网页浏览量翻倍

下载 PDF 案例研究

商家概览

挑战

由于智能手机成为许多用户进入网页的主要渠道,日经集团的旧网站获得的移动流量迅速增加。然而,通过使用 Lighthouse(一种可以扫描网页并提供在多个类别中进行改进建议的审核工具),他们了解到他们的网站并未在多个区域针对移动设备进行全面优化,并且加载速度很慢。

他们的网站需要大约 20 秒才能实现始终可交互,速度指数平均为 10 秒。Nikkei 知道,如果加载时间超过 3 秒,53% 的移动用户就会放弃。因此,Nikkei 希望减少加载时间,以提供更出色的体验,并加速其在线业务。

速度的价值是无可争议的,对财经新闻而言更是如此。我们将速度设为了我们的核心指标之一,我们的客户已经欣赏了这一转变。

Taihei Shigemori,数字化策略经理

成果

2018 年 4 月在旧网站上运行的审核
2018 年 4 月在 mw.nikkei.com 上托管的旧网站上运行审核

日经取得了显著的效果提升。他们的 Lighthouse 得分 从 23 分飙升到 82他们的可交互性衡量时间缩短了 14 秒。 自然流量、速度、转化率和日活跃用户数也都有所增长。

PWA 是一款使用 Vanilla JavaScript 构建的多页应用 (MPA),可降低前端复杂性。为了实现这一性能,五位核心前端工程师用了一年时间。

Nikkei 的前端工程师已经证明,出色的用户体验能够带来良好的业务绩效。我们全力投入,继续推动网络质量更上一层楼。

东洋行。产品经理,Nikkei

解决方案

Nikkei 使用自适应设计、原版 JavaScript 和多页架构开发并推出了渐进式 Web 应用,专注于打造愉悦的用户体验。通过添加 Service Worker,无论网络如何,它们都能够提供可预测的性能。这还可确保热门报道始终可用并几乎立即加载,因为它们是使用 Cache Storage 存储的。他们添加了 Web 应用清单,并与 Service Worker 一起,让用户可以安装 PWA,使其易于访问。为了确保性能完全在他们的控制范围之内,他们优化了自己的第三方 JavaScript。

最佳实践

  • 通过使用现代 Web API、压缩和代码优化做法,提高加载速度和互动性。
  • 通过添加离线支持和“添加到主屏幕”等 PWA 功能逐步改善用户体验。
  • 将效果预算纳入效果策略。

技术深入探究

速度至关重要

速度比以往任何时候都重要。随着智能手机成为许多用户的主要浏览设备,日经发现其服务的移动流量迅速增加。但通过使用 Lighthouse,他们意识到他们的旧版网站并未针对移动设备进行全面优化,速度指数平均为 10 秒,初始加载速度非常慢,并且包含大量 JavaScript 软件包。所以,Nikkei 需要重新构建其网站并采用 Web 性能最佳实践。以下是新版 PWA 中的结果和关键性能优化措施。

利用 Web API 和最佳实践加快加载速度

预加载密钥请求

预加载密钥请求

必须优先加载关键路径。使用 HTTP/2 服务器推送,他们能够优先考虑他们知道用户需要的关键 JavaScript 和 CSS 软件包。

避免前往任何出发地的多次往返行程

正在加载第三方资源。

该网站需要加载第三方资源,以用于跟踪、广告和许多其他用例。他们使用 <link rel=preconnect> 预解析 DNS/TCP/SSL 握手和协商这些密钥第三方来源。

动态预提取下一页

动态预提取
动态预提取
动态预提取

当他们确信用户会导航到某个页面时,他们不会只是等待导航发生。Nikkei 会在用户实际点击链接之前,将 <link rel=prefetch> 动态添加到 <head> 并预提取下一页。这样可以实现网页即时导航。

内嵌关键路径 CSS

内嵌关键路径 CSS

减少阻塞渲染的 CSS 是加快加载速度的最佳实践之一。该网站内嵌所有关键 CSS,其中没有任何阻塞渲染的样式表。这项优化使首次有效绘制时间减少了超过 1 秒。

优化 JavaScript 软件包

优化 JavaScript 软件包

在之前的经验中,Nikkei 的 JavaScript 软件包变得臃肿,总共超过 300KB。通过对 vanilla JavaScript 的重写和现代捆绑优化(例如基于路由的分块和摇树优化),他们得以消除了这种膨胀。他们将 JavaScript 软件包的大小缩减了 80%,通过 RollUp 缩减至 60KB。

已实施的其他最佳做法

优化第三方 JavaScript

虽然优化第三方 JavaScript 不如您自己的脚本那么容易,但 Nikkei 成功地压缩并捆绑了所有广告相关脚本,这些脚本现在通过自己的内容分发网络 (CDN) 提供。与广告相关的代码通常会提供一个代码段,用于启动和加载其他所需脚本,这些脚本通常会阻止网页呈现,并且还需要额外的网络周转时间来下载每个脚本。Nikkei 采取了以下方法,将初始化时间缩短了 100 毫秒,并将 JS 大小缩减了 30%:

  • 使用 JS 捆绑器捆绑所有必需的脚本(例如Webpack)
  • 异步加载捆绑的脚本,使其不会阻止网页呈现
  • 将经过计算的广告横幅附加到 Shadow DOM(与 iframe 相比)
  • 利用 Intersection Observer API 在用户滚动时逐步加载广告

逐步改善网站

除了这些基本优化之外,Nikkei 还利用 Web 应用清单Service Worker 使其网站可安装,甚至可离线工作。通过在 Service Worker 中使用缓存优先策略,所有核心资源和热门文章都存储在 Cache Storage 中,并且即使在不稳定或离线网络等应急情况下也可以重复使用,从而提供一致且经过优化的性能。

入侵日经

一家拥有 140 多年历史的传统日报公司通过 Web 和 PWA 的力量成功加速了其数字化进程。Nikkei 的前端工程师证明,出色的用户体验能够带来出色的业务绩效。该公司将继续致力于让网络质量更上一层楼。

深入阅读