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