日本经济新闻拥有超过 140 年的出版历史，是日本最具权威性的媒体企业之一。除了纸质报纸外，他们每月还通过数字媒体获得超过 4.5 亿次访问。为了提供更好的用户体验并加速其在线业务发展，Nikkei 于 2017 年 11 月成功推出了渐进式 Web 应用 (PWA) - https://r.nikkei.com。现在，他们通过新平台取得了令人瞩目的成效。
性能提升 - 速度指数提升 2 倍 - 可交互时间缩短 14 秒 - 预提取功能可将加载速度提升 75%
业务影响 - 自然流量增加 2.3 倍 - 转化次数（订阅）增加 58% - 日活跃用户数增加 49% - 每次会话的网页浏览量增加 2 倍
商家概览
挑战
随着智能手机成为许多用户访问网络的主要入口点，Nikkei 传统网站的移动流量迅速增加。不过，通过使用 Lighthouse（一种审核工具，可扫描网页并针对多个类别提供改进建议），他们了解到自己的网站在多个方面未针对移动设备进行充分优化，加载速度非常慢。
他们的网站需要大约 20 秒才能持续响应交互，速度指数平均为 10 秒。Nikkei 知道，如果移动网站的加载时间超过 3 秒，53% 的移动用户会放弃访问，因此希望缩短加载时间，以提供更好的体验并加快其在线业务发展。
速度的价值毋庸置疑，尤其是在财经新闻方面。我们将速度作为核心指标之一，客户对这一变化表示赞赏。
Taihei Shigemori，数字策略经理
结果
日经取得了令人瞩目的效果提升。他们的 Lighthouse 得分从 23 飙升至 82。他们的“可交互时间”指标提高了 14 秒。 自然流量、速度、转化率和日活跃用户数也都有所增加。
该 PWA 是一款多页面应用 (MPA)，可降低前端复杂性，并使用 Vanilla JavaScript 构建。五位核心前端工程师花费了一年时间才实现了这一性能。
Nikkei 的前端工程师已证明，出色的用户体验可带来良好的业务成效。我们将全力以赴，继续为网络带来更高质量的内容。
Hiroyuki Higashi。产品经理，Nikkei
解决方案
Nikkei 创建并发布了一款渐进式 Web 应用，该应用采用自适应设计、原生 JavaScript 和多页面架构，专注于打造出色的用户体验。通过添加 service worker，他们能够提供可预测的性能，无论网络状况如何。这还可以确保热门文章始终可用，并且几乎可以立即加载，因为它们是使用 Cache Storage 存储的。他们添加了 Web 应用清单，并与 Service Worker 结合使用，让用户可以安装 PWA，从而轻松访问该应用。为了确保性能完全在他们的掌控之中，他们优化了第三方 JavaScript。
最佳做法
- 通过使用现代 Web API、压缩和代码优化实践来提高加载速度和互动性。
- 通过添加离线支持和“添加到主屏幕”等 PWA 功能，逐步提升用户体验。
- 将效果预算纳入效果策略。
技术层面的深入探讨
速度很重要
速度比以往任何时候都更加重要。随着智能手机成为许多用户的主要浏览设备，Nikkei 发现其服务的移动流量迅速增加。但使用 Lighthouse 后，他们意识到自己的旧版网站并未针对移动设备进行全面优化，速度指数平均为 10 秒，初始加载速度非常慢，JavaScript 软件包也很大。Nikkei 需要重建其网站并采用网页性能最佳实践。以下是新 PWA 中的结果和关键性能优化。
利用 Web API 和最佳实践来加快加载速度
预加载密钥请求
务必优先加载关键路径。通过使用 HTTP/2 服务器推送，他们能够优先处理用户需要的关键 JavaScript 和 CSS bundle。
避免多次往返于任何出发地，从而节省费用
网站需要加载第三方资源以用于跟踪、广告和许多其他应用场景。它们使用 <link rel=preconnect> 预先解析这些关键第三方来源的 DNS/TCP/SSL 握手和协商。
动态预提取下一网页
当他们确信用户会前往某个网页时，他们不会只是等待导航发生。Nikkei 会动态地将 <link rel=prefetch> 添加到 <head>，并在用户实际点击链接之前预提取下一页。这样便可实现即时网页导航。
内嵌关键路径 CSS
减少会阻塞渲染的 CSS 是提高加载速度的最佳实践之一。该网站以内嵌方式提供所有关键 CSS，且没有 0 个会阻塞渲染的样式表。此优化将首次有效渲染时间缩短了 1 秒以上。
优化 JavaScript 软件包
在之前的体验中，Nikkei 的 JavaScript 软件包非常臃肿，总大小超过 300 KB。通过重写为原生 JavaScript 和采用现代捆绑优化技术（例如基于路由的块划分和 tree-shaking），他们成功减少了这种臃肿。他们使用 RollUp 将 JavaScript 软件包大小缩减了 80%，降至 60KB。
实施的其他最佳实践
- 压缩：使用 Fastly CDN 对所有可压缩资源进行 Gzip/Brotli 压缩
- 缓存：启用 HTTP 缓存、边缘端缓存
- 图片优化：使用 imgix 进行优化和图片格式检测
- 延迟加载非关键资源：使用 Intersection Observer API 加载非首屏片段
- 制定网页字体加载策略：优先使用系统字体
- 优化首次有效渲染时间：在服务器端渲染内容
- 采用性能预算： 缩短 JavaScript 传输和解析/编译时间
优化第三方 JavaScript
虽然与自有脚本相比，优化第三方 JavaScript 并不容易，但 Nikkei 成功地缩小了所有与广告相关的脚本并将其捆绑在一起，这些脚本现在通过其自己的内容分发网络 (CDN) 提供。与广告相关的代码通常会提供一个代码段来启动和加载其他必需的脚本，这些脚本通常会阻止网页呈现，并且还需要额外的网络往返时间来下载每个脚本。Nikkei 采取了以下方法，将初始化时间缩短了 100 毫秒，并将 JS 大小减少了 30%：
- 使用 JS 捆绑器（例如 Webpack）
- 异步加载捆绑的脚本，以免其阻塞网页呈现
- 将计算出的广告横幅附加到 Shadow DOM（而非 iframe）
- 使用 Intersection Observer API 在用户滚动时逐步加载广告
逐步增强网站
除了这些基本优化之外，Nikkei 还利用 Web 应用清单和 Service Worker 使其网站可安装，甚至可以离线运行。通过在其服务工作线程中使用 cache-first 策略，所有核心资源和热门文章都存储在 Cache Storage 中，即使在网络不稳定或离线等紧急情况下也能重复使用，从而提供一致的优化性能。
破解日经指数
一家拥有 140 多年历史的传统日报公司通过 Web 和 PWA 的强大功能成功加速了数字化转型。Nikkei 的前端工程师证明，出色的用户体验可带来强劲的业务绩效。该公司将继续努力，为网络带来更高质量的内容。