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