【CSDN 編者按】谷歌通過官博發(fā)文稱，在通過谷歌搜索和 Chrome 瀏覽器的通力合作，以及重磅引入 Core Web Vitals（CWV，網(wǎng)站性能指標）后，Chrome 瀏覽器給用戶節(jié)省了 1 萬年的等待時間，以及超過 12000 年的等待網(wǎng)頁響應(yīng)用戶輸入時間。

編譯 | 夢依丹     

出品 | CSDN（ID：CSDNnews）

Chrome 作為時下主流瀏覽器，在 pc、移動端的市場占有率一直處于遙遙領(lǐng)先地位。近日，谷歌在 Chromium Blog 上表示，Chromium 團隊在引入 Core Web Vitals（CWV，網(wǎng)站性能指標）體驗優(yōu)化之后，Chrome 瀏覽器（桌面版和 Android 版）已經(jīng)為用戶節(jié)省了一萬年的網(wǎng)頁加載時間。

圖源：statcounter

谷歌在文章中介紹了 CWV 指標改進的背景、優(yōu)化措施進而提升用戶體驗，讓網(wǎng)頁加載變得更快的同時，開發(fā)者生態(tài)系統(tǒng)也在努力改善網(wǎng)頁性能。以下是對原文的編譯。

2020 年，谷歌引入了 Web Vitals 基本質(zhì)量信號，旨在確保更好的用戶體驗。如今，有 40% 的網(wǎng)站通過了所有的核心網(wǎng)絡(luò)指標，網(wǎng)頁加載的和響應(yīng)交互都變得更加快速。借此，本文將詳細記錄這次性能優(yōu)化旅程以及在瀏覽器和生態(tài)系統(tǒng)中實現(xiàn)這些成就所做的具體工作。

Chrome 對速度的追求

高效快速地提供信息和服務(wù)一直是谷歌業(yè)務(wù)的核心，也是 Chrome 團隊的工作動力。長期以來，他們注意到，即使網(wǎng)站在一段時間之內(nèi)改善了性能，但隨著時間的推移，性能會隨之下降，即使 Chrome 搜索速度再快，當(dāng)頁面加載緩慢時，用戶體驗也會受到影響。

既然無法幫助這些網(wǎng)站提高性能，那該如何提高用戶體驗?zāi)兀繛榇耍雀杷阉鲌F隊和 Chrome 團隊展開協(xié)作，合力解決網(wǎng)頁性能、加載等諸多用戶體驗問題。

定義快速網(wǎng)絡(luò)

他們檢查了數(shù)百萬個網(wǎng)頁之后，給那些快速、用戶友好的網(wǎng)頁定義了一個公共標準（最初發(fā)布在《Web Vitals 背后的科學(xué)》），并將規(guī)范和數(shù)據(jù)發(fā)布到開放的生態(tài)系統(tǒng)獲取一些反饋。其次，他們還引入了核心網(wǎng)絡(luò)指標（CWV），諸如具有突破性指標的最大內(nèi)容繪制（LCP），進而可以查看用戶在某個網(wǎng)頁的停留時長。

2021 年 8 月，谷歌更新了搜索排名算法，這里面考慮了是否滿足 CWV 所確定的速度和可用性標準等因素。

小改變帶來的大提升

在引入 CWV 等指標及調(diào)整后，Chrome 的平均頁面加載速度快了 166 毫秒。到目前為止，該項目已為用戶節(jié)省了超過 10000 年的網(wǎng)頁等待加載時間，以及超過 12000 年的等待網(wǎng)頁響應(yīng)用戶輸入時間。而且，網(wǎng)絡(luò)的速度還在不斷提高。在跟蹤了符合 CWV 的導(dǎo)航次數(shù)改進后，他們得到了最新的數(shù)據(jù)是，移動端為 64.45%（比原來 64% 高了一點）桌面端 68.39%（原來是 67%）。Chrome 數(shù)據(jù)團隊預(yù)測年底的通過率會達到約 69%。

多項優(yōu)化措施

后退/前進緩存（bfcache）旨在通過啟用即時的后退和前進導(dǎo)航來改善瀏覽體驗。BFCache 的命中率在 Android（3.6%）和桌面（1.8%）上逐月提高。

另一個具有特別影響的優(yōu)化示例是 PreconnectOnAnchorInteraction 功能，它在指針按下而不是指針抬起時連接到來源。這個完全推出的功能在 Android/桌面上使中位數(shù) LCP 改善了 6/10 毫秒（0.4/1%），并且跨源 LCP 在 Android 和桌面上改善了約 60 毫秒。該功能的推出還導(dǎo)致內(nèi)容廣告收入增加了0.08%，凸顯了性能優(yōu)化對用戶參與度和生態(tài)系統(tǒng)健康的重大影響。

預(yù)渲染功能，通過在用戶實際訪問之前對頁面進行渲染，使頁面可以立即加載。通過在地址欄直接輸入 URL 加載頁面時進行預(yù)渲染，根據(jù)平臺不同，中位數(shù) LCP 可以提高 500-700 毫秒（14-25%），全局中位數(shù) LCP 在所有導(dǎo)航中提高了 6.4 毫秒。他們目前正在推出由地址欄發(fā)起的搜索的預(yù)渲染功能。

Chrome一直在努力將后臺標簽頁保持在用戶的視線之外。在 Windows 11 上實施的后臺標簽頁限制運行于 EcoQOS，以及在 macOS 上的任務(wù)角色和 QoS 調(diào)整，已經(jīng)改善了最大內(nèi)容繪制（LCP）和與下一次繪制的交互（INP）。

Web 現(xiàn)代化能夠運行各種類型的應(yīng)用程序，這也需要管理這種工作負荷。他們一直在優(yōu)化多個活動標簽頁下的 Chrome，并且很高興地報告，在過去 6 個月中通過調(diào)度和爭用的改進，INP 提高了 5%，LCP 提高了 2%。

在 2022 年，他們還對 Chrome 的頁面加載代碼進行了有針對性的改進。這導(dǎo)致 Android 上的 LCP 提高了 10%，CWV 通過率提高了 1.5%。

Chrome的渲染器也進行了一些改進。渲染器的主線程包括 Javascript、渲染和圖像加載的任務(wù)隊列。一些改變優(yōu)化了這些任務(wù)的優(yōu)先級，以實現(xiàn)最佳的CWV，這些改進包含：高優(yōu)先級的圖像加載、延遲后優(yōu)先合成、SVG 柵格優(yōu)化。

Chrome 優(yōu)先加載 HTML 中解析的前五個圖像的示例。這將 LCP 從 3.1 秒改善到了 2.5 秒。

對生態(tài)的影響

博客中列舉了 CWV 對給網(wǎng)站生態(tài)帶來的變化，其中最重要的成就是驅(qū)動超三分之一的內(nèi)容管理系統(tǒng) WordPress 的性能改進，對比基于 LCP 的 WordPress 6.2，WordPress 6.3 的主題加載速度提高了 27%，經(jīng)典主題加載速度提高了 18% 。

通過 CWV 三項核心指標（LCP、FID、CLS）并獲得“良好”體驗的 Web 占比

在 Javascript 框架上，Chrome Aurora 與 Next.js、Angular 和 Nuxt 合作發(fā)布基于性能為重點的功能，如 next/script 組件、NgOptimizedImage 和nuxt/google-fonts。在 2022 年，Next.js 的通過率從 20.4% 提高到 27.3%，Angular 的通過率從 7.6% 提高到 13.2%，Nuxt 的通過率從 15.8% 提高到 20.2%。

在商業(yè)方面，性能優(yōu)化帶來了顯著的增長。例如，RedBus 改善了 INP，并觀察到轉(zhuǎn)化率增加了 7%。Economic Times 改善了 INP，頁面瀏覽量增加了 42%，跳出率減少了 49%。Meesho 成功將 LCP 從 6.9 秒降低到 2.5 秒，跳出率減少了 16.6%，轉(zhuǎn)化率增加了 3%。

以上所列舉的數(shù)據(jù)不僅僅只是數(shù)據(jù)變化，更多的是帶來了用戶體驗的提升。

原文地址：https://blog.chromium.org/2023/11/how-core-web-vitals-saved-users-10000.html

————————————————

版權(quán)聲明：本文為CSDN博主「CSDN資訊」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/csdnnews/article/details/134323388