整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
CSDN 編者按】谷歌通過官博發(fā)文稱，在通過谷歌搜索和 Chrome 瀏覽器的通力合作，以及重磅引入 Core Web Vitals（CWV，網(wǎng)站性能指標(biāo)）后，Chrome 瀏覽器給用戶節(jié)省了 1 萬年的等待時(shí)間，以及超過 12000 年的等待網(wǎng)頁響應(yīng)用戶輸入時(shí)間。
Chrome 作為時(shí)下主流瀏覽器，在 pc、移動(dòng)端的市場(chǎng)占有率一直處于遙遙領(lǐng)先地位。近日，谷歌在 Chromium Blog 上表示，Chromium 團(tuán)隊(duì)在引入 Core Web Vitals（CWV，網(wǎng)站性能指標(biāo)）體驗(yàn)優(yōu)化之后，Chrome 瀏覽器（桌面版和 Android 版）已經(jīng)為用戶節(jié)省了一萬年的網(wǎng)頁加載時(shí)間。
圖源：statcounter
谷歌在文章中介紹了 CWV 指標(biāo)改進(jìn)的背景、優(yōu)化措施進(jìn)而提升用戶體驗(yàn)，讓網(wǎng)頁加載變得更快的同時(shí)，開發(fā)者生態(tài)系統(tǒng)也在努力改善網(wǎng)頁性能。以下是對(duì)原文的編譯。
2020 年，谷歌引入了 Web Vitals 基本質(zhì)量信號(hào)，旨在確保更好的用戶體驗(yàn)。如今，有 40% 的網(wǎng)站通過了所有的核心網(wǎng)絡(luò)指標(biāo)，網(wǎng)頁加載的和響應(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)期以來，他們注意到，即使網(wǎng)站在一段時(shí)間之內(nèi)改善了性能，但隨著時(shí)間的推移，性能會(huì)隨之下降，即使 Chrome 搜索速度再快，當(dāng)頁面加載緩慢時(shí)，用戶體驗(yàn)也會(huì)受到影響。
既然無法幫助這些網(wǎng)站提高性能，那該如何提高用戶體驗(yàn)?zāi)兀繛榇耍雀杷阉鲌F(tuán)隊(duì)和 Chrome 團(tuán)隊(duì)展開協(xié)作，合力解決網(wǎng)頁性能、加載等諸多用戶體驗(yàn)問題。
定義快速網(wǎng)絡(luò)
他們檢查了數(shù)百萬個(gè)網(wǎng)頁之后，給那些快速、用戶友好的網(wǎng)頁定義了一個(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)頁的停留時(shí)長(zhǎng)。
2021 年 8 月，谷歌更新了搜索排名算法，這里面考慮了是否滿足 CWV 所確定的速度和可用性標(biāo)準(zhǔn)等因素。
小改變帶來的大提升
在引入 CWV 等指標(biāo)及調(diào)整后，Chrome 的平均頁面加載速度快了 166 毫秒。到目前為止，該項(xiàng)目已為用戶節(jié)省了超過 10000 年的網(wǎng)頁等待加載時(shí)間，以及超過 12000 年的等待網(wǎng)頁響應(yīng)用戶輸入時(shí)間。而且，網(wǎng)絡(luò)的速度還在不斷提高。在跟蹤了符合 CWV 的導(dǎo)航次數(shù)改進(jìn)后，他們得到了最新的數(shù)據(jù)是，移動(dòng)端為 64.45%（比原來 64% 高了一點(diǎn)）桌面端 68.39%（原來是 67%）。Chrome 數(shù)據(jù)團(tuán)隊(duì)預(yù)測(cè)年底的通過率會(huì)達(dá)到約 69%。
多項(xiàng)優(yōu)化措施
后退/前進(jìn)緩存（bfcache）旨在通過啟用即時(shí)的后退和前進(jìn)導(dǎo)航來改善瀏覽體驗(yàn)。BFCache 的命中率在 Android（3.6%）和桌面（1.8%）上逐月提高。
另一個(gè)具有特別影響的優(yōu)化示例是 PreconnectOnAnchorInteraction 功能，它在指針按下而不是指針抬起時(shí)連接到來源。這個(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ù)渲染功能，通過在用戶實(shí)際訪問之前對(duì)頁面進(jìn)行渲染，使頁面可以立即加載。通過在地址欄直接輸入 URL 加載頁面時(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)簽頁保持在用戶的視線之外。在 Windows 11 上實(shí)施的后臺(tái)標(biāo)簽頁限制運(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)簽頁下的 Chrome，并且很高興地報(bào)告，在過去 6 個(gè)月中通過調(diào)度和爭(zhēng)用的改進(jìn)，INP 提高了 5%，LCP 提高了 2%。
在 2022 年，他們還對(duì) Chrome 的頁面加載代碼進(jìn)行了有針對(duì)性的改進(jìn)。這導(dǎo)致 Android 上的 LCP 提高了 10%，CWV 通過率提高了 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)帶來的變化，其中最重要的成就是驅(qū)動(dòng)超三分之一的內(nèi)容管理系統(tǒng) WordPress 的性能改進(jìn)，對(duì)比基于 LCP 的 WordPress 6.2，WordPress 6.3 的主題加載速度提高了 27%，經(jīng)典主題加載速度提高了 18% 。
通過 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 的通過率從 20.4% 提高到 27.3%，Angular 的通過率從 7.6% 提高到 13.2%，Nuxt 的通過率從 15.8% 提高到 20.2%。
在商業(yè)方面，性能優(yōu)化帶來了顯著的增長(zhǎng)。例如，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ù)變化，更多的是帶來了用戶體驗(yàn)的提升。
原文地址：https://blog.chromium.org/2023/11/how-core-web-vitals-saved-users-10000.html
T之家 9 月 28 日消息，谷歌 Chrome 106 正式版更新相比 105 變化沒有那么大，但仍然包含一些有趣的功能，還棄用了一些功能。
在谷歌 Chrome 106 中棄用了三個(gè)功能。在 requestFileSystem () 方法中不推薦使用持久配額類型，因?yàn)榻o代碼增加了不必要的復(fù)雜性，由于其使用率低，這尤其不受歡迎； HTTP / 2 推送流將遭受同樣的命運(yùn)，Chrome 將不再接收、存儲(chǔ)在內(nèi)存中或使用此配置發(fā)送的流；同樣，Chrome 106 也放棄了對(duì) cookie 域名屬性中的非 ASCII 字符的支持，以符合 RFC 6265bis 規(guī)范中的最新標(biāo)準(zhǔn)化。
在新功能方面，Chrome 106 一項(xiàng)主要改進(jìn)是支持 SerialPort 中的自帶緩沖區(qū) (BYOB)。谷歌描述如下：
“開發(fā)人員可以通過調(diào)用 getReader ({mode: 'byob'}) 來檢測(cè)對(duì) BYOB 讀取器的支持，因?yàn)榕f實(shí)現(xiàn)在傳遞新參數(shù)時(shí)會(huì)拋出 TypeError。BYOB（或“自帶緩沖區(qū)”）讀取器允許開發(fā)人員指定讀取數(shù)據(jù)的緩沖區(qū)，而不是為每個(gè)塊分配新緩沖區(qū)的流。除了潛在地降低內(nèi)存壓力之外，這還允許開發(fā)人員控制接收到的數(shù)據(jù)量，因?yàn)榱鞣祷氐臄?shù)據(jù)量不能超過提供的緩沖區(qū)中空間。從端口讀取特定數(shù)量的數(shù)據(jù)能力使這個(gè) API 對(duì)于習(xí)慣于針對(duì)串行設(shè)備的 Windows 和 POSIX API 進(jìn)行編程的開發(fā)人員更加熟悉，這些 API 以同樣的“自帶緩沖區(qū)”原則運(yùn)行。相比之下，當(dāng)前的 API 要求開發(fā)人員針對(duì)多余的不需要的數(shù)據(jù)進(jìn)行防御性編碼，而不是只讀取他們準(zhǔn)備處理的內(nèi)容。”
除此之外，無前綴 hyphenate-character 屬性 CSS 屬性現(xiàn)在很穩(wěn)定，將隨 Chrome 106 一起提供。“-webkit-hyphenate-character”屬性將在稍后未指定的日期棄用。
Chrome 106 的另一個(gè)關(guān)鍵改進(jìn)是支持 Intl.NumberFormat API v3 。此版本具有以下新功能：
添加 3 個(gè)新函數(shù)來格式化數(shù)字范圍：formatRange / formatRangeToParts / selectRange
分組枚舉
新的舍入 / 精度選項(xiàng)
舍入優(yōu)先級(jí)
將字符串解釋為小數(shù)
舍入模式
符號(hào)顯示為負(fù)
此外，還為 WebCodecs 中的音頻和視頻接口引入了出隊(duì)回調(diào)。它允許開發(fā)人員在編碼和解碼接口中找出隊(duì)列大小是否減少，而不是設(shè)置定時(shí)函數(shù)來隨機(jī)檢查相同。
IT之家獲悉，Chrome 106 現(xiàn)在支持 CSS“ic”長(zhǎng)度單位。這用于表示日文和中文字體的“相對(duì)于水象形文字的高級(jí)度量”的長(zhǎng)度，并且已經(jīng)存在于 Safari 和 Firefox 中。展望未來，CORS 將通過 Signed HTTP Exchange 在子資源預(yù)取和加載中強(qiáng)制執(zhí)行。
此版本的 Chrome 中也有一些實(shí)驗(yàn)性功能。有兩個(gè)開發(fā)者試驗(yàn)被鎖定在 flag 中。第一個(gè)是將文件系統(tǒng)訪問 API 中的異步方法更新為同步方法。這將提高性能并為 API 帶來一致性。其次，谷歌將繼續(xù)其 UA 用戶代理減少計(jì)劃的第 5 階段。這個(gè)想法是為了提高隱私，同時(shí)減少在解析復(fù)雜的 User-Agent 字符串時(shí)出錯(cuò)的機(jī)會(huì)。
同樣，兩項(xiàng)能力也已進(jìn)入 Origin 試驗(yàn)階段。匿名 iframe 提供了一種通過臨時(shí)上下文在外部 iframe 中加載文檔的方法。由于它是 Cross-Origin-Embedder-Policy (COEP) 的概括，因此消除支持 COEP 的第三方 iframe 作為嵌入到 COEP 頁面的先決條件的要求。此試用將持續(xù)到 Chrome 108。
現(xiàn)在也通過 Origin 試用版提供彈出式 API，它允許開發(fā)人員在 Web 應(yīng)用程序之上的交互式瞬態(tài) UI 元素。這類似于“對(duì)話框”元素，但具有新功能，例如包括光標(biāo)關(guān)閉行為、彈出交互管理、動(dòng)畫、事件支持和非模態(tài)模式。
接下來是 Chrome 107 瀏覽器，它將于 9 月 29 日進(jìn)入 Beta 通道，并將于 10 月 25 日進(jìn)入穩(wěn)定版頻道。
下將以Linux為例
一、Linux安裝chrome
獲取安裝包
# wget https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm
安裝依賴
# yum install -y lsb
# yum install -y libXScrnSaver
# yum install liberation-fonts
# yum install vulkan
本地安裝
# yum localinstall google-chrome-stable_current_x86_64.rpm
命令執(zhí)行完成以后可通過以下命令查看chrome的版本
# google-chrome -version
如果正常顯示chrome版本號(hào)表示我們的chrome已經(jīng)安裝完成
二、生成圖片和PDF文件
1、生成圖片
#通過URL地址生成
google-chrome --headless --disable-gpu --screenshot=/data/app-server/google/2.png --window-size=630,1100 --hide-scrollbars --no-sandbox https://resource.xgjk.info/form/1660635773921_1973.html
#通過本地文件生成
google-chrome-stable --no-sandbox --headless --disable-gpu --screenshot=test.png -run-all-compositor-stages-before-draw --window-size=400,1200 /data/app-server/google/chufang.html
2、生成PDF
#通過URL地址生成
google-chrome --headless --disable-gpu --no-sandbox --print-to-pdf-no-header --print-to-pdf=/data/app-server/google/18.pdf https://resource.xgjk.info/form/1660635773921_1973.html
#通過本地文件生成
google-chrome --headless --disable-gpu --no-sandbox --print-to-pdf-no-header --print-to-pdf=/data/app-server/google/18.pdf /data/app-server/google/chufang.html
--screenshot 圖片位置
--window-size 圖片寬高
--print-to-pdf PF文件位置
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
