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