日经 (Nikkei) 是日本最权威的媒体企业之一,拥有 140 多年的出版历史。除了纸质报纸之外,他们每月的数字媒体资源访问次数超过 4.5 亿。为了提供更好的用户体验并加速其 Web 业务,Nikkei 于 2017 年 11 月成功推出了渐进式 Web 应用 (PWA) - https://r.nikkei.com。现在,他们看到了新平台 带来的令人惊叹的成果
性能提升 - 速度指数提升至原来的 2 倍 - 互动时间加快 14 秒 - 采用预提取功能后,加载速度加快了 75%
业务影响 - 自然流量提高 2.3 倍 - 转化次数(订阅量)增加 58% - 日活跃用户数增加 49% - 每次会话网页浏览量翻倍
商家概览
挑战
由于智能手机成为许多用户进入网页的主要渠道,日经集团的旧网站获得的移动流量迅速增加。然而,通过使用 Lighthouse(一种可以扫描网页并提供在多个类别中进行改进建议的审核工具),他们了解到他们的网站并未在多个区域针对移动设备进行全面优化,并且加载速度很慢。
他们的网站需要大约 20 秒才能实现始终可交互,速度指数平均为 10 秒。Nikkei 知道,如果加载时间超过 3 秒,53% 的移动用户就会放弃。因此,Nikkei 希望减少加载时间,以提供更出色的体验,并加速其在线业务。
速度的价值是无可争议的,对财经新闻而言更是如此。我们将速度设为了我们的核心指标之一,我们的客户已经欣赏了这一转变。
Taihei Shigemori,数字化策略经理
成果
日经取得了显著的效果提升。他们的 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,其中没有任何阻塞渲染的样式表。这项优化使首次有效绘制时间减少了超过 1 秒。
优化 JavaScript 软件包
在之前的经验中,Nikkei 的 JavaScript 软件包变得臃肿,总共超过 300KB。通过对 vanilla JavaScript 的重写和现代捆绑优化(例如基于路由的分块和摇树优化),他们得以消除了这种膨胀。他们将 JavaScript 软件包的大小缩减了 80%,通过 RollUp 缩减至 60KB。
已实施的其他最佳做法
- 压缩:使用 Fastly CDN 运行 Gzip/Brotli 的所有可压缩资源
- 缓存:启用 HTTP 缓存、边缘端缓存
- 图片优化:使用 imgix 进行优化和图片格式检测
- 延迟加载非关键资源:使用 Intersection Observer API 加载非首屏 fragment
- 制定网页字体加载策略:优先使用系统字体
- 优化首次有效渲染:在服务器端渲染内容
- 采用性能预算:降低 JavaScript 传输和解析/编译时间
优化第三方 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 的前端工程师证明,出色的用户体验能够带来出色的业务绩效。该公司将继续致力于让网络质量更上一层楼。