Nikkei 的發布史已有超過 140 年來,是日本最具權威性的媒體企業之一。除了紙本報紙,他們每個月也在數位財產獲得超過 4.5 億的造訪次數。為了提供更優質的使用者體驗,並加快網路業務的發展速度,Nikkei 在 2017 年 11 月成功推出了漸進式網頁應用程式 (PWA) (https://r.nikkei.com)。現在他們發現新的平台成效十分驚人
效能提升 - 速度指數提升 2 倍 - 互動速度加快 14 秒 - 預先擷取功能載入速度提升 75%
業務影響 - 自然流量提高 2.3 倍 - 轉換量增加 58% - 每日活躍使用者人數增加 49% - 每個工作階段的網頁瀏覽次數達 2 倍
商家介紹
挑戰
智慧型手機成為許多使用者上網的主要管道,因此 Nikkei 發現其舊網站的行動流量迅速增加。 不過,使用 Lighthouse 這項稽核工具會掃描網頁並提供改善多個類別的建議,他們發現網站還無法針對多個區域提供完全最佳化的行動版體驗,載入速度緩慢。
該公司的網站需要 20 秒以上的時間才能維持互動性,平均速度指數是 10 秒。由於知道有 53% 的行動裝置使用者會在載入時間超過 3 秒時放棄體驗,因此他希望縮短載入時間,以便提供更優異的體驗並加快業務發展。
速度的價值相當驚人,尤其是財經新聞。不僅速度是我們的核心指標之一,客戶也十分感謝這些異動。
數位策略經理 Taihei Shigemori
成果
Nikkei 的表現大幅提升,他們的 Lighthouse 分數從 23 分升至 82 分他們的互動評估時間縮短 14 秒。 自然流量、速度、轉換率和每日活躍使用人數也隨之提升。
PWA 是一種多頁面應用程式 (MPA),使用 Vanilla JavaScript 建構的前端複雜性。這五位核心前端工程師投入了一年
Nikkei 的前端工程師已證實,良好的使用者體驗能提升業務成效。我們持續投注大量心力,在改善網路品質的同時,也投入更多心力。
「Hiroyuki Higashi」。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 是加快載入速度的其中一種最佳做法。網站會將所有重要的 CSS 內嵌至無轉譯封鎖樣式表。這項最佳化作業讓首次有意義的繪製時間減少超過 1 秒。
最佳化 JavaScript 套件
在先前的經驗中,Nikkei 的 JavaScript 套件已經繁雜,總計 300 KB 以上。透過重寫到香草 JavaScript 和現代組合最佳化 (例如路徑式區塊和樹形),就能消除這些錯誤。他們運用 RollUp 將 JavaScript 套件大小縮減 80%,縮減為 60 KB。
採行其他最佳做法
- 壓縮:Gzip/Brotli 使用 Fastly CDN 的所有可壓縮資源
- 快取:啟用 HTTP 快取、邊緣端快取
- 圖片最佳化:使用 imgix 進行最佳化,以及偵測圖片格式
- 延遲載入非關鍵資源:使用 Intersection Observr API 載入需捲動位置的片段
- 採取網路字型載入策略:優先使用系統字型
- 最佳化第一個有意義的繪製:轉譯內容伺服器端
- 採用效能預算: 保持 JavaScript 傳輸和剖析/編譯時間較短
最佳化第三方 JavaScript
相較於自己的指令碼,將第三方 JavaScript 最佳化並不容易,但 Nikkei 成功壓縮並封裝所有廣告相關指令碼,這些指令碼現在自自家的內容傳遞聯播網 (CDN) 放送。廣告相關代碼通常會提供用於啟動及載入其他必要指令碼的程式碼片段,這類指令碼通常會封鎖網頁轉譯,而且每個下載的指令碼都需要額外的網路作業時間。Nikkei 採用以下方法,將初始化時間縮短 100 毫秒,並將 JS 大小縮減 30%:
- 使用 JS 分類器 (例如Webpack)
- 以非同步方式載入隨附的指令碼,這樣就不會阻擋網頁轉譯
- 將計算過的廣告橫幅附加至 Shadow DOM (相較於 iframe)
- 使用 Intersection Observer API 在使用者捲動時逐步載入廣告
逐步改善網站
除了這些基本最佳化功能外,Nikkei 還利用網頁應用程式資訊清單和服務工作人員,讓他們的網站可安裝,甚至離線運作。透過在 Service Worker 中使用 Cache-first 策略,所有核心資源和熱門文章都會儲存在快取儲存空間中,即使網路不穩定或離線等情況不穩定,也能重複使用,以提供一致的最佳化效能。
海克尼基
這間傳統每日報紙公司憑藉網頁和 PWA 的效能,成功在 140 多年前成功加速數位化。Nikkei 的前端工程師證明,良好的使用者體驗可以帶來優異的業務成效。該公司會繼續不斷地將網路品質提升至新境界。