谷歌放豪言：Chrome 瀏覽器給用戶節約了1萬年的網頁等待時間
2023-11-10 20:17:38
Chrome 作為時下主流瀏覽器，在 pc、移動端的市場占有率一直處于遙遙領先地位。近日，谷歌在 ChromiumBlog上表示，Chromium團隊在引入Core Web Vitals（CWV，網站性能指標）體驗優化之后，Chrome 瀏覽器(桌面版和 Android 版)已經為用戶節省了一萬年的網頁加載時間。
谷歌在文章中介紹了 CWV 指標改進的背景、優化措施進而提升用戶體驗，讓網頁加載變得更快的同時，開發者生態系統也在努力改善網頁性能。以下是對原文的編譯。
2020年，谷歌引入了 Web Vitals 基本質量信號，旨在確保更好的用戶體驗。如今，有40% 的網站通過了所有的核心網絡指標，網頁加載的和響應交互都變得更加快速。借此，本文將詳細記錄這次性能優化旅程以及在瀏覽器和生態系統中實現這些成就所做的具體工作。
Chrome 對速度的追求
高效快速地提供信息和服務一直是谷歌業務的核心，也是 Chrome 團隊的工作動力。長期以來，他們注意到，即使網站在一段時間之內改善了性能，但隨著時間的推移，性能會隨之下降，即使Chrome 搜索速度再快，當頁面加載緩慢時，用戶體驗也會受到影響。
既然無法幫助這些網站提高性能，那該如何提高用戶體驗呢?為此，谷歌搜索團隊和Chrome 團隊展開協作，合力解決網頁性能、加載等諸多用戶體驗問題。
定義快速網絡
他們檢查了數百萬個網頁之后，給那些快速、用戶友好的網頁定義了一個公共標準（最初發布在《Web Vitals 背后的科學》），并將規范和數據發布到開放的生態系統獲取一些反饋。其次，他們還引入了核心網絡指標(CWV)，諸如具有突破性指標的最大內容繪制(LCP)，進而可以查看用戶在某個網頁的停留時長。
2021年8月，谷歌更新了搜索排名算法，這里面考慮了是否滿足 CWV 所確定的速度和可用性標準等因素。
小改變帶來的大提升
在引入 CWV 等指標及調整后，Chrome 的平均頁面加載速度快了166毫秒。到目前為止，該項目已為用戶節省了超過10000年的網頁等待加載時間，以及超過12000年的等待網頁響應用戶輸入時間。而且，網絡的速度還在不斷提高。在跟蹤了符合 CWV 的導航次數改進后，他們得到了最新的數據是，移動端為64.45%（比原來64% 高了一點）桌面端68.39%(原來是67%)。Chrome 數據團隊預測年底的通過率會達到約69%。
多項優化措施
后退/前進緩存（bfcache）旨在通過啟用即時的后退和前進導航來改善瀏覽體驗。BFCache 的命中率在 Android（3.6%）和桌面(1.8%)上逐月提高。
另一個具有特別影響的優化示例是PreconnectOnAnchorInteraction 功能，它在指針按下而不是指針抬起時連接到來源。這個完全推出的功能在 Android/桌面上使中位數 LCP 改善了6/10毫秒（0.4/1%），并且跨源 LCP 在 Android 和桌面上改善了約60毫秒。該功能的推出還導致內容廣告收入增加了0.08%，凸顯了性能優化對用戶參與度和生態系統健康的重大影響。
預渲染功能，通過在用戶實際訪問之前對頁面進行渲染，使頁面可以立即加載。通過在地址欄直接輸入 URL 加載頁面時進行預渲染，根據平臺不同，中位數 LCP 可以提高500-700毫秒（14-25%），全局中位數 LCP 在所有導航中提高了6.4毫秒。他們目前正在推出由地址欄發起的搜索的預渲染功能。
Chrome一直在努力將后臺標簽頁保持在用戶的視線之外。在 Windows11上實施的后臺標簽頁限制運行于 EcoQOS，以及在 macOS 上的任務角色和 QoS 調整，已經改善了最大內容繪制（LCP）和與下一次繪制的交互(INP)。
Web 現代化能夠運行各種類型的應用程序，這也需要管理這種工作負荷。他們一直在優化多個活動標簽頁下的 Chrome，并且很高興地報告，在過去6個月中通過調度和爭用的改進，INP 提高了5%，LCP 提高了2%。
在2022年，他們還對 Chrome 的頁面加載代碼進行了有針對性的改進。這導致 Android 上的 LCP 提高了10%，CWV 通過率提高了1.5%。
Chrome的渲染器也進行了一些改進。渲染器的主線程包括 JavaScript、渲染和圖像加載的任務隊列。一些改變優化了這些任務的優先級，以實現最佳的CWV，這些改進包含:高優先級的圖像加載、延遲后優先合成、SVG 柵格優化。
Chrome 優先加載 HTML 中解析的前五個圖像的示例。這將 LCP 從3.1秒改善到了2.5秒。
對生態的影響
博客中列舉了CWV對給網站生態帶來的變化，其中最重要的成就是驅動超三分之一的內容管理系統WordPress的性能改進，對比基于 LCP的 WordPress6.2，WordPress6.3的主題加載速度提高了27%，經典主題加載速度提高了18% 。
通過 CWV 三項核心指標（LCP、FID、CLS）并獲得“良好”體驗的 Web 占比
在 JavaScript 框架上，Chrome Aurora 與 Next.js、Angular 和 Nuxt 合作發布基于性能為重點的功能，如 next/script 組件、NgOptimizedImage 和nuxt/google-fonts。在2022年，Next.js 的通過率從20.4% 提高到27.3%，Angular 的通過率從7.6% 提高到13.2%，Nuxt 的通過率從15.8% 提高到20.2%。
在商業方面，性能優化帶來了顯著的增長。例如，RedBus 改善了 INP，并觀察到轉化率增加了7%。Economic Times 改善了 INP，頁面瀏覽量增加了42%，跳出率減少了49%。Meesho 成功將 LCP 從6.9秒降低到2.5秒，跳出率減少了16.6%，轉化率增加了3%。
以上所列舉的數據不僅僅只是數據變化，更多的是帶來了用戶體驗的提升。
谷歌在文章中介紹了 CWV 指標改進的背景、優化措施進而提升用戶體驗，讓網頁加載變得更快的同時，開發者生態系統也在努力改善網頁性能。以下是對原文的編譯。
2020年，谷歌引入了 Web Vitals 基本質量信號，旨在確保更好的用戶體驗。如今，有40% 的網站通過了所有的核心網絡指標，網頁加載的和響應交互都變得更加快速。借此，本文將詳細記錄這次性能優化旅程以及在瀏覽器和生態系統中實現這些成就所做的具體工作。
Chrome 對速度的追求
高效快速地提供信息和服務一直是谷歌業務的核心，也是 Chrome 團隊的工作動力。長期以來，他們注意到，即使網站在一段時間之內改善了性能，但隨著時間的推移，性能會隨之下降，即使Chrome 搜索速度再快，當頁面加載緩慢時，用戶體驗也會受到影響。
既然無法幫助這些網站提高性能，那該如何提高用戶體驗呢?為此，谷歌搜索團隊和Chrome 團隊展開協作，合力解決網頁性能、加載等諸多用戶體驗問題。
定義快速網絡
他們檢查了數百萬個網頁之后，給那些快速、用戶友好的網頁定義了一個公共標準（最初發布在《Web Vitals 背后的科學》），并將規范和數據發布到開放的生態系統獲取一些反饋。其次，他們還引入了核心網絡指標(CWV)，諸如具有突破性指標的最大內容繪制(LCP)，進而可以查看用戶在某個網頁的停留時長。
2021年8月，谷歌更新了搜索排名算法，這里面考慮了是否滿足 CWV 所確定的速度和可用性標準等因素。
小改變帶來的大提升
在引入 CWV 等指標及調整后，Chrome 的平均頁面加載速度快了166毫秒。到目前為止，該項目已為用戶節省了超過10000年的網頁等待加載時間，以及超過12000年的等待網頁響應用戶輸入時間。而且，網絡的速度還在不斷提高。在跟蹤了符合 CWV 的導航次數改進后，他們得到了最新的數據是，移動端為64.45%（比原來64% 高了一點）桌面端68.39%(原來是67%)。Chrome 數據團隊預測年底的通過率會達到約69%。
多項優化措施
后退/前進緩存（bfcache）旨在通過啟用即時的后退和前進導航來改善瀏覽體驗。BFCache 的命中率在 Android（3.6%）和桌面(1.8%)上逐月提高。
另一個具有特別影響的優化示例是PreconnectOnAnchorInteraction 功能，它在指針按下而不是指針抬起時連接到來源。這個完全推出的功能在 Android/桌面上使中位數 LCP 改善了6/10毫秒（0.4/1%），并且跨源 LCP 在 Android 和桌面上改善了約60毫秒。該功能的推出還導致內容廣告收入增加了0.08%，凸顯了性能優化對用戶參與度和生態系統健康的重大影響。
預渲染功能，通過在用戶實際訪問之前對頁面進行渲染，使頁面可以立即加載。通過在地址欄直接輸入 URL 加載頁面時進行預渲染，根據平臺不同，中位數 LCP 可以提高500-700毫秒（14-25%），全局中位數 LCP 在所有導航中提高了6.4毫秒。他們目前正在推出由地址欄發起的搜索的預渲染功能。
Chrome一直在努力將后臺標簽頁保持在用戶的視線之外。在 Windows11上實施的后臺標簽頁限制運行于 EcoQOS，以及在 macOS 上的任務角色和 QoS 調整，已經改善了最大內容繪制（LCP）和與下一次繪制的交互(INP)。
Web 現代化能夠運行各種類型的應用程序，這也需要管理這種工作負荷。他們一直在優化多個活動標簽頁下的 Chrome，并且很高興地報告，在過去6個月中通過調度和爭用的改進，INP 提高了5%，LCP 提高了2%。
在2022年，他們還對 Chrome 的頁面加載代碼進行了有針對性的改進。這導致 Android 上的 LCP 提高了10%，CWV 通過率提高了1.5%。
Chrome的渲染器也進行了一些改進。渲染器的主線程包括 JavaScript、渲染和圖像加載的任務隊列。一些改變優化了這些任務的優先級，以實現最佳的CWV，這些改進包含:高優先級的圖像加載、延遲后優先合成、SVG 柵格優化。
Chrome 優先加載 HTML 中解析的前五個圖像的示例。這將 LCP 從3.1秒改善到了2.5秒。
對生態的影響
博客中列舉了CWV對給網站生態帶來的變化，其中最重要的成就是驅動超三分之一的內容管理系統WordPress的性能改進，對比基于 LCP的 WordPress6.2，WordPress6.3的主題加載速度提高了27%，經典主題加載速度提高了18% 。
通過 CWV 三項核心指標（LCP、FID、CLS）并獲得“良好”體驗的 Web 占比
在 JavaScript 框架上，Chrome Aurora 與 Next.js、Angular 和 Nuxt 合作發布基于性能為重點的功能，如 next/script 組件、NgOptimizedImage 和nuxt/google-fonts。在2022年，Next.js 的通過率從20.4% 提高到27.3%，Angular 的通過率從7.6% 提高到13.2%，Nuxt 的通過率從15.8% 提高到20.2%。
在商業方面，性能優化帶來了顯著的增長。例如，RedBus 改善了 INP，并觀察到轉化率增加了7%。Economic Times 改善了 INP，頁面瀏覽量增加了42%，跳出率減少了49%。Meesho 成功將 LCP 從6.9秒降低到2.5秒，跳出率減少了16.6%，轉化率增加了3%。
以上所列舉的數據不僅僅只是數據變化，更多的是帶來了用戶體驗的提升。
