日經是日本最具權威的媒體之一，出版歷史超過 140 年。除了紙本報紙，他們的數位資源每月也有超過 4 億 5 千萬次造訪。為了提供更優質的使用者體驗，並加速網站業務發展，Nikkei 在 2017 年 11 月成功推出漸進式網頁應用程式 (PWA) - https://r.nikkei.com。如今，他們在新平台上獲得了出色的成效。
效能提升 - 速度指標提升 2 倍 - 互動準備時間縮短 14 秒 - 透過預先載入功能，載入速度提升 75%
對業務的影響 - 自然流量增加 2.3 倍 - 轉換次數 (訂閱) 增加 58% - 每日活躍使用者增加 49% - 每個工作階段的網頁瀏覽次數增加 2 倍
商家介紹
挑戰
由於智慧型手機成為許多使用者進入網路的主要入口，Nikkei 發現他們的行動流量迅速攀升。不過，他們使用了Lighthouse 這項稽核工具，掃描網頁並提供多個類別的改善建議，進而瞭解網站在多個方面並未完全針對行動裝置進行最佳化，且載入速度非常慢。
該公司的網站需要約 20 秒的時間才能持續處於互動狀態，在速度指數上平均需要 10 秒的時間。根據調查，如果載入時間超過 3 秒，有 53% 的行動裝置使用者會放棄使用體驗，因此 Nikkei 希望縮短載入時間，提供更優質的使用體驗，並加速網站業務。
速度的重要性無庸置疑，特別是金融新聞。我們加快了其中一項核心指標的速度，客戶也很讚賞這項改變。
數位策略經理 Taihei Shigemori
結果
Nikkei 的性能大幅提升，Lighthouse 分數從 23 躍升至 82。互動間隔評估時間縮短了 14 秒。自然流量、速度、轉換率和每日活躍使用者人數也都隨之上升。
PWA 是使用 Vanilla JavaScript 建構的多頁面應用程式 (MPA)，可降低前端的複雜度。五位核心前端工程師花了一年的時間，才達成這項成就。
Nikkei 前端工程師經過實證，良好的使用者體驗可以提升業務成效。我們會全力投入，繼續為網路帶來更高品質的內容。
東廣西，日經產品經理
解決方案
Nikkei 使用回應式設計、純 JavaScript 和多頁架構，打造並推出漸進式網頁應用程式，專注於打造令人滿意的使用者體驗。透過新增 Service Worker，無論網路為何，都能提供可預測的效能。這也能確保熱門文章隨時都可以使用並幾乎立即載入，因為這類文章是以快取儲存空間儲存。他們新增了網頁應用程式資訊清單，並與 Service Worker 搭配使用，讓使用者可以輕鬆安裝 PWA。為了確保效能完全由他們掌控，他們針對第三方 JavaScript 進行最佳化。
最佳做法
- 使用新式網頁 API、壓縮和程式碼最佳化做法，改善載入速度和互動性。
- 透過新增 PWA 功能 (例如離線支援和新增至主畫面)，逐步改善使用者體驗。
- 根據成效策略制定成效預算。
深入探討技術
速度是致勝關鍵
速度比以往更加重要。隨著智慧型手機成為許多使用者的主要瀏覽裝置，Nikkei 的服務行動流量也迅速增加。但使用 Lighthouse 後，他們發現舊版網站尚未針對行動裝置進行最佳化，因為速度索引平均需要 10 秒、初始載入速度非常緩慢，以及大型 JavaScript 套件。因此，Nikkei 決定重建網站，並採用網站效能最佳做法。以下是新 PWA 的結果和主要效能最佳化方式。
利用網路 API 和最佳做法加快載入速度
預先載入金鑰要求
請務必優先載入關鍵路徑。使用 HTTP/2 伺服器推送功能，他們可以將使用者需要的重要 JavaScript 和 CSS 套件設為優先順序。
避免多次往返不同出發地的來回行程，且費用高昂
網站需要載入第三方資源，以便追蹤、放送廣告和執行許多其他用途。他們使用 <link rel=preconnect> 來預先解析這些關鍵第三方來源的 DNS/TCP/SSL 握手和交涉。
動態預先擷取下一頁
當他們確信使用者會前往特定網頁時，並不會只是等待導覽程序發生。Nikkei 會動態將 <link rel=prefetch> 新增至 <head>，並在使用者實際點選連結之前預先擷取下一頁。這樣一來，即可啟用即時網頁導覽功能。
內嵌重要路徑 CSS
減少轉譯阻斷 CSS 是加快載入速度的最佳做法之一。此網站會在包含 0 個轉譯封鎖樣式表的情況下，內嵌所有重要的 CSS。這項最佳化措施讓畫面首次有效顯示所需時間縮短超過 1 秒。
最佳化 JavaScript 套件
在先前的經驗中，Nikkei 的 JavaScript 套件過於龐大，總大小超過 300 KB。透過重寫為一般 JavaScript 和採用新式捆綁最佳化功能 (例如以路線為基礎的區塊化和樹狀圖搖晃)，他們得以減少這種膨脹現象。他們利用 RollUp 將 JavaScript 套件大小縮減 80%，並降至 60KB。
實施的其他最佳做法
- 壓縮：使用 Fastly CDN 的 Gzip/Brotli 壓縮所有可壓縮的資源
- 快取：啟用 HTTP 快取和邊緣快取功能
- 圖片最佳化：使用 imgix 進行最佳化及偵測圖片格式
- 延遲載入非重要資源：使用交集觀察器 API 載入需捲動位置的片段
- 制定網頁字型載入策略：優先使用系統字型
- 改善畫面首次有效顯示所需時間：在伺服器端算繪內容
- 採用效能預算：維持較低的 JavaScript 傳輸和剖析/編譯時間
最佳化第三方 JavaScript
雖然相較於自有指令碼，第三方 JavaScript 的最佳化作業較為複雜，但 Nikkei 仍成功將所有廣告相關指令碼精簡並整合，現在則透過自有的內容傳送網路 (CDN) 放送。廣告相關代碼通常會提供程式碼片段，以啟動及載入其他必要的指令碼，這通常會封鎖網頁轉譯，且每個已下載的指令碼都需要額外的網路處理時間。Nikkei 採取了下列做法，將初始化時間縮短 100 毫秒，同時將 JS 大小縮減 30%：
- 請使用 JS 整合工具封裝所有必要指令碼 (例如Webpack)
- 非同步載入已組合的指令碼，以免阻斷網頁轉譯
- 將計算廣告橫幅附加至 Shadow DOM (而非 iframe)
- 使用 Intersection Observer API，在使用者捲動畫面時逐步載入廣告
逐步改善網站
除了這些基本最佳化功能之外，日經新聞也善用網頁應用程式資訊清單和Service Worker，讓網站可供安裝，甚至可在離線狀態下運作。在服務工作者中使用快取優先策略，所有核心資源和熱門文章都會儲存在快取儲存空間中，即使在網路不穩定或離線等特殊情況下，也能重複使用，提供一致且最佳化的效能。
駭客入侵日經
一家擁有 140 多年歷史的傳統日報公司，成功透過網頁和 PWA 的力量加速數位化。Nikkei 的前端工程師證明，優異的使用者體驗可帶來強勁的業務成效。該公司將持續致力於提升網路品質。