僅僅隻是數據變化,更多是帶來了用戶體驗的提升。
CSDN
【編者按】谷歌通過官博發文稱,在通過谷歌搜索和 Chrome 浏覽器的通力合作,以及重磅引入 Core Web Vitals(CWV,網站性能指标)後,Chrome 浏覽器給用戶節省了 1 萬年的等待時間,以及超過 12000 年的等待網頁響應用戶輸入時間。
Chrome 作爲時下主流浏覽器,在 pc、移動端的市場占有率一直處于遙遙領先地位。近日,谷歌在 Chromium Blog 上表示,Chromium 團隊在引入 Core Web Vitals(CWV,網站性能指标)體驗優化之後,Chrome 浏覽器(桌面版和 Android 版)已經爲用戶節省了一萬年的網頁加載時間。
圖源:statcounter
谷歌在文章中介紹了 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 一直在努力将後台标簽頁保持在用戶的視線之外。在 Windows 11 上實施的後台标簽頁限制運行于 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 的 WordPress 6.2,WordPress 6.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%。
以上所列舉的數據不僅僅隻是數據變化,更多的是帶來了用戶體驗的提升。